The Problem
So I have cookies disabled by default in my browser. The reason should be obvious: some sites just have no business saving data on my PC. Yes yes, cookies are cool for safety and performance stuff, but site owners couldn’t handle their toy responsibly, so I’m taking it away.
Now, the problem is that the modern web isn’t built for privacy-valuing users. Sites often use frameworks intended for highly interactive applications, even when all they do is display static content.
So I often end up seeing pages like this
This is nextjs.org, by the way. Looking into the console, here’s what happens:
Cool. This site doesn’t really “do” anything, I just want to read some text and ideally have some images in between. You know, a classic static website. And yet, it wants storage.
The Solution
Okay, challenge accepted.
console.log(sessionStorage) // 20
Cool, looks like chromium lets me overwrite this property. And considering there’s a flicker before the error appears, I bet I can inject a fix using an extension before the application even has a chance to fail.
get() {
return {}
}
}
Wait, but this is going to reset sessionStorage on every website, even if I enable cookies manually. Ooooops
Guess I’ll have to wrap the whole snippet in some more code:
window.sessionStorage
} catch {
// inject custom sessionStorage
}
Looks good. What does the website do now?
Perfect! Looks like I’m making progress. Now I face a different problem: I actually need to fake the sessionStorage object somehow.
What… what does that even do? MDN to the rescue!
It looks like the list of methods I’d have to fake is somewhat reasonable.
Storage.getItem()
Storage.setItem()
Storage.removeItem()
Storage.clear()
Honestly, this looks like a Map. The functions are just named differently, but that’s about it. I just have to map (no pun intended) the methods to each other like this:
setItem(key, value) -> set(key, value)
removeItem(key) -> deelete(key)
clear() -> clear()
Then just re-implement the key method using Map’s keys method. Sounds easy 🙂
The Result
And after a bit of tinkering, here’s the entirety of my resulting code:
#map = new Map()
getItem(key) { return this.#map.get(key) }
setItem(key, value) { this.#map.set(key, value) }
removeItem(key) { this.#map.deelete(key) }
clear() { this.#map.clear() }
key(n) { return this.#map.keys()[n] || null }
}
const fakeLocalStorage = new FakeStorage()
try {
window.sessionStorage
} catch {
Object.defineProperty(window, “sessionStorage“, {
get() {
return fakeLocalStorage
}
})
}
I inject this into the page using the “User JavaScript and CSS” chrome extension, but I’m sure most other extensions will work too.
And voilà:
A working next.js website without any pesky cookies. Would it have been so hard to build this fallback into their page in the first place? 😩
