广告联盟或许网站运营者都希望能够精准定位并标识每一个个体,通过对用户行为的分析(浏览了哪些页面?搜索了哪些关键字?对什么感兴趣?点了哪些按钮?用了哪些功能?看了哪些商品?把哪些放入了购物车等等),为用户推送更加精准的广告(精准化营销)。同时,通过对用户的标识,可以将不同站点的用户进行关联。

在过去,实现上述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以外,还加入了其它的影响因素,这些因素包括

  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%,基于原理 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(结论参考)

在一些场景下:

 一般一个指纹跟踪不是永久的跟踪的概念,而是在一个战役内进行活动的跟踪,比如可以发布3个活动,3个活动分别是扫二维码打开一个网址,在另外一个网页内操作,在第三个网页内进行别的操作,然后被采集后在后台通过指纹进行关联,得到本次战役的目标

中间可以通过搞一个抽奖,要用户输入手机号码验证后抽奖,来做一些连接。

帆布指纹识别(canvas fingerprinting)的更多相关文章

  1. HTML5 + JS 网站追踪技术:帆布指纹识别 Canvas FingerPrinting Universally Unique Identifier,简称UUID

    1 1 1 HTML5 + JS  网站追踪技术:帆布指纹识别 Canvas FingerPrinting 1 一般情况下,网站或者广告联盟都会非常想要一种技术方式可以在网络上精确定位到每一个个体,这 ...

  2. [转]取代cookie的网站追踪技术:”帆布指纹识别”初探

    [前言] 一般情况下,网站或者广告联盟都会非常想要一种技术方式可以在网络上精确定位到每一个个体,这样可以通过收集这些个体的数据,通过分析后更加精准的去推送广告(精准化营销)或其他有针对性的一些活动.C ...

  3. HTML5 & canvas fingerprinting

    HTML5 & canvas fingerprinting demo https://codepen.io/xgqfrms/full/BaoMWMp window.addEventListen ...

  4. 基于HTML Canvas实现“指纹识别”技术

    https://browserleaks.com/canvas 说明所谓指纹识别是指为每个设备标识唯一标识符(以下简称UUID).诸如移动原生的APP都可以通过调用相关设备API来获取相应的UUID. ...

  5. FingerprintJS - 在浏览器端实现指纹识别

    FingerprintJS 是一个快速的浏览器指纹库,纯 JavaScript 实现,没有依赖关系.默认情况下,使用 Murmur Hash 算法返回一个32位整数.Hash 函数可以很容易地更换. ...

  6. WAF指纹识别和XSS过滤器绕过技巧

    [译文] -- “Modern Web Application Firewalls Fingerprinting and Bypassing XSS Filters” 0x1 前言 之前在乌云drop ...

  7. android指纹识别、拼图游戏、仿MIUI长截屏、bilibili最美创意等源码

    Android精选源码 一个动画效果的播放控件,播放,暂停,停止之间的动画 用 RxJava 实现 Android 指纹识别代码 Android仿滴滴打车(滴滴UI)源码 Android高仿哔哩哔哩动 ...

  8. Android指纹识别深入浅出分析到实战(6.0以下系统适配方案)

    指纹识别这个名词听起来并不陌生,但是实际开发过程中用得并不多.Google从Android6.0(api23)开始才提供标准指纹识别支持,并对外提供指纹识别相关的接口.本文除了能适配6.0及以上系统, ...

  9. Android开发学习之路-指纹识别api

    在android6.0之后谷歌对指纹识别进行了官方支持,今天还在放假,所以就随意尝试了一下这个api,但是遇到了各种各样的问题 ①在使用FingerPrintManager这个类实现的时候发现了很多问 ...

随机推荐

  1. 【PRINCE2是什么】PRINCE2认证之七大原则(4)

    我们先来回顾一下,PRINCE2七大原则分别是持续的业务验证,经验学习,角色与责任,按阶段管理,例外管理,关注产品,剪裁. 第四个原则:按阶段管理. 阶段管理其实是给高层提供了项目生命周期中相对应的控 ...

  2. 了解Package Configurations

    使用VS2010创建的SSIS Project有两种deployment model:project deployment 和 package deployment,默认是Project deploy ...

  3. Python标准模块--linecache

    1.模块简介 linecache主要用于缓存文件内容,如果下次继续读取该文件,则不需要打开文件,直接在缓存中获取该文件内容. 2.模块使用 模块的基本方法有getline,clearcache,get ...

  4. css3圆形头像(当图片宽高不相等时)

    1.图片宽高相等,width:300px: height:300px; 把他变成宽高100px的圆形头像 img{width:100px; height:100px; border-radius:50 ...

  5. 通过HTTP协议上传文件

         HTTP是很常见的协议,虽然用得很多,但对细节的了解却是很浅,这回通过向服务端上传文件信息来理解细节.网络库的选择:1.WinHTTP是windows下常用的库:2.CURL是广受喜爱的开源 ...

  6. winform中textbox属性Multiline=true时全选

    1.文本框右键属性 => 添加KeyDown事件. 2.添加如下代码: private void txt_result_KeyDown(object sender, KeyEventArgs e ...

  7. 你想不到的!CSS 实现的各种球体效果【附在线演示】

    CSS 可以实现很多你想不到的效果,今天我们来尝试使用 CSS 实现各种球体效果.有两种方法可以实现,第一种是使用大量的元素创建实际的 3D 球体,这种方法有潜在的性能问题:另外一种是使用 CSS3 ...

  8. Java继承与组合

    Java继承与组合 继承 java 中使用extends关键字表示继承关系,当创建一个类时,如果没有明确指出要继承的类,则是隐式地从根类Object进行继承. 子类继承父类的成员变量 子类能够继承父类 ...

  9. 【LeetCode】Reconstruct Itinerary(332)

    1. Description Given a list of airline tickets represented by pairs of departure and arrival airport ...

  10. C++中的std详解

    以下内容为:本人看C++视频教程-范磊主讲(2.91G)视频学习笔记. 与大家分享下,希望可以帮助大家学习c++! 引例: #include<iostream> int main() { ...