The Clear-Site-Data HTTP response header is a powerful tool that allows web developers to command a browser to clear various types of locally stored data associated with the requesting website's origin.

It is primarily used to ensure that sensitive information is removed from the client side during specific lifecycle events, such as logging out.

What Data Can Be Cleared?

The header accepts one or more directives (strings) that specify which types of data should be purged:

• "cookies": Removes all cookies associated with the domain.
• "cache": Clears the browser's cache (files, images, scripts) for that site.
• "storage": Clears all DOM storage, including localStorage, sessionStorage, IndexedDB, and Service Worker registrations.
• "executionContexts": Reloads the page and clears all active browsing contexts (like iframes or workers).
• "*": A wildcard that clears all of the above.

Syntax and Implementation

The header is sent by the server in an HTTP response. Multiple directives are separated by commas and must be enclosed in double quotes.

Example of the raw header:

In a Node.js/Express environment, you would implement it like this:

Real-World Scenarios

1. Logout Flows: This is the most common use case. When a user logs out, you can ensure that no lingering localStorage tokens or sessionStorage data remain on a shared computer.
2. Account Switching: If a user switches from one account to another, clearing the cache and storage prevents data leakage or state conflicts between accounts.
3. Security Breaches: If you detect suspicious activity or a compromised session, you can force the browser to clear all identifiers.
4. Clearing Corrupted State: If your application’s local database (IndexedDB) or cache becomes corrupted after a new deployment, you can use this header to force a "clean slate" for the user.

Browser Behavior and Limitations

• HTTPS Only: For security reasons, browsers only honor the Clear-Site-Data header when it is sent over a secure (HTTPS) connection.
• Origin Scoped: The header only clears data for the origin (protocol + domain + port) that sent the header. It cannot clear data for other subdomains or external sites.
• Safari Support: As of 2024, Safari has limited or no support for this header. Chrome, Firefox, and Edge have robust support. For Safari, you must still fall back to manual cleanup via JavaScript (e.g., localStorage.clear()).
• Cookie Exclusions: While it clears cookies, it cannot clear cookies with the HttpOnly flag if they are not from the exact same path/domain context, though generally, it is quite effective at wiping the cookie jar for the specific origin.

Best Practices

• Use Specifics Over Wildcards: Unless you truly need a complete wipe, specify "cookies" or "storage" individually to avoid forcing the user to re-download assets (cache) unnecessarily.
• Combine with Redirection: It is often best to send this header on a terminal request (like the final step of a logout) and then redirect the user to a public landing page.
• Don't Rely Solely on It: Because of varying browser support (especially Safari), continue to use manual cleanup methods in your frontend code for critical data.

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

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

1app.post('/logout', (req, res) => {
2  // Clear the user's session data on the server
3  req.session.destroy();
4
5  // Instruct the browser to wipe local data
6  res.set('Clear-Site-Data', '"cookies", "storage"');
7  res.status(200).send('Logged out and data cleared.');
8});

1app.post('/logout', (req, res) => {
2  // Clear the user's session data on the server
3  req.session.destroy();
4
5  // Instruct the browser to wipe local data
6  res.set('Clear-Site-Data', '"cookies", "storage"');
7  res.status(200).send('Logged out and data cleared.');
8});