Explain Codes LogoExplain Codes Logo

Clearing all cookies with JavaScript

javascript
cookie-engineering
javascript-techniques
browser-compatibility
Anton ShumikhinbyAnton Shumikhin·Oct 5, 2024
TLDR

Instantly wipe out all accessible JavaScript cookies:

document.cookie.split(';').forEach(c => document.cookie = c.split('=')[0]+'=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/');

This single line of code loops through every visible cookie, setting it to expire immediately which results in its deletion. It's worth noting this does not apply to HttpOnly cookies.

To delve deeper into cookies, we should comprehend their properties such as domain, path, secure, and others. Notably, setting path to "/" ensures the cookie gets deleted for the entire domain, not just from your current path.

Dealing with same-site cookies

The SameSite attribute could affect how cookies correspond across different sites. It's a key detail we should account for when updating our cookie clearing strategy.

It's crucial not to overlook cross-browser compatibility as different browsers may have unique ways of handling cookies. Always test your JavaScript cookie-deletion strategies on different browsers such as Chrome, Firefox, or Safari.

Tackling HttpOnly and Path attributes

You cannot access cookies with the HttpOnly flag via JavaScript. When certain cookies aren't being cleared as expected, this may be due to server-side settings enforcing this behavior. Also, cookies confined to specific Path values may require a more specific way of being cleared.

A bookmarklet for comfort

The following bookmarklet is a practical tool for developers who frequently clear cookies:

javascript:(function(){document.cookie.split(";").forEach(function(c) {document.cookie = c.replace(/^ +/, "").split("=")[0]+"=;expires=Thu, 01 Jan 1970 00:00:01 GMT;path=/";});})();

Drag this snippet to the bookmarks bar for a single-click cookie clearing method.

One-liner to the rescue

If you are like me and love brevity, here's a compact, neat, and equally effective cookie-deletion one-liner:

document.cookie.split(';').forEach(c => document.cookie = c.replace(/^ +/,'').split('=')[0]+'=;Max-Age=-99999999;');

This version leverages the Max-Age attribute to self-destruct the cookie, no countdown needed.

Alternative methods and safeguarding against quirks

Other ways to eat, err... delete cookies?

You can also consider other methods such as using:

  • Browser extensions: Tools built into dev tools can help with managing cookies.
  • Server-side solutions: Sometimes, you may have to go server-side to clear HttpOnly cookies.
  • Modern libraries: Libraries like js-cookie can simplify the entire process.

Remember, there's more than one way to gobble a cookie.

Common pitfalls and how to dodge them

Beware of the cross-domain shenanigans

Deleting cross-domain cookies can be tricky because they might be protected by the Same Origin Policy which restricts your JavaScript code's ability to access or delete these cookies.

Often, clearing a large number of cookies might result in noticeable system load, akin to a bulky checkout at a Black Friday Sale, leading to browser lag or even freezing. Optimized loops and minimal DOM interactions can help you dodge this bullet.

Privacy concerns when clearing cookies

Removing cookies is often tied to privacy matters and security issues. Always bear in mind the potential ramifications, such as the risk of affecting active user sessions or forgetting user preferences.