js获取浏览器指纹

Canvas指纹法

来源：https://www.cnblogs.com/leijing0607/p/8044218.html

从根本上来说，每一种浏览器都会使用不同的图像处理引擎，不同的导出选项，不同的压缩等级，所以每一台电脑绘制出的图形都会有些许不同，这些图案可以被用来给用户设备分配特定编号（指纹），也就是说可以用来识别不同用户。

function bin2hex(s) {var i, l, o = '',n;s += '';for (i = 0, l = s.length; i < l; i++) {n = s.charCodeAt(i).toString(16);o += n.length < 2 ? '0' + n : n;}return o;
}function getUUID(domain) {var canvas = document.createElement('canvas');var ctx = canvas.getContext("2d");var txt = domain;ctx.textBaseline = "top";ctx.font = "14px 'Arial'";ctx.textBaseline = "tencent";ctx.fillStyle = "#f60";ctx.fillRect(125,1,62,20);ctx.fillStyle = "#069";ctx.fillText(txt, 2, 15);ctx.fillStyle = "rgba(102, 204, 0, 0.7)";ctx.fillText(txt, 4, 17);var b64 = canvas.toDataURL().replace("data:image/png;base64,","");var bin = atob(b64);var crc = bin2hex(bin.slice(-16,-12));return crc;
}console.log(getUUID("https://www.baidu.com/"));

测试结果表明，同一浏览器访问该域时生成的CRC校验码总是不变。可以简单理解为同样的HTML Canvas元素绘制操作，在不同的操作系统不同的浏览器上，产生的图片内容其实是不完全相同的。出现这种情况可能是有几个原因：

• 在图片格式上，不同web浏览器使用了不同的图形处理引擎、不同的图片导出选项、不同的默认压缩级别等。
• 在像素级别来看，操作系统各自使用了不同的设置和算法来进行抗锯齿和子像素渲染操作。
• 即使是相同的绘图操作，最终产生的图片数据在hash层面上依然是不同的。

笔者测试数据如下：

• PC：Chrome浏览器、Edge浏览器、遨游浏览器； Chrome浏览器和遨游浏览器结果一样
• 安卓移动端：Chrome浏览器
• iOS端：Safari浏览器、微信； Safari浏览器和微信结果一样

笔者测试结论：还是会出现结果一样的情况，而且最终生成的uuid位数较短也增加了出现相同的几率。该方法不可取！！！

成熟框架 fingerprintjs

fingerprintjs，笔者是在这个网站知晓的：https://q.shanyue.tech/fe/js/28，里面有很大大厂前端面试的问题，可以深入学习用。

官方给的示例：

<script>// Initialize the agent at application startup.// If you're using an ad blocker or Brave/Firefox, this import will not work.// Please use the NPM package instead: https://t.ly/ORyXkconst fpPromise = import('https://openfpcdn.io/fingerprintjs/v4').then(FingerprintJS => FingerprintJS.load())// Get the visitor identifier when you need it.fpPromise.then(fp => fp.get()).then(result => {// This is the visitor identifier:const visitorId = result.visitorIdconsole.log(visitorId)})
</script>

虽然注释写的是在Firefox中有可能不工作，但是笔者测试PC上Firefox正常工作。

在其API文档中有提供其它方式的植入示例，比如浏览器<script>标签、TS的方式。