Accessing the Browser Performance API to Prevent Showing Back/Forward Page Cache

All modern browsers are configured to ensure you have the fastest loading times possible.

One of the methods of speeding up load times is to save a local cache of the page contents of the "Back" and "Next" pages that you've recently visited.

The Problem

If someone logs out of your application, from an account page, then the user can click the browser "Back" button after logging out and view a locally cached version of the account page.

Server-side Solution (Ideal)

Ideally you want the server to communicate to the browser on the initial 200 request that the browser should not use cache to render the page. This can be done with Control-Cache directives in document header.

If you have access to the headers of the 200 document, then it's much easier to use the following headers to ensure local cache isn't used. See also a great explanation from CloudFlare about Origin Cache Control.

A Javascript Solution

If you don't have access to change the server-side cache-control headers, you can leverage information from the browser that tracks if the user accessed the page via the "Back" or "Forward" button.

How can you detect if a user is accessing a page from using the "Back" or "Forward" buttons?

PerformanceNavigationTiming is part of a modern browsers Performance API which captures user navigational data.

Inside of the performance interface, there is a navigation object that stores various types of entries which include:

1. navigate
2. reload
3. back_forward
4. prerender

Add an EventListener to the pageshow, then check for the type 'back_forward' and reload the page if TRUE. The reload will ensure that the cache is refreshed.

window.addEventListener( "pageshow", function ( event ) {
  if (window.performance.getEntriesByType("navigation")[0].type == 'back_forward') {
      window.location.reload();
    }
});

You can also use HTTP META tags, but in some cases this may not be sufficient.

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate, max-age=0, private, post-check=0, pre-check=0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">