zoukankan      html  css  js  c++  java
  • 在前端开发中,如何获取浏览器的唯一标识

    由于不同的系统显卡绘制 canvas 时渲染参数、抗锯齿等算法不同,因此绘制成图片数据的 CRC 校验也不一样。

    function getCanvasFp () {
      const canvas = document.getElementById('canvas')
      const ctx = canvas.getContext('2d')
      ctx.font = '14px Arial'
      ctx.fillStyle = '#ccc'
      ctx.fillText('hello, shanyue', 2, 2)
      return canvas.toDataURL('image/jpeg')
    }

    因此根据 canvas 可以获取浏览器指纹信息。

    1. 绘制 canvas,获取 base64 的 dataurl
    2. 对 dataurl 这个字符串进行 md5 摘要计算,得到指纹信息

    但是对于常见的需求就有成熟的解决方案,若在生产环境使用,可以使用以下库

    它依据以下信息,获取到浏览器指纹信息,而这些信息,则成为 component

    1. canvas
    2. webgl
    3. UserAgent
    4. AudioContext
    5. 对新式 API 的支持程度等
    requestIdleCallback(function () {
      Fingerprint2.get((components) => {
        const values = components.map((component) => component.value)
        const fp = Fingerprint2.x64hash128(values.join(''), 31)
      })
    })

    在 fingerprintjs2 中,对于 component 也有分类

    • browser independent component:有些 component 同一设备跨浏览器也可以得到相同的值,有些独立浏览器,得到不同的值
    • stable component: 有些 component 刷新后值就会发生变化,称为不稳定组件

    在实际业务中,可根据业务选择合适的组件

    const options = {
      excludes: {userAgent: true, language: true}
    }

    简答

    根据 canvas 可以获取浏览器指纹信息

    1. 绘制 canvas,获取 base64 的 dataurl
    2. 对 dataurl 这个字符串进行 md5 摘要计算,得到指纹信息

    若在生产环境使用,可以使用 fingerprintjs2,根据业务需求,如单设备是否可跨浏览器,以此选择合适的 component

  • 相关阅读:
    将new Date()的时间转换为常用时间格式
    封装通用的jsonp方式
    javascript实现手机震动API代码
    webstorm 2016.3.2 破解代码(免费)
    淘宝镜像在npm中执行的代码
    jQuery lazyload 懒加载
    uniapp小程序获取时间戳转换时间例子
    微信小程序解析HTML标签
    微信小程序之tab切换效果
    巧用weui.gallery(),点击图片后预览图片
  • 原文地址:https://www.cnblogs.com/magicg/p/13389634.html
Copyright © 2011-2022 走看看