HTTP cache-control header and the Chrome back button

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!