How to expire page on back button

Download Demo Project (157.17 kb)

For quite some time I have been trying to find a solution to expire web page when user clicks on back button in browsers. All the solutions that I have found point to pretty much same implementation that involves setting right set of http headers that will instruct the browsers to expire the cache immediately or do not cache the page. Here is code snippet that I have used to set all the cache control headers that could be set for a page.

void ExpirePage()
{
  Response.Expires = -1;
  Response.ExpiresAbsolute = DateTime.Now.AddDays(-1);
  Response.Cache.SetCacheability(HttpCacheability.NoCache);
  Response.Cache.SetNoStore();
  Response.Cache.SetRevalidation(HttpCacheRevalidation.AllCaches);
 }

After doing lot of tests, I found that setting of these cache headers does not seem to work all the time. I tried it on all browsers and none of them could gurantee that if I set headers for no caching, it would not serve cached page. At the end HTTP sepcification for caching is more of a guidelines for agents (browsers etc.) and is not a requirement. So there is always some rogue browser that will not honor your headers and end up serving cached content.

After doing some expriment and reading thorugh HTTP specifications and looking at behvior of browsers, I came up with few solutions and they work all the time. At the end of the day, you are trying for a solution that will prevent user from hitting Back button and be able to go back to previous page. So it does not have to be a solution where you are showing a warning telling the user that Web Page Has Expired. Solution can be as elegant that when user hits Back button they are taken to a page which has public content or any content that does not need to be revalidated. Here are solutions for this problem.

  • Landing Page

    Create a landing page where users will be redirected to after they log out from application or in response to any action that signals end of session involving sensitive data. For example in my sample project, after user clicks on Logout link, they get redirected to Logout.aspx page.

  • Do set all the cache headers to let browser do its job of not saving cached content, revalidate and all that good stuff. I have shown code snippet that I use in my ASP.Net applications.

  • Solution 1 - Redirect to Another Page

    Right at the top of the page, in header, put one line of JavaScript that will redirect the user to another page which could some default page or some marketting page. Expire content of that page as well as precaution. Here is code snippet that I used.

    <head runat="server">
        <title></title>
        <script type="text/javascript">
          document.location.href = "Default.aspx";
        </script>
    </head>
    
  • Solution 2- Redirect To Another Page After Few Seconds

    If you do not want to redirect the user to another page right away, you can always show some message on the page with a countdown to let user know that they are about to be redirected to some other page. Here is JavaScript that I used to start count down to 10 seconds and then do a redirect.

    <script type="text/javascript">
      var timerId = -1;
      var ticks = 1;
      $(document).ready(function () {
           timerId = setInterval(doCountDown, 1000);
      });
    
      function doCountDown() {
       if (ticks >= 10) {
           document.location.href = "Default.aspx";
       }
      $('#ticker').text(ticks);
      ticks++;
      clearInterval(timerId);
      timerId = setInterval(doCountDown, 1000);
    }
    </script>
    
  • Solution 3 - Post To Self Or Other Page

    While going through HTTP specification, I found the following description on how cache should behave under certain conditions.

    Some HTTP methods MUST cause a cache to invalidate an entity. This is either the entity referred 
    to by the Request-URI, or by the Location or Content-Location headers (if present). These methods are:
      - PUT
      - DELETE
      - POST
    

    Based on this explanation, you can send a post request to self or another page. If you are doing post back to self, then in server side, you can check for IsPostBack and then redirect user to another page. Here is little code snippet that I used.

    <script type="text/javascript">
      $(document).ready(function () {
           $('#form1').submit();
      });
    </script>
    

All three solutions work even if the browser decided to server cached page because cached page will have the JavaScript code on it to redirects. And solution #3 will work even if revalidation does not happen because JavaScript will ensure that page posts to self or another page.

comments powered by Disqus

Blog Tags