October 4, 2015

HTTP cache-control header and the Chrome back button

HTTP cache-control Header & the Chrome Back Button | Mixmax

A common pitfall of sites that serve up dynamic information is to not include the proper cache-control headers. For example, a commonly used variant of the cache-control header is this:

cache-control: private, max-age=0, no-cache

However, it’s not quite right. Take, for example, the Chrome back button. When a user visits your website, navigates away, and returns via the back button (or reopens a tab from history), Chrome will actually still serve up the cached page (despite the no-cache cache directive!). This was admittedly frustrating to us and the source of several Mixmax bugs involving stale content being served up.

The solution? Add the no-store cache directive. It tells the browser to really not store anything at all. So this works, and clicking the back button in Chrome will never serve up cached content:

cache-control: private, max-age=0, no-cache, no-store

See the following repro case:

/** * Run this by downloading this script to your computer, then: * 1. $ npm install express * 2. $ node thisscript.js * 3. Open localhost:8030/nocache and then localhost:8030/nostore */

var app = require('express')();

app.get('/nocache', function(req, res) {
  res.setHeader('Cache-Control', 'no-cache');
  res.send(new Date().toString() + '<br><a href="https://mixmax.com">Click to navigate away and then press ' +
      'Back. It will show the same timestamp.</a>');
});

app.get('/nostore', function(req, res) {
  res.setHeader('Cache-Control', 'no-cache, no-store'); // Added no-store
  res.send(new Date().toString() + '<br><a href="https://mixmax.com">Click to navigate away and then press ' +
      'Back. It will update the timestamp.</a>');
});

app.listen('8030');

If you open http://localhost:8030/nocache in Chrome, click the link and then click back, you'll see the same timestamp. However, if you open http://localhost:8030/nostore, click the link and click back, you'll see an updated timestamp.

This has been filed as #516846. But since there isn't a formal standard for back/forward browser button behavior, it's hard to argue what the right behavior should be.

Like working on seemingly impossible problems? Join us to upgrade email to the 21st century!

You deserve a spike in replies, meetings booked, and deals won.

Try Mixmax free