Die Canvas-API ist für das Zeichnen von Grafiken in einem Webbrowser konzipiert. Es kann für Animationen, Spielgrafiken, Datenvisualisierung, Bildbearbeitung, Echtzeit-Videoverarbeitung usw. verwendet werden. Es kann auch für die Online-Verfolgung durch Browser-Fingerprinting verwendet werden. Die Technologie basiert auf Änderungen in der Art und Weise, wie ein Leinwandbild in verschiedenen Webbrowsern und Plattformen gerendert wird, um einen personalisierten digitalen Fingerabdruck des Browsers eines Benutzers zu erstellen. Es ist jedoch möglich, den Vorgang unter derselben Geräteumgebung zu wiederholen.

Erkennung der Canvas-Funktion

• Canvas 2D API
• Text API for Canvas
• Canvas toDataURL(wird häufig zur Fingerabdruckerkennung verwendet)
• OffscreenCanvas API
• Canvas native

  Die Canvas toDataURL-Funktion kann auch durch Browser-Plug-Ins geändert werden, ist aber leicht zu erkennen

• Stabilität

  Canvas ist auf demselben Gerät und derselben Browserumgebung stabil

• nichtmenschlicher Lärm

  Einige Fingerabdruck-Browser oder Fingerabdruck-Plug-Ins können dem Canvas-Rauschen Parameter hinzufügen, diese werden jedoch möglicherweise trotzdem erkannt.

Bilddetails

Ursachen für Fingerabdrücke auf Leinwand

Die Art und Weise, wie ein Canvas-Bild auf der Leinwand gerendert wird, kann je nach Webbrowser, Betriebssystem, Grafikkarte und anderen Faktoren variieren, sodass ein einzigartiges Bild entsteht, das zur Erstellung eines Fingerabdrucks verwendet werden kann.

1. Anti-Aliasing

Die Anti-Aliasing-Technologie ist eine Art Schönheitsfilter und wird häufig verwendet. Wenn die Schriftartenglättung im Betriebssystem nicht aktiviert ist, sehen einige Schriftarten auf Ihrem Computermonitor schrecklich aus. Im Allgemeinen aktivieren Windows-Betriebssysteme standardmäßig die Glättung von Schriftarten und Bildern. Unter Mac OS X scheint Anti-Aliasing nur für Schriftarten unter einer bestimmten Größe zu funktionieren. Nicht nur auf Betriebssystemebene verfügen einige Browser auch über eine eigene integrierte Anti-Aliasing-Technologie. Beispielsweise verwendet Safari eine eigene integrierte Schriftart-Rendering-Engine. Und das Beste: Die Anti-Aliasing-Technologie funktioniert auch beim Zeichnen von Schriftarten und Bildern auf Canvas.

Wie in der folgenden Abbildung dargestellt, zeigt die linke Seite den Zustand, in dem die Schriftglättung nicht aktiviert ist, während die rechte Seite zeigt, dass sie aktiviert ist:

Die Anti-Aliasing-Technologie erzeugt einige nicht reine Farbpixel, und die Pixelwerte in diesen Zwischenzuständen werden durch das Farbprofil der Grafikkarte beeinflusst, was zu unterschiedlichen Farben führt. Wir nennen dies Rauschen. Durch Zeichnen derselben Schriftarten und Bilder auf einer ausreichend großen Leinwand und anschließendes Berechnen aller Pixeldaten können relativ eindeutige Fingerabdruckdaten erhalten werden.

2. Schriftartenhinweise

Eine Funktion der Feinabstimmung ist die Rasteranpassung, bei der die Höhe und Breite der Schriftzeichen geändert werden, um sie an dem auf dem Bildschirm angezeigten eingestellten Pixelraster auszurichten. Das Bild wird auf dem Bildschirm als Raster aus kleinen Quadraten angezeigt. Die Schriftarten können nach links und rechts verschoben werden, um sicherzustellen, dass sie im Raster korrekt angezeigt werden. Dadurch wird auch sichergestellt, dass die Schriftart und das Layout auf verschiedenen Seiten ungefähr gleich aussehen Bildschirme.

Anhand des folgenden GIF-Bildes, einer Sammlung von Leinwandbildern von Dutzenden verschiedener Benutzer, können wir intuitiv die Unterschiede in der Darstellung desselben Codes in verschiedenen Geräteumgebungen erkennen:

Wie in den obigen Bilddetails gezeigt, können wir im Allgemeinen die Funktion toDataURL aufrufen, um die Base64-Daten des Canvas-Bilds abzurufen, oder wir können die CRC-Prüfsumme des IDAT-Blocks aus dem Datenblock des von Canvas generierten PNG-Bilds abrufen. Anschließend können wir den Hash dieser Zeichenfolge (Base64- oder CRC-Prüfsumme) (der genaue Algorithmus variiert von Site zu Site) als Canvas-Fingerabdruck berechnen.

Hinweis: Es gibt viele Gründe, warum Canvas-Fingerabdrücke von Website zu Website unterschiedlich sind. Unterschiedliche verwendete Zeichenfolgen (Base64 oder CRC-Prüfsumme) und unterschiedliche Hashing-Algorithmen (MD5, SHA, MUMUHASH usw.) machen den Canvas-Fingerabdruck völlig unterschiedlich, aber real Der Canvas-Fingerabdruck ist stabil, sodass der Canvas-Fingerabdruck unter derselben Website unter demselben Browser und derselben Geräteumgebung behoben ist. Dies ist auch die theoretische Grundlage für den Einsatz des Canvas-Fingerabdrucks zur benutzergestützten Identifizierung, der über stabile Eigenschaften verfügt.