TL;DR
Here’s the one-liner:
javascript:!(function(){try{const o=window.location.hostname;const t=document.cookie.split(";");const c=(new Date).toUTCString();t.forEach(e=>{const t=e.match(/^(.*?)=/)[1];if(t.startsWith("__Host-")){document.cookie=`${t}$=;expires=${c};path=/;secure`}else{document.cookie=`${t}=;expires=${c};path=/`;document.cookie=`${t}=;expires=${c};path=/;domain=${o}`}})}catch(e){alert(`Error clearing cookies: ${e.message}`)}})();
How do I use this?
- Create a new bookmark:
- In Firefox: In the top menu, navigate to
Bookmarks > Manage Bookmarks
, click the gear icon, and add a bookmark. - In Chrome: Navigate to
chrome://bookmarks/
, then click the⁝
icon andAdd new bookmark
.
- In Firefox: In the top menu, navigate to
- Name it whatever you want (I use “Clear cookies”) and set the URL to the snippet above.
- On a page with cookies you want to clear, click the bookmark you created, and it will execute the JS that invalidates all the cookies.
Walk me through what this JS does before I run some stranger’s code in my browser
Lol sure, here’s the code beautified and commented out. Some things to note:
- You can’t actually delete cookies, you have to just set their expiration date to Before Now, so the browser considers them invalid.
__Host-
prefixed cookies need thesecure
flag in order to be updated.__Secure-
prefixed cookies cannot be set via JavaScript.- This code doesn’t address cookies set on a subdomain. You could add some logic to break out a subdomain but it starts to get pretty RegEx-y and I figured we could keep this far simpler and cover most use-cases.
// Create an IIFE¹.
(function () {
try {
// Get the domain name in order to remove domain-specific cookies
const domain = window.location.hostname;
// Get all the cookies set on the document and break 'em up'
const cookiesList = document.cookie.split(';');
// Create a new date from right this instant, we'll use this to invalidate all existing cookies.
const dateToInvalidateBy = new Date().toUTCString();
cookiesList.forEach((cookie) => {
// Cookies are set like `cookieName=cookieValue;`, this grabs ONLY the name segment.
const cookieName = cookie.match(/^(.*?)=/)[1];
// I found I needed to select cookies that started with __Host
// and pass them the `secure` flag in order to properly invalidate them.
if (cookieName.startsWith('__Host-')) {
// For all cookies, we just tell the document cookie manager that the cookie's value has changed
// Basically: cookie name has an empty value, expires right now, and has some metadata (path, security, domain, etc)
document.cookie = `${cookieName}$=;expires=${dateToInvalidateBy};path=/;secure`;
} else {
document.cookie = `${cookieName}=;expires=${dateToInvalidateBy};path=/`;
document.cookie = `${cookieName}=;expires=${dateToInvalidateBy};path=/;domain=${domain}`;
}
});
alert('Cookies cleared. Feel free to reload.');
} catch (err) {
alert(`Error clearing cookies: ${err.message}`);
}
})();
Footnotes
¹ — IIFE: Immediately Invoked Function Expression. More on IIFEs here.