Create your OWN intrusive javascript blocker script 🛑

Recently, one of the comments on my previous article about sharing a state between windows asked me how can one go about not sharing informations about the screen to websites.

Well you can disable javascript, but nobody want that...

Another way is to make them not able to access it , but how ?

Well the solution is to use a concept I wanted to talk about : Proxies !
Stick around to find out how we're gonna do this using JS and a user script injector ( like TamperMonkey for Chrome )

Disclaimer
This is in no way a reliable way to assert that no website will be able to access screen information.
Using this on a website may break the website if the property hidden are crucial to the normal behavior of the website
This is educational content only.

Proxies

Proxies are basically a way to intercept write/read instruction to a Javascript Object.

Imagine a Person object, that has a name

type Person {
    name: string
}

const person: Person = {
    name: "Achraf",
}

Without a proxy, trying to get the name will of course just give back the name

But using a proxy will help us intercept this get instruction, and modify it however we want

Okay that sounds exactly like something we'd want !

Simple example

We'll try to make a simple anonymizer for an object that has a name

const authorAnonym = new Proxy(author, {
    get(originalObject, propertyName){
        if (propertyName === "name"){
            return "*******"
        }
        return originalObject[propertyName]
    }
})

console.log("Original Name", author.name);
console.log("Proxied Name", authorAnonym.name);

Btw you can override more than just the get method but also set, has, etc. More Info Here

Okay that's good, but for our original purpose ( hide window properties) this wont work, as even if we create a anonimizedWindow the website will just use the original window

And....you're right. We can't use a proxy to replace the window as the window object is not replaceable , but that's okay, we'll replace other information, like the screen

Let's start writing our Script

We can start easy by overriding some information like the position of the tab on the monitor

window.screenX = 0
window.screenY = 0 
window.devicePixelRatio = 0

Now let's make default screen properties we want to override, like for example availWidth and availHeight which are the enough to give away our monitor size

const overridenProperties: Partial<Screen> = {
    availHeight: 0,
    availWidth: 0,
    pixelDepth: 10,
}

const screenProxy = new Proxy(window.screen, {
    get(screen, propertyName){
        return overridenProperties[propertyName] ?? screen[propertyName]
    }
})

window.screen = screenProxy 

and with that, we are basically done, let's test it on a small test website that displays information in a div

Here on the left is the website without the tamperMonkey script running and on the right with the script running !

The whole sourcecode can be found here

This was tested on Chrome only, maybe it doesn't work on mozilla, if you have, please share it in the comments !

Conclusion

Proxies are a great way to intercept read/write operation on an object, they are used for multiple reasons ( mocking dependencies, singleton pattern, caching, etc. )
If you have ideas on how to use them or personal anecdotes involving proxies, feel free to share them !

Subscribe to my Newsletter ( for free ! )

Hope you had fun reading this article , if you liked it , you can share it to your friends, you can also subscribe to my new newsletter ( first exclusive post dropping 2nd of January, don't miss it ! )
It's right here

The Degenerate Engineer | Achraf | Substack

making dumb stuff, writing about it, sometimes about tech, sometimes not. Click to read The Degenerate Engineer, by Achraf, a Substack publication. Launched 3 days ago.

notachraf.substack.com