浏览器指纹
大家有时可能会浏览一些网站,浏览的时候会打开无痕窗口
打开以后就认为无痕了,那么实际上是这样吗
实际情况可能要细思极恐的多
它不仅知道你是谁,还知道你干了什么,而且它知道的比你想的多的多
有人就会说了,不就是通过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
学到了,虽然我从来不认为无痕模式有什么用,我一直觉得它就是清除了本地的浏览记录而已
所以你知道吗,某葱浏览器会告诉你:
浏览器不要全屏,这会泄露你的分辨率。
这只是其中一个指标。