大家有时可能会浏览一些网站，浏览的时候会打开无痕窗口
打开以后就认为无痕了，那么实际上是这样吗
实际情况可能要细思极恐的多
它不仅知道你是谁，还知道你干了什么，而且它知道的比你想的多的多
有人就会说了，不就是通过 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