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
Top comments (0)