Create your OWN intrusive javascript blocker script 🛑
Tags: webdev, javascript, privacy, tutorial
Published: 2023-12-26 10:48:58



![The comment that inspired me ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wg0gjqdy0q6corc2pg76.png)


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

```typescript
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

![Without a Proxy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q6a1tz6erar81p02f1oj.png)





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


![With a proxy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vp9q2px2vkh4x4qeyx49.png)


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

```typescript
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);

```


![Result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sq1q78lnf2quza1rczu9.png)



_Btw you can override more than just the `get` method but also `set`, `has`, etc. [More Info Here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)_

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

```typescript
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 

```typescript
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 


![Left (without) , Right (with) ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kk1kmc1cmchfih6r8obo.png)


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](https://gist.github.com/achrafl0/079ed803d83c6c1736481ce5364073fb)

> 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 !

{% cta https://notachraf.substack.com %} Subscribe to my Newsletter ( for free ! ) {% endcta %} 



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 ](https://notachraf.substack.com)

{% embed https://notachraf.substack.com/embed %}