How to Clear Cache and Cookies on a Customer’s Device – Harry Roberts – Web Performance Consultant

Created on November 12, 2023 at 10:59 am

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

Written by Harry Roberts PERSON on CSS Wizardry.

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 CARDINAL 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 DATE 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 DATE . 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 EVENT ‘ ) { res . set ( ‘ Clear-Site-Data ‘ , ‘ cache ‘ ); } else { res . status ( 403 CARDINAL ). send ( ‘ Forbidden: Invalid Referer ‘ ); }

Clear-Site-Data for Developers

This isn’t the first ORDINAL time I’ve written about Clear-Site-Data ORG —I mentioned it briefly in my 2019 DATE article all about setting the correct caching headers. However, this is the first ORDINAL 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 ORG , and as all browsers on iOS are just Safari ORG under the hood, there is no quick way to achieve this for any of your iPhone ORG 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 ORG doesn’t support the specific "cache" directive, it was removed in 94 CARDINAL , but I can’t imagine the average Firefox ORG user would need assistance clearing their cache.

Did this help? We can do way more!

Connecting to blog.lzomedia.com... Connected... Page load complete