How to customize screen resolution reported to a JavaScript application by a web browser?

3

4

window.screen.availHeight and window.screen.availWidth values let web applications to know my actual screen resolution while I don't always want them to know it. Can I set my own values for these properties? I am interested in solutions for both Firefox and Chrome.

Ivan

Posted 2014-02-04T21:51:32.623

Reputation: 6 173

Answers

2

Interesting question. It is possible in theory to overwrite the window.screen.availHeight and window.screen.availWidth properties using the Object.defineProperty function.

Try the following file:

test.html:

<html>
  <head>
    <script>
      window.alert("Window resolution before overwrite is " + window.screen.availWidth + " x " + window.screen.availHeight);
      Object.defineProperty(window.screen, "availWidth", { get: function(){return 0; }});
      Object.defineProperty(window.screen, "availHeight", { get: function(){return 0; }});
    </script>
  </head>
  <body>
    <script>
      window.alert("Window resolution after overwrite is " + window.screen.availWidth + " x " + window.screen.availHeight);
    </script>
  </body>
</html>

However, to answer your question of a generic way to make this happen on all sites, I can only provide a partial answer.

Using UserScripts (through Greasemonkey) on Firefox the following script has the desired effect (to use, install the Greasemonkey add-in then restart Firefox and drag the script onto the Firefox window).

Hide_screen_resolution.user.js:

// ==UserScript==
// @name          Hide screen resolution
// @description   This script hides access to the screen resolution through window.screen.availHeight and window.screen.availWidth values.
// @include       *
// @run-at document-start
// ==/UserScript==

Object.defineProperty(window.screen, "availWidth", { get: function(){return 0; }});
Object.defineProperty(window.screen, "availHeight", { get: function(){return 0; }});

Now if test.html is opened again it can be seen that the screen resolution before the overwrite is already reset providing the desired results.

Unfortunately Chrome does not support running code such as this before the document is loaded so this UserScript does not work there. I have posted this answer in the hope that someone can hint at a possible solution in Chrome.

zelanix

Posted 2014-02-04T21:51:32.623

Reputation: 1 134