当前位置： 文江博客文章教程详情

帆布指纹识别 Canvas Fingerprinting

发布于 2018-06-02 23:58:28 字数 37533 浏览 2340 评论 0

广告联盟或网站运营者都希望能够精准定位并标识每一个个体，通过对用户行为的分析：

  • 浏览了哪些页面？
  • 搜索了哪些关键字？
  • 对什么感兴趣？
  • 点了哪些按钮？
  • 用了哪些功能？
  • 看了哪些商品？
  • 把哪些放 入了购物车？

为用户推送更加精准的广告（精准化营销）。同时通过对用户的标识，可以将不同站点的用户进行关联。

帆布指纹识别 Canvas Fingerprinting

在过去，实现上述 Cookie 是最受欢迎的一种。但由于移动互联网的发展，移动设备限制、用户禁用 Cookie。使得 Cookie 愈来愈不受待见。 伴随着 HTML5 的成熟，通过 Canvas Fingerprinting 技术标识一个唯一的浏览器逐渐被接受。它的特点是不通过 Cookie，用户基本无法屏蔽它 。

其实现原理：

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var txt = 'http://security.tencent.com/';
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);

获取绘画的内容，需要使用到 canvas.toDataURL() 方法，该方法返回的是图片内容的 base64 编码字符串。对于 PNG 文件格式，以块 chunk 划分，最后一块是一段 32 位的 CRC 校验，提取这段 CRC 校验码便可以用于用户的唯一标识

var b64 = canvas.toDataURL().replace("data:image/png;base64,","");
var bin = atob(b64);
var crc = bin2hex(bin.slice(-16,-12));
console.log(crc);

通过验证，CRC 在一定程度上标识了浏览器的唯一性，但是在相同设备，相同浏览器上，重复特别严重。国外有一个经过优化后的表示浏览器的唯一性的 JavaScript 库，https://github.com/Valve/fingerprintJS 。

它除了利用 Canvas 以外，还加入了其它的影响因素，这些因素包括

  1. 浏览器http请求中的用户代理－navigator.userAgent
  2. 浏览器的语言(中文、英文……)－navigator.language
  3. 设备屏幕的色彩信息－screen.colorDepth
  4. 设备屏幕的宽高－screen.height screen.width
  5. 格林威治时间和本地时间之间的时差－Date().getTimezoneOffset()
  6. 是否支持sessionStorage－window.sessionStorage
  7. 是否支持localStorage－window.localStorage
  8. 是否支持indexdDB－window.indexedDB
  9. 是否支持－docment.body.addBehavior(IE5的一个属性)
  10. 是否支持调用本地数据库－window.openDatabase
  11. 浏览器所在系统的CPU等级－navigator.cupClass
  12. 客户端的操作系统－navigator.platform
  13. 是否支持Do not track功能－navigator.doNotTrack
  14. 获取浏览器部分插件信息－flash plugin、Adobe PDF reader、QuickTime、real players、ShockWave player、Windows media player、Silverlight、Skype
  15. Canvas 指纹

官网数据显示，该标识精准度达94%。

表格 1
手机型号系统Android原生 or Safariuc浏览器qq浏览器微信浏览器备注
算法优化过的fingerprint简单的示例代码算法优化过的fingerprint简单的示例代码版本算法优化过的fingerprint简单的示例代码版本算法优化过的fingerprint简单的示例代码版本
SonyEricsson LT15iAndroid 2.3.43069863566390fde4f13175605099ce51412v9.9.0.45921771814763ea97fcav5.2
Sony X10iAndroid 2.3.33113311216js出错26376310519ce51412v9.9.0.45921312347273ea97fcav5.22678610518js出错v5.3.1原生的刷新优化过生成的id不会变化
摩托罗拉 MB526Android 2.3.62364220961js出错－－－－－－－－－无sd卡无法安装浏览器应用程序
华为 u9508Android 4.0.439055531917e41cc0f4273392099b699d48cv9.9.0.459158705092978de4112v5.2.0.87040269156357e41cc0fv5.3.1
OPPO X907Android 4.0.37266845027e41cc0f2089481481d07a1ee9v9.9.0.459323194345078de4112v5.28882697677e41cc0fv5.3.1
htc t528wAndroid 4.1.1319655688a6cb1bf9247900438556d50248v9.8356698439244ae093v5.2.1.8802025279959a6cb1bf9v5.3.1
2307781626d07a1ee9v9.9.0.459
红米移动版Android 4.2.123916897339c6ad73c1950263795244ae093v5.2.1.8801813996467244ae093v5.4beta
HUAWEI A199Android 4.1.27866134269c6ad73c156829089100000000v8.7.23315869337c1e8ddabv4.235145487819c6ad73cv5.3.1UCv8.7.2不支持canvas，每次刷新优化后生成的id会变化，示例代码生成id一直是8个0
1118832592b699d48cv9.9.0.4591980938942244ae093v5.2
HUAWEI P6-T00Android 4.2.228909258159c6ad73c452391340b699d48cv9.9.0.4593877925850244ae093v5.238367739099c6ad73cv5.3.1
魅族 M353Android 4.2.119141104089c6ad73c3750243844431d50f8v9.9.0.4593750421827244ae093v5.210961331879c6ad73cv5.3.0
4822954089c6ad73cv5.3.1
HTC 802wAndroid 4.2.226577612439c6ad73c2182659327dedbb2dev9.8.0.4352352114048244ae093v5.213285364639c6ad73cv4.5
22064822892bc8041av9.9.0.4591720649299c6ad73cv5.3.1
红米 noetAndroid 4.2.23981610359c6ad73c197430937d07a1ee9v9.8.9.4578601441049c6ad73cv5.026950873499c6ad73cv5.3.1
三星 GT-N7100Android 4.2.232294179359c6ad73c7558396639fb1a593v9.8.9.4571643973998b31ee991v5.220366620419c6ad73cv5.1
8542780079c6ad73cv5.3.1
Lenovo K900Android 4.2.117580749079c6ad73c34651191149c6ad73cv5.3.1
三星 galaxy s5Android 4.4.249806560829725ab4749934522d2a60b1dv9.8.9.4572294751620cd456c4av5.2.1.88018879347958140f6e0v5.2
38071872498140f6e0v5.3.1
三星 GT-I9505Android 4.31180998254f8f416c18988583014228c48ev9.9.0.4592205938319a3ee5a29v5.24256482719fbf76091v5.3.1
三星 note3Android 4.339234668764f8f416c19619629330482a2ac灵动版4087844410482a2acv5.0.2.71042217769860482a2acv5.3.1
40238070844546f3bbv9.8.0.435
vivo x3tAndroid 4.2.12341248451da5b08ce1512563799c36972cav9.9.0.459367705500733834835v5.1.0.7803748495542da5b08cev5.2.1原生浏览器版本v2.3.1
2341248451da5b08ce208062917133834835v5.2.1.880293292691da5b08cev5.3.1原生浏览器版本v2.3.3
vivo X1Android 4.1.1752680764da5b08ce4192034694c36972cav9.9.0.459402969698533834835v5.21912866602da5b08cev5.3.1
三星 GT-I9502Android 4.2.23824555000d457e86b427110114353288053v9.7.943995818985231dbc3ddv5.0.0.6503721105672759549f9v4.5.1
86111921809ca4266v9.9.0.459442109150759549f9v5.3.1
LG nexus5Android 4.3193484871491aedadb2787277112a0d15a90v9.9.0.459246265161291aedadbv5.2.1.880369013343191aedadbv5.3.1
三星 GT-S7562Android 4.0.426149192940d5b2b4b4360799660b27d3d8v9.7.5.41835268090b437c248v5.216591087450d5b2b4bv5.3.1
502410648d155acfav9.8.9.457
Huawei P1 U9200Android 4.0.331774167122d694a48405171118356d50248v9.6.0.3784124042100fa189661v4.516015817017e41cc0fv5.3.1
3743446141d07a1ee9v9.8.9.457
Nokia XAndroid 4.1.235982025887ba05ba8765903625859aa2b8v9.9.0.4593070076558418420bfv5.22591054263bee57099v5.0.3
1779200183bee57099v5.3.1
iphone 3GSiOS 6.027541821679fcce73624269937939fcce736v9.7.1.45040191793229fcce736v4.330343201879fcce736v5.3.1
touch 4iOS 6.0.113267096319fcce73626146333049fcce736v4.531072941919fcce736v5.3.1
iphone5siOS 7.1.235951043890304845291353517803048452v9.8.0.451272212802403048452v5.3.1
ipad 2iOS 7.0.41287507670304845237924070603048452v2.4.2.414327162223803048452v4.2.1
iphone 4SiOS 7.0.628623808999fd0577f25580518489fd0577fv9.7.5.43836205242729fd0577fv5.2.128593151089fd0577fv5.3.1
touch 5GiOS 7.1.127023259069fd0577f37728027229fd0577fv9.8.0.45129702881959fd0577fv5.2.14954678439fd0577fv5.3.1
iphone 5ciOS 8.013008494699fd0577f25616220319fd0577fv9.8.0.45132889666999fd0577fv5.2.137679779649fd0577fv5.3.1
备注说明有特殊背景色的单元格说明有重复，同背景色同字体颜色的，是相同的数据

其测试结论

  1. 由于涉及设备以及浏览器的判定因素非常多，重复性很低，31 台设备皆无重复，但是可以设想，毕竟是通过各种属性值去判断唯一性，理想情况下如果两台设备相同浏览器各种设置也相同，还是会出现重复
  2. 也正因为涉及的因素多，一旦设备系统更新 or 浏览器版本更新 or 浏览器关键插件有变化(版本更新 or 新增卸载关键插件) ，生成的ID都会改变，由于浏览器版本更新还是比较频繁的，很容易失去之前跟踪的用户

结论

Canvas 指纹只能作为一参考属性去判断设备的唯一性，不能只用这一个因素来判定设备唯一性。FingerPrint.js 也不能取代 Cookie，但是可以作为辅助，如果用户清除了 Cookie 的情况下，还可以通过 FingerPrint.js 跟踪到该用户重新 Set Cookie（结论参考）

在一些场景下：

一般一个指纹跟踪不是永久的跟踪的概念，而是在一个战役内进行活动的跟踪，比如可以发布3个活动，3个活动分别是扫二维码打开一个网址，在另外一个网页内操作，在第三个网页内进行别的操作，然后被采集后在后台通过指纹进行关联，得到本次战役的目标，中间可以通过搞一个抽奖，要用户输入手机号码验证后抽奖，来做一些连接。

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群
更多

你可能也喜欢

创建 Docker Swarm 集群

修复 passwd:Authentication token manipulation error 的步骤

Metro 风格 UI 算不算是另类的简约风格

Coreseek 全文搜索工具配置及使用

HTML 元素标签在浏览器中默认样式介绍和重置方法

修改 WordPress 中用户角色的名称和用户角色修改方法

jQuery.Avgrund.js 基于 jQuery 模态弹窗的插件

查看 Linux 内核路由表 以及 route 命令的使用

上一篇：

下一篇：

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。
列表为空，暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态，并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84961 人气
发私信
更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

醉城メ夜风

文章 0 评论 0

远昼

文章 0 评论 0

平生欢

文章 0 评论 0

微凉

文章 0 评论 0

Honwey

文章 0 评论 0

qq_ikhFfg

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文