L'API Canvas è progettata per disegnare grafica in un browser Web. Può essere utilizzato per animazioni, grafica di giochi, visualizzazione di dati, editing di immagini, elaborazione video in tempo reale, ecc. Può anche essere utilizzato per il monitoraggio online tramite l'impronta digitale del browser. La tecnologia si basa sui cambiamenti nel modo in cui un'immagine su tela viene visualizzata su diversi browser e piattaforme Web per creare un'impronta digitale personalizzata del browser di un utente. Ma è possibile ripeterlo con la stessa attrezzatura.

Rilevamento della funzione Canvas

• Canvas 2D API
• Text API for Canvas
• Canvas toDataURL(comunemente utilizzato per il riconoscimento delle impronte digitali)
• OffscreenCanvas API
• Canvas native

  La funzione Canvas toDataURL può essere modificata anche dai plug-in del browser, ma è facilmente identificabile

• stabilità

  Canvas è stabile sullo stesso dispositivo e ambiente browser

• rumore non umano

  Alcuni browser o plug-in per impronte digitali possono aggiungere parametri al rumore del canvas, ma potrebbero comunque essere riconosciuti.

Dettagli dell'immagine

Cause delle impronte digitali su tela

Il modo in cui un'immagine Canvas viene rappresentata sulla tela può variare a seconda del browser Web, del sistema operativo, della scheda grafica e di altri fattori, risultando in un'immagine unica che può essere utilizzata per creare un'impronta digitale.

1. Anti-alias

La tecnologia anti-aliasing è una sorta di filtro di bellezza ed è ampiamente utilizzata. Se la smussatura dei caratteri non è abilitata nel sistema operativo, alcuni caratteri appariranno terribili sul monitor del tuo computer. In generale, i sistemi operativi Windows attivano l'ottimizzazione dei caratteri e delle immagini per impostazione predefinita. In Mac OS X, l'antialiasing sembra funzionare solo per i caratteri al di sotto di una certa dimensione. Non solo a livello di sistema operativo, alcuni browser dispongono anche di una propria tecnologia anti-aliasing integrata. Ad esempio, Safari utilizza il proprio motore di rendering dei caratteri integrato. E soprattutto, la tecnologia anti-aliasing funziona anche quando si disegnano caratteri e immagini su Canvas.

Come mostrato nella figura seguente, il lato sinistro mostra lo stato in cui lo smussamento dei caratteri non è abilitato, mentre il lato destro mostra che è abilitato:

La tecnologia anti-aliasing genererà alcuni pixel di colore non puro e i valori dei pixel in questi stati intermedi sono influenzati dal profilo colore della scheda grafica, risultando in colori diversi. Disegnando gli stessi caratteri e immagini su una tela sufficientemente grande e quindi calcolando tutti i dati dei pixel, è possibile ottenere dati relativi alle impronte digitali relativamente unici.

2. Suggerimenti sui caratteri

Una funzionalità di regolazione fine è l'adattamento della griglia, che significa modificare l'altezza e la larghezza dei caratteri del carattere per allinearli con la griglia di pixel impostata visualizzata sullo schermo. L'immagine viene visualizzata sullo schermo come una griglia di piccoli quadrati. I caratteri possono essere spostati a sinistra e a destra per garantire che vengano visualizzati correttamente sulla griglia. Questo anche per garantire che la forma e il layout del carattere siano più o meno gli stessi su caratteri diversi schermi.

Attraverso la seguente immagine GIF, che è una raccolta di immagini su tela di decine di utenti diversi, possiamo vedere in modo intuitivo le differenze nella presentazione dello stesso codice in diversi ambienti di dispositivi:

Come mostrato nei dettagli dell'immagine sopra, in generale, possiamo chiamare la funzione toDataURL per ottenere i dati base64 dell'immagine Canvas, oppure possiamo ottenere il checksum CRC del blocco IDAT dal blocco dati dell'immagine PNG generata da Canvas. Possiamo quindi calcolare l'hash di quella stringa (checksum base64 o CRC) (l'algoritmo esatto varia da sito a sito) come impronta digitale di Canvas.

Nota: ci sono molte ragioni per cui le impronte digitali Canvas variano da sito Web a sito Web. Diverse stringhe utilizzate (checksum base64 o CRC), diversi algoritmi di hashing (MD5, SHA, MUMUHASH, ecc.) renderanno l'impronta digitale Canvas completamente diversa, ma reale L'impronta digitale Canvas è stabile, quindi con lo stesso browser e ambiente del dispositivo, l'impronta digitale Canvas nello stesso sito Web è fissa. Questa è anche la base teorica per l'utilizzo dell'impronta digitale Canvas per l'identificazione assistita dall'utente, che ha proprietà stabili.