帆布指纹识别（canvas fingerprinting）

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

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

其实现原理：

 1 var canvas = document.createElement('canvas');

 2 var ctx = canvas.getContext('2d');

 3 var txt = 'http://security.tencent.com/';

 4 ctx.textBaseline = "top";

 5 ctx.font = "14px 'Arial'";

 6 ctx.textBaseline = "tencent";

 7 ctx.fillStyle = "#f60";

 8 ctx.fillRect(125,1,62,20);

 9 ctx.fillStyle = "#069";

10 ctx.fillText(txt, 2, 15);

11 ctx.fillStyle = "rgba(102, 204, 0, 0.7)";

12 ctx.fillText(txt, 4, 17);

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

1 var b64 = canvas.toDataURL().replace("data:image/png;base64,","");

2 var bin = atob(b64);

3 var crc = bin2hex(bin.slice(-16,-12));

4 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个活动分别是扫二维码打开一个网址，在另外一个网页内操作，在第三个网页内进行别的操作，然后被采集后在后台通过指纹进行关联，得到本次战役的目标

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