How to Clear Cache and Cookies on a Customer’s Device

Written by Harry Roberts on CSS Wizardry.

N.B. All code can now be licensed under the permissive MIT license. Read more about licensing CSS Wizardry code samples…

If you work in customer support for any kind of tech firm, you’re probably all too used to talking people through the intricate, tedious steps of clearing their cache and clearing their cookies. Well, there’s an easier way!

Getting Someone to Clear Their Own Cache

Trying to talk a non-technical customer through the steps of clearing their own cache is not an easy task—not at all! From identifying their operating system, platform, and browser, to trying to guide them—invisibly!—through different screens, menus, and dropdowns is a big ask.

Thankfully, any company that has folk in customer support can make use of a new web platform feature to make the entire process a breeze: Clear-Site-Data.

Clear-Site-Data

A relatively new HTTP header, available in most modern browsers, allows developers to declaratively clear data associated with a given origin¹ via one simple response header: Clear-Site-Data.

Clear-Site-Data: "cache", "cookies"

Any response carrying this header will clear the caches² associated with that origin, so all your customer support team needs now is a simple URL that they can send customers to that will clear all of their caches for them.

Preventing Malicious Clears

While it probably wouldn’t be disastrous, it is possible that a bad actor could link someone directly to https://www.example.com/clear and force an unsuspecting victim into clearing their cache or cookies.

Instead, I would recommend that your /clear page contains links to URLs like /clear/cache, /clear/cookies, /clear/all, each of which check and ensure that the referer request header is equal to https://www.example.com/clear. This way, the only way the clearing works is if the user initiated it themselves. Something maybe a little like this:

const referer = req.get('Referer');

if (referer === 'https://www.example.com/clear') {
  res.set('Clear-Site-Data', 'cache');
} else {
  res.status(403).send('Forbidden: Invalid Referer');
}

Clear-Site-Data for Developers

This isn’t the first time I’ve written about Clear-Site-Data—I mentioned it briefly in my 2019 article all about setting the correct caching headers. However, this is the first time I’ve focused on Clear-Site-Data in its own right.

Naturally, the use case isn’t just limited to customer support. As developers, we may have messed something up and need to clear all visitors’ caches right away. We could attach the Clear-Site-Data header to all HTML responses for a short period of time until we think the issue has passed.

Note that this will prevent anything from going into cache while active, so you will notice performance degradations. While ever the header is live, you will be constantly evicting users’ caches, effectively disabling caching for your site the whole time. Tread carefully!

Clearing Cache on iOS

Unfortunately, Clear-Site-Data is not supported by Safari, and as all browsers on iOS are just Safari under the hood, there is no quick way to achieve this for any of your iPhone users. Therefore, my advice to you is to immediately ask your customer Are you using an iPhone?. If the answer is no, direct them to your /clear page; if yes, then, well, I’m sorry. It’s back to the old fashioned way.

It’s also worth noting that Firefox doesn’t support the specific "cache" directive, it was removed in 94, but I can’t imagine the average Firefox user would need assistance clearing their cache.

N.B. All code can now be licensed under the permissive MIT license. Read more about licensing CSS Wizardry code samples…

By Harry Roberts

Harry Roberts is an independent consultant web performance engineer. He helps companies of all shapes and sizes find and fix site speed issues.