Webcam in a Favicon
twitter.com
twitter.com
navigator.getUserMedia = navigator.getUserMedia ||
navigator.mozGetUserMedia;
window.onload = () => {
// Create favicon link element
const favicon = document.createElement('link');
favicon.rel = 'shortcut icon';
favicon.type = 'image/png';
favicon.href = '../../images/favicon.ico';
document.getElementsByTagName('head') . [0].appendChild(favicon);
// Create hidden canvas
const w = 32;
const h = 32;
const canvas = document.createElement('canvas');
canvas.style = 'display: none';
canvas.width = w;
canvas.height = h;
document.body.appendChild(canvas);
// Grab canvas context
const ctx = canvas.getContext('2d');
// Create hidden video element
const video = document.createElement('video');
video.style = 'display: none';
video.width = canvas.width;
video.height = canvas.height;
document.body.appendChild(video);
// Assign user media to video and start loop
navigator.getUserMedia({video: true}, stream => {
video.srcObject = stream;
video.play();
loop();
}, () => {});
// Loop forever
const loop = () => {
// Copy video to canvas
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
// Set canvas to favicon
favicon.setAttribute('href', canvas.toDataURL());
// Loop
setTimeout(loop, 100);
};
};
Basically the favicon connection to the server stays open sending a periodic junk-update so that the server can detect when the tab is closed. You can do it with any asset but the favicon hides the loading indicator.
Is there an equivalent with any other type of resource, that avoids deferring onLoad?
If JS is disabled the event doesn't really matter and any asset can be handled this way. I just use the favicon because it stops the browser from showing a loading spinner so everything looks still and nobody assumes there's anything going on in the background.
You can use persistent connections like this in other strange ways too. For instance this is a no-JS chat that's even able to update the connection count by sending a bit of CSS lazily: https://harmless.herokuapp.com/main
If they look at the network tab in their browser they can see it, but it just looks like a favicon asset that's really slow to load. And people usually assume that with JS disabled these things don't happen.
That's also the purpose of using it in the favicon. It prevents the loading spinner so you'd have to inspect the connections.
And fighting privacy violation is basically a game of cat and mouse. As soon as we figure out how to block their tactics, they evolve. If what I'm doing here became mainstream they would probably do something about it, but as it stands this is much easier to do using JS or something anyway (which people know violates their privacy but they leave it enabled because modern websites break down without it).
I did not know of this specific use before, but now I do.
https://mobile.twitter.com/jake_albaugh/status/1118611365508...
In the initial setup:
ctx.scale( -1, 1 );
ctx.drawImage( video, 0, 0, canvas.width * -1, canvas.height );
It basically keeps sending iframe's with data URL's for download, see code: https://github.com/wybiral/crash
On Chrome it blocks request popups after the first but FF usually crashes (even Tor Browser).
The interesting thing about this is that you can keep the connection open as long as you want and then send the iframes on command.
What do you mean?
So combined with other tracking techniques (to tell if a tab is still open) you can crash their browser and see which other tabs close.