Security issues of Back/Forward cache in browsers, How to protect your web application

Photo by Denny Müller on Unsplash

Introduction

Modern browsers are constantly evolving to provide a smoother, faster, and more seamless experience for users. One feature that ensures faster navigation is the Back/Forward cache, a technology that allows browsers to restore web pages almost instantaneously when users click the back or forward button.

While this feature offers clear performance and usability benefits, it introduces a range of subtle security risks that every web developer should be aware of. If your web application handles sensitive information or manages user authentication, understanding these risks is essential to protecting both your users and your application.

What is the Back/Forward Cache?

Traditionally, when users navigated away from a page and then returned (by pressing the back or forward button), the browser would either reload the page from the server or reconstruct it using cached resources. This process could be slow, especially for dynamic applications.

Get Lokeshwar Reddy N’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

The Back/Forward cache is different. Instead of just caching files, the browser freezes the entire page, including its JavaScript state, DOM, variables, and even scroll position. When a user navigates back or forward, the page is instantly restored from memory, as if nothing ever changed.
This means the web app’s state, open dialogs, filled forms, and more are preserved perfectly.

Security Risks Introduced by the Back/Forward Cache

1. Sensitive Data Exposure After Logout

A common expectation is that, after logging out, a user cannot access sensitive content without re-authenticating. However, with the Back/Forward cache, previously visited pages (such as account settings or dashboards) may still be restored exactly as they were before logout, when you perform actions on these restored pages, a well implemented application should reject the request requiring you to re-authenticate, but the page itself reveals previously rendered sensitive data to anyone who simply presses the back button even after the user has logged out.

2. Stale Application State

If your application shows user-specific or dynamic data, restoring from the Back/Forward cache can display outdated or unauthorized information. For example, notifications, shopping carts, or user preferences might appear incorrectly if the state has changed on the server but the cached page shows past state.

How to Protect Your Web Application

While you can’t disable this caching feature in browsers, you can implement several strategies to protect your app and your users:

1. Listen for Page Events

Browsers fire special events when a page is restored from the Back/Forward cache or when navigating away from a page.
Use JavaScript to detect when your page is being shown after navigation:

window.addEventListener("pageshow", function(event) {
  if (event.persisted) { // true if page was restored from Back/Forward cache
    // Refresh data, clear sensitive info, or redirect to login
  }
});

window.addEventListener("pagehide", function(event) {
  if (event.persisted) { // The page is being put into Back/Forward Cache
    // Clear sensitive info if necessary.
  } else {
    // The page is being unloaded permanently (e.g., closing tab)
    // Perform cleanup, save data, etc.
  }
});

2. Unload Event (Not Recommended)

“Unload” event is called when browser is terminating a page, as modern browsers added support for Back/Forward cache which freezes a page instead of terminating it, some browsers have decided not to cache pages with this event, while some other browsers have decided to cache without triggering this event. So it’s not recommended to use this event for performing actions related to Back/Forward cache.

3. Page Lifecycle API

Few modern browsers have provided events like “freeze” and “resume” as part of the Page Lifecycle API, these events are specifically triggered only when page is saved to or restored from Back/Forward cache. But all browsers might not support it.

Testing

Test your pages extensively by navigating on all possible scenarios (eg., logged in, logged out, etc.) Do not assume correctness. Even if the user is properly logged out on server. Browser might have cached the old logged in page, which could lead to client-side security issues.

Conclusion

The Back/Forward cache is a powerful browser feature that boosts user experience, but it can easily undermine your application’s security if left unaddressed. As web developers, it’s our responsibility to understand these browser behaviors and implement the right safeguards. By proactively adopting the strategies above, you can ensure that your web application remains both fast and secure.