哈喽,大家好 我是xy. 作为一名前端开发工程师,应该都用过H5中的canvas吧!!! 然而你真的理解它吗？Canvas '指纹识别'技术又是什么？ 本文将由浅入深，带你理解Canvas '指纹识别'技术

什么是 Canvas

Canvas API（画布）是在HTML5中新增的标签用于在网页实时生成图像，并且能够操作图像内容，基本上它是一个能够用JavaScript操作的位图（bitmap）。

Canvas 对象示意一个 HTML 画布元素 <canvas></canvas>。它没有本人的行为，然而定义了一个 API 反对脚本化客户端绘图操作。

Canvas 能做什么

  • 根底图形的绘制
  • 文字的绘制
  • 图形的变形和图片的合成
  • 图片和视频的解决
  • 动画的实现
  • 小游戏的制作

随着互联网的倒退，用户对页面的视觉和交互有着更高的要求，传统的 web 前端开发无奈失去满足，所以利用弱小的Canvas绘图能力，能够是网页显示的内容更加的丰富多彩，Canvas 在给用户带来更好的视觉和交互上的体验。

顺手绘制一个简略的图形

<!-- html --><body>    <canvas      id="canvas_xy"      width="500"      height="400"      style="box-shadow: 0 0 20px black"    >      以后浏览器不反对 canvas    </canvas>  </body><!-- js --><script type="text/javascript">  // 获取 canvas 元素对应的 DOM 对象  var canvas_xy = document.getElementById("canvas_xy");  // 获取在 canvas 上绘图的 canvasRenderingContent2D 对象  var ctx = canvas_xy.getContext("2d");  //设置绘制终点  ctx.moveTo(100, 100);  //设置绘制下一个点  ctx.lineTo(200, 200);  //设置绘制下一个点  ctx.lineTo(400, 100);  //完结绘制  ctx.closePath();  //设置线的宽度  ctx.lineWidth = 10;  //设置绘制的款式  ctx.strokeStyle = "red";  //绘制点之间的线路  ctx.stroke();  // 设置填充款式  ctx.fillStyle = "green";  // 填充以后视图  ctx.fill();</script>

成果如下：

曾经理解了 Canvas 的根本应用的同学必定会问，它和指纹识别有什么关系呢？ 其实这里说的指纹识别并不是真正的指纹识别技术，而是利用了Canvas 在不同操作系统、不同浏览器上，产生的图片内容不完全相同（咱们肉眼是无奈辨别的）来标识用户。

既然提到 Canvas 指纹，那必定也会想到浏览器指纹了，这两种有什么区别和关联呢？

别急！！！ 一起来看看浏览器指纹和Canvas指纹

浏览器指纹

个别状况下，网站或者广告商都想要一种技术能够在网络上准确的定位到每一个个体，这样就能够通过收集这些个体的数据，而后加以分析之后更加准确的去推送广告和其余的一些流动。Cookie 技术是十分受欢迎的一种。当用户拜访一个网站时，网站能够在用户以后的浏览器 Cookie 中永恒植入一个含有惟一标示符（UUID）的信息，并通过这个信息将用户所有行为（浏览了哪些页面？搜寻了哪些关键字？对什么感兴趣？点了哪些按钮？用了哪些性能？看了哪些商品？把哪些放入了购物车等等）关联起来。

而随着网民对个人隐私的器重，Cookie 越来越不受待见。不少平安工具甚至是浏览器都开始容许或疏导用户敞开 Cookie 性能，比方很多支流浏览器都有一个“隐衷模式浏览”性能。同时，咱们能够很不便的应用浏览器的快捷键革除缓存，这样在两次拜访的区间也就无奈辨认是否是同一个用户，这样一来，网站就很难追踪用户行为了。

这个时候浏览器指纹也就应运而生。

如何获取浏览器指纹?

想必大家肯定晓得浏览器 navigator 对象 吧，通过 navigator 对象咱们能够获取到足够的浏览器相干的信息。咱们能够间接在浏览器控制台输出 navigator: 输入如下：

其中获取的硬件类型、操作系统、用户代理、零碎字体、语言、屏幕分辨率、浏览器插件 、浏览器扩大、浏览器设置、时区差、地理位置 等泛滥信息，这些信息能够称之为浏览器的指纹信息。

这些指纹信息“相似”人类的身高、年龄等，有很大的抵触概率，只能作为辅助辨认。

这些指纹不能对某个人进行唯一性标识，也无奈对客户端进行唯一性断定，基于HTML5的诸多高级指纹对此提供了新思路。

HTML5的高级指纹: Canvas 指纹：

什么是 Canvas 指纹

从根本上来说，每一种浏览器都会应用不同的图像处理引擎，不同的导出选项，不同的压缩等级，所以每一台电脑绘制出的图形都会有些许不同，这些图案能够被用来给用户设施调配特定编号（指纹），也就是说能够用来辨认不同用户。

那么，如何给咱们的网站减少 Canvas指纹 呢？

咱们能够通过html5的canvas接口，在网页上绘制一个暗藏的画布图像。

值得注意的是，如果用户的设施，操作系统，浏览器都一样的话，计算出来的 canvas 指纹是一样的。换句话说：canvas 指纹不具备唯一性，要和其余的浏览器指纹互相联合利用来进一步计算出区分度更高的指纹标识。

如何获取 Canvas 指纹

基于 Canvas 绘制特定内容的图片，应用canvas.toDataURL()办法返回该图片内容的base64编码字符串。对于 PNG 文件格式，以块(chunk)划分，最初一块是一段32位的CRC校验，提取这段CRC校验码便能够用于用户的惟一标识。

测试结果表明，同一浏览器拜访该域时生成的CRC校验码总是不变。

能够简略了解为同样的HTML Canvas元素绘制操作，在不同的操作系统不同的浏览器上，产生的图片内容其实是不完全相同的。呈现这种状况可能是有几个起因：

  • 在图片格式上，不同 web 浏览器应用了不同的图形处理引擎、不同的图片导出选项、不同的默认压缩级别等。
  • 在像素级别来看，操作系统各自应用了不同的设置和算法来进行抗锯齿和像素渲染操作。
  • 即便是雷同的绘图操作，最终产生的图片数据在 hash 层面上仍然是不同的。

获取 Canvas 指纹：

<script type="text/javascript">  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,", "");    // window.atob 用于解码应用 base-64 编码的字符串    var bin = atob(b64);    var crc = bin2hex(bin.slice(-16, -12));    return crc;  }  console.log(getUUID("公众号：前端开发爱好者"));</script>

不同浏览器查看取得不同的指纹信息：

如何检测 canvas 指纹？

在线检测地址：https://browserleaks.com/canvas

如何暗藏本人的 canvas 指纹？

随着谷歌浏览器发表为了爱护用户的隐衷，跨域申请不再携带cookies。浏览器指纹技术成为追踪用户的热门技术，那有没有方法暗藏咱们的 canvas 指纹呢？

目前次要用2种形式：

  1. 装置浏览器插件，谷歌利用商店有随机批改canvas指纹的插件（CanvasFingerprintBlock），其原理是，每次随机往 canvas 画布外面注入一个随机的乐音（人肉眼是看不到的），从而影响图片数据的CRC校验后果。
  2. 相似LoginBox, multilogin  这样的指纹仿关联软件，其原理是：为每个浏览器窗口环境独自调配指纹数据，和第 1 种形式一样，也是往 canvas 画布外面注入一个随机的乐音，只是这个乐音是固定的。

写在最初

公众号：前端开发爱好者 专一分享 web 前端相干技术文章、视频教程资源、热点资讯等，如果喜爱我的分享，给 点一个赞 或者➕关注 都是对我最大的反对。