帆布指纹识别(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在一定程度上标识了浏览器的唯一性,但是,在相同设备,相同浏览器上,重复特别严重。国外有一个经过优化后的表示浏览器的唯一性的js,https://github.com/Valve/fingerprintJS
它除了利用canvas以外,还加入了其它的影响因素,这些因素包括
- 浏览器http请求中的用户代理-navigator.userAgent
- 浏览器的语言(中文、英文……)-navigator.language
- 设备屏幕的色彩信息-screen.colorDepth
- 设备屏幕的宽高-screen.height screen.width
- 格林威治时间和本地时间之间的时差-Date().getTimezoneOffset()
- 是否支持sessionStorage-window.sessionStorage
- 是否支持localStorage-window.localStorage
- 是否支持indexdDB-window.indexedDB
- 是否支持-docment.body.addBehavior(IE5的一个属性)
- 是否支持调用本地数据库-window.openDatabase
- 浏览器所在系统的CPU等级-navigator.cupClass
- 客户端的操作系统-navigator.platform
- 是否支持Do not track功能-navigator.doNotTrack
- 获取浏览器部分插件信息-flash plugin、Adobe PDF reader、QuickTime、real players、ShockWave player、Windows media player、Silverlight、Skype
- canvas指纹
官网数据显示,该标识精准度达94%,基于原理 https://panopticlick.eff.org/browser-uniqueness.pdf
国内一程序员在此基础上做了 测试,测试结果https://docs.zoho.com/sheet/ropen.do?rid=08m2ga1cf6790c0eb4d8c8f7e54ca6ddb9b72
表格 1 | |||||||||||||
手机型号 | 系统 | Android原生 or Safari | uc浏览器 | qq浏览器 | 微信浏览器 | 备注 | |||||||
算法优化过的fingerprint | 简单的示例代码 | 算法优化过的fingerprint | 简单的示例代码 | 版本 | 算法优化过的fingerprint | 简单的示例代码 | 版本 | 算法优化过的fingerprint | 简单的示例代码 | 版本 | |||
SonyEricsson LT15i | Android 2.3.4 | 3069863566 | 390fde4f | 1317560509 | 9ce51412 | v9.9.0.459 | 2177181476 | 3ea97fca | v5.2 | ||||
Sony X10i | Android 2.3.3 | 3113311216 | js出错 | 2637631051 | 9ce51412 | v9.9.0.459 | 2131234727 | 3ea97fca | v5.2 | 2678610518 | js出错 | v5.3.1 | 原生的刷新优化过生成的id不会变化 |
摩托罗拉 MB526 | Android 2.3.6 | 2364220961 | js出错 | - | - | - | - | - | - | - | - | - | 无sd卡无法安装浏览器应用程序 |
华为 u9508 | Android 4.0.4 | 3905553191 | 7e41cc0f | 4273392099 | b699d48c | v9.9.0.459 | 1587050929 | 78de4112 | v5.2.0.870 | 4026915635 | 7e41cc0f | v5.3.1 | |
OPPO X907 | Android 4.0.3 | 726684502 | 7e41cc0f | 2089481481 | d07a1ee9 | v9.9.0.459 | 3231943450 | 78de4112 | v5.2 | 888269767 | 7e41cc0f | v5.3.1 | |
htc t528w | Android 4.1.1 | 319655688 | a6cb1bf9 | 2479004385 | 56d50248 | v9.8 | 356698439 | 244ae093 | v5.2.1.880 | 2025279959 | a6cb1bf9 | v5.3.1 | |
2307781626 | d07a1ee9 | v9.9.0.459 | |||||||||||
红米移动版 | Android 4.2.1 | 2391689733 | 9c6ad73c | 1950263795 | 244ae093 | v5.2.1.880 | 1813996467 | 244ae093 | v5.4beta | ||||
HUAWEI A199 | Android 4.1.2 | 786613426 | 9c6ad73c | 1568290891 | 00000000 | v8.7.2 | 3315869337 | c1e8ddab | v4.2 | 3514548781 | 9c6ad73c | v5.3.1 | UCv8.7.2不支持canvas,每次刷新优化后生成的id会变化,示例代码生成id一直是8个0 |
1118832592 | b699d48c | v9.9.0.459 | 1980938942 | 244ae093 | v5.2 | ||||||||
HUAWEI P6-T00 | Android 4.2.2 | 2890925815 | 9c6ad73c | 452391340 | b699d48c | v9.9.0.459 | 3877925850 | 244ae093 | v5.2 | 3836773909 | 9c6ad73c | v5.3.1 | |
魅族 M353 | Android 4.2.1 | 1914110408 | 9c6ad73c | 3750243844 | 431d50f8 | v9.9.0.459 | 3750421827 | 244ae093 | v5.2 | 1096133187 | 9c6ad73c | v5.3.0 | |
482295408 | 9c6ad73c | v5.3.1 | |||||||||||
HTC 802w | Android 4.2.2 | 2657761243 | 9c6ad73c | 2182659327 | dedbb2de | v9.8.0.435 | 2352114048 | 244ae093 | v5.2 | 1328536463 | 9c6ad73c | v4.5 | |
2206482289 | 2bc8041a | v9.9.0.459 | 172064929 | 9c6ad73c | v5.3.1 | ||||||||
红米 noet | Android 4.2.2 | 398161035 | 9c6ad73c | 197430937 | d07a1ee9 | v9.8.9.457 | 860144104 | 9c6ad73c | v5.0 | 2695087349 | 9c6ad73c | v5.3.1 | |
三星 GT-N7100 | Android 4.2.2 | 3229417935 | 9c6ad73c | 755839663 | 9fb1a593 | v9.8.9.457 | 1643973998 | b31ee991 | v5.2 | 2036662041 | 9c6ad73c | v5.1 | |
854278007 | 9c6ad73c | v5.3.1 | |||||||||||
Lenovo K900 | Android 4.2.1 | 1758074907 | 9c6ad73c | 3465119114 | 9c6ad73c | v5.3.1 | |||||||
三星 galaxy s5 | Android 4.4.2 | 498065608 | 29725ab4 | 749934522 | d2a60b1d | v9.8.9.457 | 2294751620 | cd456c4a | v5.2.1.880 | 1887934795 | 8140f6e0 | v5.2 | |
3807187249 | 8140f6e0 | v5.3.1 | |||||||||||
三星 GT-I9505 | Android 4.3 | 118099825 | 4f8f416c | 1898858301 | 4228c48e | v9.9.0.459 | 2205938319 | a3ee5a29 | v5.2 | 4256482719 | fbf76091 | v5.3.1 | |
三星 note3 | Android 4.3 | 3923466876 | 4f8f416c | 1961962933 | 0482a2ac | 灵动版 | 408784441 | 0482a2ac | v5.0.2.710 | 4221776986 | 0482a2ac | v5.3.1 | |
4023807084 | 4546f3bb | v9.8.0.435 | |||||||||||
vivo x3t | Android 4.2.1 | 2341248451 | da5b08ce | 1512563799 | c36972ca | v9.9.0.459 | 3677055007 | 33834835 | v5.1.0.780 | 3748495542 | da5b08ce | v5.2.1 | 原生浏览器版本v2.3.1 |
2341248451 | da5b08ce | 2080629171 | 33834835 | v5.2.1.880 | 293292691 | da5b08ce | v5.3.1 | 原生浏览器版本v2.3.3 | |||||
vivo X1 | Android 4.1.1 | 752680764 | da5b08ce | 4192034694 | c36972ca | v9.9.0.459 | 4029696985 | 33834835 | v5.2 | 1912866602 | da5b08ce | v5.3.1 | |
三星 GT-I9502 | Android 4.2.2 | 3824555000 | d457e86b | 4271101143 | 53288053 | v9.7.9439 | 958189852 | 31dbc3dd | v5.0.0.650 | 3721105672 | 759549f9 | v4.5.1 | |
861119218 | 09ca4266 | v9.9.0.459 | 442109150 | 759549f9 | v5.3.1 | ||||||||
LG nexus5 | Android 4.3 | 1934848714 | 91aedadb | 2787277112 | a0d15a90 | v9.9.0.459 | 2462651612 | 91aedadb | v5.2.1.880 | 3690133431 | 91aedadb | v5.3.1 | |
三星 GT-S7562 | Android 4.0.4 | 2614919294 | 0d5b2b4b | 436079966 | 0b27d3d8 | v9.7.5.418 | 35268090 | b437c248 | v5.2 | 1659108745 | 0d5b2b4b | v5.3.1 | |
502410648 | d155acfa | v9.8.9.457 | |||||||||||
Huawei P1 U9200 | Android 4.0.3 | 3177416712 | 2d694a48 | 4051711183 | 56d50248 | v9.6.0.378 | 4124042100 | fa189661 | v4.5 | 1601581701 | 7e41cc0f | v5.3.1 | |
3743446141 | d07a1ee9 | v9.8.9.457 | |||||||||||
Nokia X | Android 4.1.2 | 3598202588 | 7ba05ba8 | 765903625 | 859aa2b8 | v9.9.0.459 | 3070076558 | 418420bf | v5.2 | 2591054263 | bee57099 | v5.0.3 | |
1779200183 | bee57099 | v5.3.1 | |||||||||||
iphone 3GS | iOS 6.0 | 2754182167 | 9fcce736 | 2426993793 | 9fcce736 | v9.7.1.450 | 4019179322 | 9fcce736 | v4.3 | 3034320187 | 9fcce736 | v5.3.1 | |
touch 4 | iOS 6.0.1 | 1326709631 | 9fcce736 | 2614633304 | 9fcce736 | v4.5 | 3107294191 | 9fcce736 | v5.3.1 | ||||
iphone5s | iOS 7.1.2 | 3595104389 | 03048452 | 913535178 | 03048452 | v9.8.0.451 | 2722128024 | 03048452 | v5.3.1 | ||||
ipad 2 | iOS 7.0.4 | 128750767 | 03048452 | 379240706 | 03048452 | v2.4.2.414 | 3271622238 | 03048452 | v4.2.1 | ||||
iphone 4S | iOS 7.0.6 | 2862380899 | 9fd0577f | 2558051848 | 9fd0577f | v9.7.5.438 | 3620524272 | 9fd0577f | v5.2.1 | 2859315108 | 9fd0577f | v5.3.1 | |
touch 5G | iOS 7.1.1 | 2702325906 | 9fd0577f | 3772802722 | 9fd0577f | v9.8.0.451 | 2970288195 | 9fd0577f | v5.2.1 | 495467843 | 9fd0577f | v5.3.1 | |
iphone 5c | iOS 8.0 | 1300849469 | 9fd0577f | 2561622031 | 9fd0577f | v9.8.0.451 | 3288966699 | 9fd0577f | v5.2.1 | 3767977964 | 9fd0577f | v5.3.1 | |
备注说明 | 有特殊背景色的单元格说明有重复,同背景色同字体颜色的,是相同的数据 |
其测试结论
1.由于涉及设备以及浏览器的判定因素非常多,重复性很低,31台设备皆无重复
但是可以设想,毕竟是通过各种属性值去判断唯一性,理想情况下如果两台设备相同浏览器各种设置也相同,还是会出现重复
2.也正因为涉及的因素多,一旦设备系统更新 or 浏览器版本更新 or 浏览器关键插件有变化(版本更新 or 新增卸载关键插件) ,生成的ID都会改变,由于浏览器版本更新还是比较频繁的,很容易失去之前跟踪的用户
结论:canvas指纹只能作为一参考属性去判断设备的唯一性,不能只用这一个因素来判定设备唯一性。fingerPrint.js也不能取代cookie,但是可以作为辅助,如果用户清除了cookie的情况下,还可以通过fingerPrint.js跟踪到该用户重新set cookie(结论参考)
在一些场景下:
中间可以通过搞一个抽奖,要用户输入手机号码验证后抽奖,来做一些连接。
帆布指纹识别(canvas fingerprinting)的更多相关文章
- HTML5 + JS 网站追踪技术:帆布指纹识别 Canvas FingerPrinting Universally Unique Identifier,简称UUID
1 1 1 HTML5 + JS 网站追踪技术:帆布指纹识别 Canvas FingerPrinting 1 一般情况下,网站或者广告联盟都会非常想要一种技术方式可以在网络上精确定位到每一个个体,这 ...
- [转]取代cookie的网站追踪技术:”帆布指纹识别”初探
[前言] 一般情况下,网站或者广告联盟都会非常想要一种技术方式可以在网络上精确定位到每一个个体,这样可以通过收集这些个体的数据,通过分析后更加精准的去推送广告(精准化营销)或其他有针对性的一些活动.C ...
- HTML5 & canvas fingerprinting
HTML5 & canvas fingerprinting demo https://codepen.io/xgqfrms/full/BaoMWMp window.addEventListen ...
- 基于HTML Canvas实现“指纹识别”技术
https://browserleaks.com/canvas 说明所谓指纹识别是指为每个设备标识唯一标识符(以下简称UUID).诸如移动原生的APP都可以通过调用相关设备API来获取相应的UUID. ...
- FingerprintJS - 在浏览器端实现指纹识别
FingerprintJS 是一个快速的浏览器指纹库,纯 JavaScript 实现,没有依赖关系.默认情况下,使用 Murmur Hash 算法返回一个32位整数.Hash 函数可以很容易地更换. ...
- WAF指纹识别和XSS过滤器绕过技巧
[译文] -- “Modern Web Application Firewalls Fingerprinting and Bypassing XSS Filters” 0x1 前言 之前在乌云drop ...
- android指纹识别、拼图游戏、仿MIUI长截屏、bilibili最美创意等源码
Android精选源码 一个动画效果的播放控件,播放,暂停,停止之间的动画 用 RxJava 实现 Android 指纹识别代码 Android仿滴滴打车(滴滴UI)源码 Android高仿哔哩哔哩动 ...
- Android指纹识别深入浅出分析到实战(6.0以下系统适配方案)
指纹识别这个名词听起来并不陌生,但是实际开发过程中用得并不多.Google从Android6.0(api23)开始才提供标准指纹识别支持,并对外提供指纹识别相关的接口.本文除了能适配6.0及以上系统, ...
- Android开发学习之路-指纹识别api
在android6.0之后谷歌对指纹识别进行了官方支持,今天还在放假,所以就随意尝试了一下这个api,但是遇到了各种各样的问题 ①在使用FingerPrintManager这个类实现的时候发现了很多问 ...
随机推荐
- 【PRINCE2是什么】PRINCE2认证之七大原则(4)
我们先来回顾一下,PRINCE2七大原则分别是持续的业务验证,经验学习,角色与责任,按阶段管理,例外管理,关注产品,剪裁. 第四个原则:按阶段管理. 阶段管理其实是给高层提供了项目生命周期中相对应的控 ...
- 了解Package Configurations
使用VS2010创建的SSIS Project有两种deployment model:project deployment 和 package deployment,默认是Project deploy ...
- Python标准模块--linecache
1.模块简介 linecache主要用于缓存文件内容,如果下次继续读取该文件,则不需要打开文件,直接在缓存中获取该文件内容. 2.模块使用 模块的基本方法有getline,clearcache,get ...
- css3圆形头像(当图片宽高不相等时)
1.图片宽高相等,width:300px: height:300px; 把他变成宽高100px的圆形头像 img{width:100px; height:100px; border-radius:50 ...
- 通过HTTP协议上传文件
HTTP是很常见的协议,虽然用得很多,但对细节的了解却是很浅,这回通过向服务端上传文件信息来理解细节.网络库的选择:1.WinHTTP是windows下常用的库:2.CURL是广受喜爱的开源 ...
- winform中textbox属性Multiline=true时全选
1.文本框右键属性 => 添加KeyDown事件. 2.添加如下代码: private void txt_result_KeyDown(object sender, KeyEventArgs e ...
- 你想不到的!CSS 实现的各种球体效果【附在线演示】
CSS 可以实现很多你想不到的效果,今天我们来尝试使用 CSS 实现各种球体效果.有两种方法可以实现,第一种是使用大量的元素创建实际的 3D 球体,这种方法有潜在的性能问题:另外一种是使用 CSS3 ...
- Java继承与组合
Java继承与组合 继承 java 中使用extends关键字表示继承关系,当创建一个类时,如果没有明确指出要继承的类,则是隐式地从根类Object进行继承. 子类继承父类的成员变量 子类能够继承父类 ...
- 【LeetCode】Reconstruct Itinerary(332)
1. Description Given a list of airline tickets represented by pairs of departure and arrival airport ...
- C++中的std详解
以下内容为:本人看C++视频教程-范磊主讲(2.91G)视频学习笔记. 与大家分享下,希望可以帮助大家学习c++! 引例: #include<iostream> int main() { ...