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

By admin
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!