Canvas-Fingerprinting: Wie Websites Sie ohne Cookies tracken

Canvas-Fingerprinting ist eine der verbreitetsten Tracking-Methoden im Web: Websites zeichnen mithilfe der HTML5-Canvas-API ein unsichtbares Bild in Ihrem Browser und lesen die Pixel aus. Da Grafikkarte, Treiber, Betriebssystem und installierte Schriften die Ausgabe geringfügig verändern, entsteht ein stabiler Identifier — ganz ohne Cookies und ohne jede Gerätespeicherung. Im Sinne der DSGVO handelt es sich dabei um die Verarbeitung personenbezogener Daten, da der erzeugte Hash Ihren Browser eindeutig kennzeichnen kann.

Wie Canvas-Fingerprinting funktioniert

Der Ablauf läuft vollständig im Hintergrund ab — Sie sehen nichts davon:

1. Canvas erstellen: Ein verstecktes <canvas>-Element wird per JavaScript im DOM erzeugt (display: none).
2. Inhalt rendern: Text, Verläufe, Formen und Emoji werden mit einer Kombination verschiedener Schriften gezeichnet. Diese Kombination maximiert die Varianz zwischen verschiedenen Geräten.
3. Pixel auslesen: canvas.toDataURL() oder getImageData()liefern die rohen Pixeldaten als Base64-String oder Uint8ClampedArray.
4. Hash berechnen: Aus den Pixeldaten wird ein kompakter Fingerabdruck errechnet — häufig mit MurmurHash oder einem vergleichbaren Algorithmus.

Codebeispiel

So sieht eine typische Canvas-Fingerprinting-Implementierung aus:

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

// Text mit verschiedenen Schriften und Stilen rendern
ctx.textBaseline = 'top';
ctx.font = '14px Arial';
ctx.fillText('Browser-Fingerprint 🖐️', 2, 2);

ctx.font = '11px Georgia';
ctx.fillStyle = 'rgba(102,204,0,0.7)';
ctx.fillText('whatsmy.fyi', 4, 18);

// Pixel als Hash-Grundlage auslesen
const fingerprint = canvas.toDataURL();

Warum unterscheidet sich die Ausgabe zwischen Geräten?

Die Canvas-Spezifikation legt nicht fest, wie ein Browser Text und Formen pixelgenau rendern soll. Deshalb entstehen zwischen verschiedenen Systemen subtile Unterschiede:

• Grafiktreiber: GPU-Treiber wenden unterschiedliche Antialiasing-Algorithmen an.
• Betriebssystem: macOS, Windows und Linux nutzen verschiedene Font-Rendering-Engines (Core Text, DirectWrite, FreeType).
• Schriften: Welche Systemschriften installiert sind, beeinflusst das Text-Layout.
• Bildschirm-DPI: Retina-Displays und HiDPI-Monitore verändern die Pixeldichte.

Wie effektiv ist Canvas-Fingerprinting?

Canvas-Fingerprinting und die DSGVO

Nach Art. 4 Nr. 1 DSGVO gilt jede Information als personenbezogenes Datum, die eine natürliche Person identifizieren kann. Ein Canvas-Hash, der Ihren Browser dauerhaft wiedererkennt, fällt unter diese Definition — auch ohne Name oder E-Mail-Adresse. Websites, die Canvas- Fingerprinting zu Tracking-Zwecken einsetzen, benötigen daher in der Regel eine ausdrückliche Einwilligung nach Art. 6 Abs. 1 lit. a DSGVO.

So schützen Sie sich

• Brave Browser: Aktiviert standardmäßig „Farbling" — fügt der Canvas-Ausgabe zufälligen, sitzungsgebundenen Rauschen hinzu, sodass jede Website einen anderen Hash erhält.
• Firefox mit privacy.resistFingerprinting: Liefert für alle Canvas-Zugriffe eine leere, weiße Bitmap und blockiert damit Canvas-Fingerprinting vollständig. In about:config aktivierbar.
• Tor Browser: Blockiert Canvas-Zugriffe standardmäßig und zeigt eine Berechtigungsanfrage, bevor Pixeldaten ausgegeben werden.
• uBlock Origin + Canvas-Blocker: Browser-Erweiterungen könnentoDataURL() und getImageData() überschreiben oder deaktivieren.

Canvas-Fingerprinting auf whatsmy.fyi

Unser Browser-Fingerprint-Tool berechnet Ihren Canvas-Hash live im Browser und zeigt Ihnen, wie eindeutig Ihr digitaler Abdruck ist — ohne Daten zu speichern oder zu übertragen. Sehen Sie sich auch unsere Übersicht zum Browser-Fingerprinting an, um alle Tracking-Signale auf einen Blick zu verstehen.