This content originally appeared on CSS Wizardry and was authored by 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 origin1 via one simple response header:
Clear-Site-Data.
Clear-Site-Data: "cache", "cookies"
Any response carrying this header will clear the caches2 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.
-
https://www.bar.comandhttps://foo.bar.comare different origins: an origin is scoped to scheme, domain, and port. ↩ -
The spec dictates that any sort of cache associated with the given origin should be cleared, and not just the HTTP cache ↩
This content originally appeared on CSS Wizardry and was authored by CSS Wizardry
CSS Wizardry | Sciencx (2023-10-02T15:30:49+00:00) How to Clear Cache and Cookies on a Customer’s Device. Retrieved from https://www.scien.cx/2023/10/02/how-to-clear-cache-and-cookies-on-a-customers-device/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.