31

I am writing an application that if the user hits back, it may resend the same information and mess up the flow and integrity of data. How do I disable it for users who are with and without javascript on?

SamB
  • 9,039
  • 5
  • 49
  • 56
Haoest
  • 13,610
  • 29
  • 89
  • 105
  • 41
    If i'm using your site, the back button is still MINE. Do not mess with what's mine... ;-) – Shog9 Sep 17 '08 at 20:48
  • 5
    This is the wrong question. What you should do is design the application such that when the information is resent, the application will recognize it and act appropriately. – reinierpost Jun 14 '11 at 12:07

12 Answers12

76

It's not possible, sadly. However, consider your applications navigation model. Are you using Post/Redirect/Get PRG Model? http://en.wikipedia.org/wiki/Post/Redirect/Get?

This model is more back button friendly than the Postback model.

Scott Hanselman
  • 17,712
  • 6
  • 74
  • 89
  • 51
    Nothing sad about it. – Joel Coehoorn Sep 17 '08 at 20:48
  • 19
    Valid point. I'm just sad. ;) – Scott Hanselman Sep 17 '08 at 21:24
  • Scott - Is the ability to disable the toolbars and right click menu IE specific then? I've seen LOB apps that completely lock down the navigation, but (again sadly) they also require the user have IE. – Beep beep Mar 18 '09 at 22:53
  • 1
    Well, some apps can run themselves in "Kiosk" mode, but that involves launch IE with command line switches. – Scott Hanselman Mar 29 '09 at 05:15
  • @Jess: That's one of those annoyances that good browsers try to fix, like unrequested pop-up windows. Firefox got a "Disable or replace context menu" setting for this reason. – Álvaro González Jun 04 '10 at 09:50
  • 1
    Is it possible to put confirmation question before back button lead us to the previous page? In case OK go previous if cancel stay where you are. – eomeroff Mar 29 '12 at 22:35
  • 1. Code your web app using AJAX only, do not change the URL at all. 2. Handle onbeforeunload to warn that they are about to leave the app. This also prevents leaking information to the browser history (and you might also want to disable caching). It would be too much work to make this change to an existing app; this approach is only feasible if you build your app in this way from the beginning. – Sam Watkins Jun 02 '15 at 07:51
12

You shouldn't.

You could attach some script to the onbeforeunload event of a page and confirm with the user that's what they want to do; and you can go a bit further and try to disable it but of course that will only work for users who have javascript turned on. Instead look at rewriting the app so you don't commit transactions on each page submit, but only at the end of the process.

blowdart
  • 55,577
  • 12
  • 114
  • 149
  • Hmmm... the onbeforeunload event would be called also when navigating away from the page because user is simply going to another page (not only because user pushed the back button), and the script would be called. – Marco Demaio Feb 23 '10 at 12:35
8

I strongly urge you to go to heroic lengths to prevent breaking the back button, it is a sure fire way to alienate your users and even made it to No.1 on Jacob Neilsen's Top 10 Web Design Mistakes in 1999.

Perhaps you could consider rather asking the question: "How to avoid breaking the back button for <insert your scenario here>?"

If Scott's answer hits close to the mark, consider changing your flow to the PRG model. If it's something else, then give a bit more detail and see how we can help.

Mike Tunnicliffe
  • 10,674
  • 3
  • 31
  • 46
  • 2
    He did not say he wanted to "break" the back button. He wants to avoid a common pitfall where modern Ajax design patterns fail because a user presses "Back" meaning "Undo The Thing I Just Did With Your Ajax App" and instead gets "Go Back One Arbitrary And Ambiguous HTTP Request". – pcorcoran Sep 18 '08 at 05:09
  • 1
    To me that just reads "he didn't want to break the back button, he just wanted to break the back button to prevent it being broken". :S It is possible to get AJAX/JavaScript and back buttons to play nice, all I'm suggesting is that would be the route I'd recommend following. – Mike Tunnicliffe Sep 18 '08 at 09:10
7

I came up with a little hack that disables the back button using JavaScript. I checked it on chrome 10, firefox 3.6 and IE9:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<title>Untitled Page</title>
<script type = "text/javascript" >
function changeHashOnLoad() {
     window.location.href += "#";
     setTimeout("changeHashAgain()", "50"); 
}

function changeHashAgain() {
  window.location.href += "1";
}

var storedHash = window.location.hash;
window.setInterval(function () {
    if (window.location.hash != storedHash) {
         window.location.hash = storedHash;
    }
}, 50);


</script>
</head>
<body onload="changeHashOnLoad(); ">
Try to hit back!
</body>
</html>
Yossi Shasho
  • 3,632
  • 31
  • 47
  • 3
    But it works - go ahead and test it. – Yossi Shasho Nov 29 '11 at 12:37
  • 1
    I don't doubt that. It's just a bad experience for the user, who may actually *want* to go back. – Soumya Dec 02 '11 at 17:14
  • 3
    IE9 doesn't allow me to scroll down for this one. Works fine in latest FF, Chrome, Safari. The people that will use my single page app will only have IE<=9 to use though. – chrism Feb 01 '12 at 05:38
  • 5
    Its not always a bad experience for the user, sometimes its the right experience. for example, a page may change its state with Ajax, e.g. gmail. when the user clicks 'back', the user actually expects the page to go back to the previous *state*, rather than to go back to the previous *page* – Yossi Shasho Feb 12 '12 at 15:58
  • Whilst not terribly nice, this solution is perfect for a specific application I am working on and it works nicely. Is there a reason why IE9 has issues though? When scrolling down it keeps jumping back to the top of the page. Any solution for our IE9 users? – Warren Sergent Apr 26 '12 at 23:13
  • It uses HTML anchors to disable the back button, so that when the user clicks back he's actually jumping to the previous anchor. in this case, '#1' or '#'. if they don't exist in the page, the page will scroll to the top. It can be fixed with other anchor texts or with javascript – Yossi Shasho Nov 15 '12 at 10:33
5

Best option is not to depend on postbacks to control flow, however if you are stuck with it (for now)

you may use something like this:

  Response.Cache.SetCacheability(HttpCacheability.NoCache);
  Response.Cache.SetExpires(Now.AddSeconds(-1));
  Response.Cache.SetNoStore();
  Response.AppendHeader("Pragma", "no-cache");

Soon you will find that it will not work on all browsers, but then you may introduce a check in your code like:

 if (Page.IsPostBack)
 {
        if (pageIsExpired()){
           Response.Redirect("/Some_error_page.htm");
        }
        else {
           var now = Now;
           Session("TimeStamp") = now.ToString();
           ViewState("TimeStamp") = now.ToString();
        }

  private boolean pageIsExpired()
  {
     if (Session("TimeStamp") == null || ViewState("TimeStamp") == null)
        return false;

     if (Session("TimeStamp") == ViewState("TimeStamp"))
        return true;

        return false;
  }

That will solve problem to some extend, Code not checked -- only for examples purposes..

Claus Thomsen
  • 2,325
  • 2
  • 24
  • 27
4

It is possible to disable back button in all major browser. It just uses hash values to disable the back button completely. Just put these 5 lines of code in your page

 <script>
window.location.hash="no-back-button";
window.location.hash="Again-no-back-button";//for google chrome
window.onhashchange=function(){window.location.hash="no-back-button";}
</script>

Detailed description

bugwheels94
  • 30,681
  • 3
  • 39
  • 60
3

Here's a previous post on it: Prevent Use of the Back Button (in IE)

Community
  • 1
  • 1
kemiller2002
  • 113,795
  • 27
  • 197
  • 251
3

Whatever you come up with to disable the back button might not stop the back button in future browsers.

If its late in the development cycle I suggest you try some suggestions above but when you get time you should structure your flow so that the back button does not interfere with the logic of your site, it simply takes the user back to the previous page like they expect it to do.

Keith
  • 230
  • 1
  • 4
  • 13
1

It is true, proper validation should be added to make sure duplicate data doesn't mess things up. However, as in my case, I don't full control of the data since I'm using some third party API after my form. So I used this

history.go(+1);

This will send user forward to the "receipt" which is supposed to come after "payment" page if they try to go back to "payment" page (just giving a payment for example). Use sparingly, though

katzmopolitan
  • 1,371
  • 13
  • 23
0

Find below link

Disable browser back button functionality using JavaScript in asp.net | ASP.Net disable browser back button (using javascript)

http://www.aspdotnet-suresh.com/2011/11/disable-browser-back-button.html

Nimmanagottu
  • 11
  • 1
0

I was able to accomplish this by using:

 Response.Cache.SetExpires(DateTime.MinValue);
 Response.Cache.SetNoStore();

When I used Response.Cache.SetCacheability(HttpCacheability.NoCache); it prevented me from downloading office files.

user825345
  • 51
  • 1
  • 1
0

You could post the data on each form to a _NEW window. This will disable the back button on each window, but without javascript it might be difficult to force the old one closed.

skamradt
  • 15,366
  • 2
  • 36
  • 53