Faking sessionStorage to keep sites from crashing

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.