浏览器指纹

最新推荐文章于 2024-10-31 18:59:00 发布

和谐创新

最新推荐文章于 2024-10-31 18:59:00 发布

阅读量1k

点赞数 23

文章标签： chrome

本文链接：https://blog.csdn.net/hexiechuangxin/article/details/136108781

版权

浏览器指纹

浏览器指纹是一种用于识别用户的技术，通过收集用户的浏览器信息，如浏览器版本、操作系统、屏幕分辨率、插件、字体等信息，然后通过一定的算法生成一个唯一的标识。

那么它有什么用呢？我们先介绍浏览器的无痕模式。

浏览器无痕模式

浏览器无痕模式是一种隐私保护模式，它不会保存用户的浏览记录、cookie、网页缓存等信息，当用户关闭无痕模式时，浏览器会删除所有的无痕模式下的信息。

因为无痕模式下网站不会保存 cookie、localStorage、sessionStorage 等信息。这意味着我们不能在前端存储信息。同时，如果用户没有登录，后端没有保存用户的身份信息的话，则难于获取用户过去的浏览数据，这对于一些需要用户信息以提供个性化服务的网站来说是个难题。

比如对于一个无需登录的视频网站，如果我第一次进入时浏览了很多原神视频，那么下次进入就应该给我推荐更多原神相关的视频。然而，由于我开启了无痕模式，网站的前后端都无法获取我的身份，它不知道上次我看了什么，自然也就难以推荐。

浏览器无痕模式只是在浏览器端不保存用户信息，但是在网络上，用户的信息还是可以被获取的。你访问的网站、你所在的学校、你的互联网服务提供商等都可能获取你的信息。
~~不要以为开了无痕模式就可以随意浏览不良网站，这只是一种隐私保护模式，不是绝对的隐私保护。~~

浏览器指纹获取用户身份

上面谈到无痕模式下获取用户身份的困难，而浏览器指纹可以较好地解决这个问题。

当你初次访问网站时，网站会收集你的浏览器信息，然后生成一个唯一的标识，这个标识可以用来识别你的身份。当你再次访问网站时，网站会再次收集你的浏览器信息，然后与之前的标识进行对比，如果两者相同，则说明你是同一个用户。

浏览器指纹反爬虫

对于一些简单的爬虫，如果它们每次携带固定的浏览器信息，那么我们就可以通过浏览器指纹识别它们并限制它们的访问。

浏览器指纹的采集

浏览器的很多信息都可以用来生成指纹，比如：

浏览器版本
操作系统
屏幕分辨率
时区
语言
插件
字体
硬件信息
网络信息
…

下面重点介绍 canvas 指纹。

canvas 指纹

canvas 是 HTML5 新增的元素，它可以用来绘制图形、动画、图像等。canvas 指纹是通过浏览器绘制 canvas 时的一些特性来生成的。

const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
const txt = 'Browser fingerprint'
ctx.textBaseline = 'top'
ctx.font = '14px "Arial"'
ctx.textBaseline = 'alphabetic'
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)
const b64 = canvas.toDataURL()
console.log(b64)