当前位置: 首页 > article >正文

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/ORyXk
  const 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.visitorId
      console.log(visitorId)
    })
</script>

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

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


http://www.kler.cn/a/372286.html

相关文章:

  • 二百七十、Kettle——ClickHouse中增量导入清洗数据错误表
  • 滚柱导轨出现异常损坏的原因
  • HCIP--2 TCP有关笔记
  • ApsaraMQ Serverless 能力再升级,事件驱动架构赋能 AI 应用
  • 网络请求自定义header导致跨域问题
  • WebGIS开发丨从入门到进阶,全系列课程分享
  • rabbitmq高级特性(1):消息确认,持久性,发送方确认和重试机制
  • 在软件工程开发中,瀑布式开发和螺旋式开发的优缺点比较
  • 【数据结构】树-二叉树-堆(上)
  • 堆Heap
  • 医院信息化与智能化系统(13)
  • React Query已过时?新一代请求工具横空出世
  • 日本也有九九乘法表?你会读吗?柯桥零基础学日语到蓝天广场
  • openharmony北向开发入门教程汇总
  • 【非关系型分布式数据库】HBase从入门到面试学习总结
  • Python实现随机分布式延迟PSO优化算法(RODDPSO)优化DBSCAN膨胀聚类模型项目实战
  • IDEA 安装热部署 JRebel -新版-亲测有效
  • Android13预置应用及授权开发
  • Thread类及线程的核心操作
  • Java集合常见面试题总结(5)
  • 常见的开发工具及其作用
  • [论文阅读] GPT-4 Technical Report
  • Kotlin-协程基础
  • 【面试经典150】day 9
  • PostgreSQL 清理 WAL 文件
  • 2024“源鲁杯“高校网络安全技能大赛-Misc-WP