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.
Object.defineProperty(window, "sessionStorage", {
get() { return 20 }
})
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.
const fakeSessionStorage = {/* TODO: Implement */}
Object.defineProperty(window, "sessionStorage", {
get() {
return fakeSessionStorage
}
}
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:
try {
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.key()
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:
getItem(key) -> get(key)
setItem(key, value) -> set(key, value)
removeItem(key) -> delete(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:
class FakeStorage {
#map = new Map()
getItem(key) { return this.#map.get(key) }
setItem(key, value) { this.#map.set(key, value) }
removeItem(key) { this.#map.delete(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? 😩
Note: I have not thoroughly tested my fake storage object. Don't just copy-paste this into your application without making sure it doesn't have any subtle bugs.
Top comments (2)
Dude, you have my respect and appreciation. I've been thinking of doing something similar for a while, and your post is giving me the motivation to tackle that.
I find it so annoying that nowadays people think they need 15 MB of JS code for a blog article. I too have a bunch of privacy measures in place that break a lot of websites, and it pisses me off to see it happen - not so much because I can't see the site, because most of the time I don't really need it, but because of the sad state I see my profession in. Actual knowledge and proper engineering have been replaced with cool frameworks that are completely unnecessary and in the vast majority of cases cause more problems than they solve. I even wrote about it not too long ago: borfast.com/blog/2023/08/01/please...
Those things happen in sites where no money is involved.
I worked on a site generating obscene amounts of money, and we made sure that some sort of localStorage was available before using it.
If not, we had some fallbacks. Just imagine a concept like: