多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
前言 : 一般情况下,网站或者广告联盟都会非常想要一种技术方式可以在网络上精确定位到每一个个体,这样可以通过收集这些个体的数据,通过分析后更加精准的去推送广告(精准化营销)或其他有针对性的一些活动。 Cookie技术是非常受欢迎的一种。当用户访问一个网站时,网站可以在用户当前的浏览器Cookie中永久植入一个含有唯一标示符(UUID)的信息,并通过这个信息将用户所有行为(浏览了哪些页面?搜索了哪些关键字?对什么感兴趣?点了哪些按钮?用了哪些功能?看了哪些商品?把哪些放入了购物车等等)关联起来。 但是Cookie可以伪装,在浏览器隐私窗口,不同用户,甚至是爬虫时无法区分。 而"帆布指纹识别”技术可以一定程度避免以上的缺点。 # **先看看浏览器中navigator的内容** ![](https://img.kancloud.cn/a5/9f/a59f422fd52d51ecb8ac51114404cb16_1680x1223.png) 里面包含了大量信息,但是都无法对客户端做唯一的判定,所以基于H5canvas新出了canvas指纹追踪技术,它的底层会获取设备、操作系统、浏览器三合一唯一的标识,如果其他用户与你的这三个信息重复的概率就非常低了 **生成canvas指纹** ``` <script> const uuid = () => { const canvas = document.createElement("canvas");//画布 const cts = canvas.getContext('2d');//2d const txt = "test";//文字 cts.fillText(txt, 10, 10);//传入文字 console.log(canvas.toDataURL());//导出base64格式 } uuid(); </script> ``` 结果: ![](https://img.kancloud.cn/05/cb/05cb9ec674fb6ad321feb7e75f2bb6ab_1393x513.png) 打开后,分别到谷歌和edge浏览器中,每个浏览器生成的base64码都是不一样的,得到的内容是一样的,但是包含的信息是不一样的,三个标识都会保存在这个码中 ![](https://img.kancloud.cn/4a/e0/4ae0b476d3d0eb1d9d2b6f2901761b8c_1977x1054.png) chrome浏览器如果防止被跟踪:安装浏览器插件,谷歌应用商店中找到CanvasFingerprintBlock安装即可,原理是:每次都会往canvas中随机注入的噪音(肉眼无法看到),从而影响base64的加密结果