大家有時可能會瀏覽一些網站，瀏覽的時候會打開無痕窗口
打開以後就認為無痕了，那麼實際上是這樣嗎
實際情況可能要細思極恐的多
它不僅知道你是誰，還知道你幹了什麼，而且它知道的比你想的多的多
有人就會說了，不就是通過 ip 嗎，我掛個代理不就行了
如果我告訴你不用 IP 也能知道呢
那麼是怎麼做到的呢
這得益於一個叫瀏覽器指紋的技術，這是一個非常非常成熟的技術
可以在沒有 cookie、沒有登錄的情況下，準確的知道用戶是誰
實現原理也非常簡單
全世界有這麼多的設備，但是很難找出兩個一樣的設備環境
比如 ip 地址、瀏覽器版本、瀏覽器的語言、瀏覽器的字體設置、時區等等
基於這些信息，生成一個或者多個哈希值，那麼這個或者多個哈希值大概率是唯一的
不能保證完全不重複，但是唯一性比較高
比如用 canvas 生成一個 hash
簡單寫一下
function getCanvasFingerprint() {
const canvas = document.createElement('canvas')
canvas.width = 200;
canvas.height = 200
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgb(128,0,0)';
ctx.fillRect(10, 10, 100, 100);
ctx.fillStyle = 'rgb(0,128,0)';
ctx.fillRect(50, 50, 100, 100);
ctx.fillStyle = 'rgb(0,128,0)';
ctx.fillRect(30, 30, 80, 80);
ctx.font = '20px Arial';
ctx.fillStyle = 'rgb(0,0,0)';
ctx.fillText('hello', 60, 110);
const dataURL = canvas.toDataURL();
const hash = hashCode(dataURL)
return hash
}
function hashCode(str) {
let hash = 0;
for (let i = 0; i < str.length; i++) {
const char = str.charCodeAt(i);
hash = (hash << 5) - hash + char;
hash |= 0;
}
return hash
}
const canvasFing = getCanvasFingerprint()
console.log(canvasFing)
正常瀏覽生成的值是 291669864
無痕瀏覽下是也是 291669864
怎麼才能不一樣呢
換個瀏覽器或者設備
繪製同樣的一個 canvas 為什麼生成的值不一樣呢
這是因為不同的瀏覽器，同一個瀏覽器的不同版本，不同的操作系統，不同的硬件，他們的繪製引擎或多或少都有差異，儘管繪製的是同一個 canvas，但是繪製出來的都會有一些肉眼難以察覺的差異，生成到數據裡，就會造成數據的差異
這是受很多因素影響的，甚至可能你在瀏覽器上安裝了個插件都會造成影響，包括瀏覽器設置，操作環境設置等
這只是一個 canvas，如果綜合其他生成的 hash 值，僅僅一個代理是沒用的
這個主要用途是廣告（購物廣告等），防刷（刷票，刷播放量等）
但是根本是為了分辨用戶，所以如果你瀏覽的某些網站要分辨你的話，還是很容易的
不過有一個東西叫指紋瀏覽器，可以在一個瀏覽器裡面切換不同的指紋，但是都是收費的
實現方式也非常簡單，針對不同的指紋方式，去更改相應的 API