Javascript | Odoo

Restricting previous page access in Browser

Not allowing the user to go to the preceding page

Hey everyone, recently I came across the problem of restricting the user from going back to the screen he came from and it took me quite some time to get it resolved 😢 but finally with god’s grace and google’s algorithm I figured it out 😎. The problem was as follows.

Problem Statement: Don’t allow the user to access the page he came from

So I created a form in Odoo and to restrict the user from accessing the previous page, I exploited the web features provided by jQuery.

Since the problem isn’t specific to a framework I won’t be telling how to embed the code 👩‍💻, I’ll just explain the javascript code snippet that would be used to restrict the user from going back.

Before we proceed further, I should mention that by default there’s no such functionality provided by jquery which you can use directly because it’ll affect the user's security, so being smartasses that we are we’ll just use a hack to restrict the user from going back 👈.

jQuery Code and Explanation

Code

$(document).ready(function () {
    // using pushstate to add the page in history stack,
    //  the step is necessary or else popstate won't work
    window.history.pushState("", "", window.location.path);
    
    // whenver there is a change in active history the event gets trigerred
    $(window).on('popstate', function(event) {
        window.history.forward(1);
    });
});

Line by line explanation

1. All the code to restrict the user from going back to the previous page is enclosed in the jquery’s document.ready method, the ready event occurs when the Document Object Model (DOM) is loaded. You can read more about it here.
2. Inside the code, the first line is as follows:

window.history.pushState("", "", window.location.path);

In this line of code we’ve made use of jquery’s pushState feature, which helps us to add an entry to the browser’s session history, this step is necessary because we can only access the history that we’ve added in the stack due to security restrictions by the browser you can’t access the user’s personal browser history. You can read more about pushState here.

3. The last part is the part where we have made use of jQuery’s popstate feature.

$(window).on('popstate', function(event) {
    window.history.forward(1);
});

This is the interface that gets fired when there is a change in the active history of the user session, since we just added something in the user’s active history in step two that’s why we’re able to actually handle the event and take advantage of it. You can read more about it here.

Inside popstate we have added the following line.

window.history.forward(1);

What this line does is that it pushes the user forward by one page.

So in a nutshell, when the user presses the back button, he’s going to the previous page but before the page even is accessed or loaded we push the user forward, hence creating an illusion that the user is staying on the same page.

Conclusion: Due to browser security restrictions we can’t actually suppress the back press functionality but we can make the user stay on the same page.