55 Minutes

Welcome to the 55 Minutes blog.
55 Minutes is a web development consultancy in San Francisco building apps for design-led businesses and startups. On this blog we discuss the technology tools of our trade: Ruby on Rails, Django, Sass, OS X, and more.

How to Defeat the Browser Back Button Cache

When a user hits the back button in her web browser, more often than not the previous page is loaded from cache, with no server roundtrip. The browser doesn’t even make an If-Modified-Since request; it pulls the page from cache, no questions asked. How can we change this behavior?

Imagine the user has just completed a complicated multi-page wizard or checkout process and then hits the back button. You may not want to allow the user to backtrack into the previous state; instead you want to refresh the page with something different.

To accomplish this we just need to disable browser caching using appropriate HTTP headers. Here’s the secret:

Cache-Control: no-cache, max-age=0, must-revalidate, no-store
01-headers – View Gist

Taken individually, each of these Cache-Control attributes would seem to prevent caching. In practice, no-cache and no-store are usually interchangeable in most browsers. However for the back button cache specifically, Firefox will only disable this cache if no-store is specified. To play it safe and guarantee cross-browser compatibility, you should use all four attributes.

To implement this in Wicket, we would add the following code to our page class:

/**
 * Disable browser back button cache.
 */
@Override
protected void configureResponse(WebResponse response) 
{
    super.configureResponse(response);
    response.setHeader(
        "Cache-Control",
        "no-cache, max-age=0, must-revalidate, no-store");
}
02-SamplePage.java – View Gist
comments powered by Disqus