Bypassing Letterboxing

General
1

Is it theoretically possible to use the Fullscreen API to circumvent the letterboxing implemented in Tor and Mullvad browsers to determine actual screen dimensions?

2

I don’t know. I’d like to learn this, too.

I think that if you watch a video in fullscreen, the website would not get your actual screen dimensions, since the video would be shown in fullscreen locally. But I think that if you browse any website in fullscreen, the website would get your actual screen dimensions.

3

If a website is in fullscreen, it can detect the actual screensizes (tested on Mullvad Browser, probably the same for Tor). However, a website cannot automatically force a fullscreen, as non-user-initiated fullscreen requests are blocked.

Test yourself

You can test it yourself, by using this HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>screen dimensions</title>
</head>
<body>

    <h2>display / viewport dimensions</h2>
    <button onclick="toggleFullscreen()">Toggle Fullscreen</button>
    <pre id="output"></pre>

    <div id="probe"></div>

    <script>
        function getMetrics() {
            const probe = document.getElementById('probe');
            const probeRect = probe.getBoundingClientRect();
            const dpr = window.devicePixelRatio || 1;

            return {
                "screen.width": window.screen.width,
                "screen.height": window.screen.height,
                "screen.availWidth": window.screen.availWidth,
                "screen.availHeight": window.screen.availHeight,

                "physicalWidthEstimate": Math.round(window.screen.width * dpr),
                "physicalHeightEstimate": Math.round(window.screen.height * dpr),

                "window.outerWidth": window.outerWidth,
                "window.outerHeight": window.outerHeight,

                "window.innerWidth": window.innerWidth,
                "window.innerHeight": window.innerHeight,

                "cssViewportWidth": probeRect.width,
                "cssViewportHeight": probeRect.height,

                "devicePixelRatio": dpr,
                "colorDepth": window.screen.colorDepth,
                "orientationType": window.screen.orientation ? window.screen.orientation.type : "n/a"
            };
        }

        function updateDisplay() {
            document.getElementById('output').textContent = JSON.stringify(getMetrics(), null, 2);
        }

        function toggleFullscreen() {
            if (!document.fullscreenElement) {
                document.documentElement.requestFullscreen().catch(err => {
                    console.error(`err ${err.message}`);
                });
            } else {
                document.exitFullscreen();
            }
        }

        window.addEventListener('resize', updateDisplay);
        if (window.screen.orientation) {
            window.screen.orientation.addEventListener('change', updateDisplay);
        }

        updateDisplay();
    </script>
</body>
</html>
1 Like