最近看面试题总是会三天打鱼两天晒网,所以希望通过外部手段约束自己,我现在每天学习的内容发布,一方面给自己增加外部压力,另一方面显化自己的学习成果,防止陷入感动。
我面经的复习题是网址 前端常见面试题总结 – 大厂面试每日一题
浏览器的唯一标识
前端开发中,为什么要获得浏览器的唯一标识?
- 用户跟踪与分析。(跟踪用户在网站的行为,进行数据分析,用户画像构建)
- 提供个性化体验。(比如推荐系统,定制化广告)
- 安全性与身份验证。(唯一标识辅助身份验证,如检测潜在的欺诈行为)
- 跨设备同步。(用户在不同设备访问同一服务,将这些设备的用户会话同步起来)
补充:前端开发中,欺诈行为就是:利用技术手段,通过前端页面对用户,数据,或系统进行不正当的访问,篡改或利用的行为,如跨站脚本攻击XSS
,点击劫持,会话劫持,恶意软件或广告等。
前端开发中,怎么获得浏览器的唯一标识?
navigator.userAgent
返回字符串,描述了浏览器的用户代理信息。
包含了浏览器和操作系统的信息,但是不唯一,因为不同用户的浏览器和操作系统配置一样。
console.log(navigator.userAgetn)
//Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36 SLBrowser/9.0.5.9101 SLBChan/11 SLBVPV/64-bit
localstorage
或cookies
用户浏览器存储一个唯一标识(UUID
),用户访问时候读取。
但是如果用户清除浏览器缓存或在不同浏览器访问则不能追踪到同一用户。
canvas
指纹
原因:因为不同显卡绘制canvas
时渲染 参数,抗锯齿等算法不同,因此绘制成图片数据的CRC
校验也不一样,因此更具canvas
可以获取浏览器指纹信息。
原理:(1)绘制canvas
,获取base64
的dataurl
。(2)对dataurl
字符串进行md5
摘要计算,浏览器唯一标识。
补充:MD5
摘要算法是广泛使用的哈希函数。它能够将任意长度的消息加密成一个固定长度(128位即16字节)的散列值(32位的十六进制字符串)。特点:压缩性(任意长度消息生成固定长度),易计算性(原数据计算出md5
摘要值容易),抗修改性(对输入数据微小修改,md5
摘要值大改变),弱抗碰撞性(存在两个不同入数据同一碰撞值,安全性较高的场合不推荐使用)
使用js-md5插件
import md5 from 'js-md5'
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
ctx.textBaseline = 'top'
ctx.font = "14px 'Arial'"
ctx.fillText("hello", 2, 2)
const finger=canvas.toDataURL()
const fingerprint=md5(finger)
可以使用fingerprintjs库
<script>const fpPromise = import('<https://openfpcdn.io/fingerprintjs/v4>').then(FingerprintJS => FingerprintJS.load())fpPromise.then(fp => fp.get()).then(result => {// This is the visitor identifier:const visitorId = result.visitorIdconsole.log(visitorId)})
</script>