Disable browser back action to external page using javascript / jquery in MVC application

Question

I know this will be a duplicate question, but I am asking this after being frustrated for three days.

I am lending on my site's page after completing payment on external payment site. There are scenrios where user have clicked a back button and they have been charged twice or more due to it hence I want to disable back action to that page.

I have tried many answers available here on stack overflow. Below is one of the most commonly answered solution which I have tried

<script type="text/javascript">
    $(document).ready(function(){
        history.pushState(null, null, location.href)
        history.back();
        history.forward();
        window.onpopstate = function(){
            history.go(1);
        }
    });
</script>

referenced from Disable browser back action using jquery

Also, https://support.google.com/chrome/thread/8721521?hl=en

It will be really greatfull if anybody can help guide me in right direction.

Additional Information:

• Chrome version - 100.0.4896.75
• Edge version - 100.0.1185.36

Answer 1

What you are trying to achieve is called "backbutton hijacking". And it seems Chrome has added a fix to the hack you are currently using. Usually, this was used by malicious sites. You can read more here: https://www.pcmag.com/news/chrome-browser-to-stop-websites-abusing-the-back-button. In other words, if there is no user interaction the website should not stop the user from using the back button.

---

I would recommend that you discuss this problem with your payment provider. They should never make the same payment twice for the same order.

Which payment provider are you using?