Detecting private mode in 2020

This is the update of my 2018 blog post on why firefox returns an all white canvas in private windows.

Recently I noticed that the technique I used on my blog to detect private windows has failed and lead weird artefacts looking a like these:

Over the last couple releases that simple white surface was replaced with a random sequence of eight colours that repeat all over the canvas.

So, I developed a new detection that is drawing one solid black pixel on a transparent off-screen canvas and then checking if that worked. This works on both versions of Firefox's algorithm weather it reports an all white canvas or the random stripes.

You can use this code under the MIT license, please include a link to this article:

/// LICENSE: MIT by Stefan Schindler - 2020
/// Source: https://estada.ch/2020/7/11/detecting-private-mode-in-2020/
const width = 16, height = 16;

const canvas = document.createElement('canvas');

canvas.width = width;
canvas.height = height;

const ctx = canvas.getContext('2d', { alpha: true });
if (!ctx) {
    console.log('canvas not supported');
    return;
}

// Set transparency value
ctx.globalAlpha = 1.0;
ctx.clearRect(0,0, width, height);

ctx.fillStyle = '#000';
ctx.fillRect(0, 0, 1, 1);

const pixel_0_0 = ctx.getImageData(0, 0, 1, 1).data;
if (pixel_0_0[0] === 0 &&
    pixel_0_0[1] === 0 &&
    pixel_0_0[2] === 0 &&
    pixel_0_0[3] === 255
) {
    // We are in a **normal** window
} else {
    // We are in a **private** window
}

OffscreenCanvas the experimental

There is a new feature in the works that may change the way one has to work with an off-screen canvas. Follow the bug 1390089 and test this experimental feature by setting gfx.offscreencanvas.enabled to true in about:config.

links

social