在过去，想要实现对一个用户做一个唯一标识，cookie是最受欢迎的一种，但是随之互联网的发展，浏览器可以设置禁用cookie，以及清楚cookie等操作，导致对用户ID的定位不再那么清晰。
伴随着html5的成熟，通过canvas fingerprinting（帆布指纹识别）标识ID逐渐被接受。它的特点是无须通过cookie，用户基本无法屏蔽它 ，但是，其实这种指纹识别方式并不能完全取代cookie。
一.canvas fingerprinting(帆布指纹识别)
A.实现步骤原理：
1.在HTML布局绘制一个统一的图像内容.
2.canvas.toDataURL()方法获取图片内容的base64编码字符串。（对于PNG文件格式，以块(chunk)划分，最后一块是一段32位的CRC校验，提取这段CRC校验码便可以用于用户的唯一标识）。
<script>
function bin2hex(str) {
var result = "";
for (i = 0; i < str.length; i++ ) {
var c = str.charCodeAt(i);
result += byte2Hex(c>>8 & 0xff); // 高字节
result += byte2Hex(c & 0xff); // 低字节
}
return result;
}
function byte2Hex(b) {
if(b < 0x10)
return "0" + b.toString(16);
else
return b.toString(16);
}
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);
var canvas_dataURL = canvas.toDataURL();
console.log(canvas_dataURL);
var b64 = canvas_dataURL .replace("data:image/png;base64,","");
var bin = atob(b64);
console.log(bin);
//对于PNG文件格式，以块(chunk)划分，最后一块是一段32位的CRC校验，提取这段CRC校验码便可以用于用户的唯一标识
var crc = bin2hex(bin.slice(-16,-12));
console.log(crc);
$("h1").text(crc);
</script>
B.弊端：
crc在一定程度上标识了浏览器的唯一性，但是，在相同设备，相同浏览器上，重复特别严重。（该指纹能够识别出了某种GPU在安装了某种字体下的群体。）
于是，FingerPrint插件应运而生，经过对帆布指纹之别的优化，有关资料显示，精准度达到94%
二.FingerPrint
A.实现原理：
FingerPrint实现用户唯一标识，考虑了以下因素（以Fingerprintjs2 1.8.0版本为例）：
1.浏览器http请求中的用户代理（一般包含：系统版本，浏览器内核，浏览器版本三个内容）－navigator.userAgent
2.浏览器的语言(中文、英文……)－navigator.language
3.设备屏幕的色彩信息（颜色深度）－screen.colorDepth
4.设备内存容量-navigator.deviceMemory
5.设备像素比-window.devicePixelRatio
6.设备并发线程数-navigator.hardwareConcurrency
7.设备屏幕的宽高－screen.height screen.width
8.设备屏幕的有效宽高-screen.availHeight screen.availWidth
注：availHeight 属性声明了显示浏览器的屏幕的可用高度，以像素计。在 Windows 这样的操作系统中，这个可用高度不包括分配给半永久特性（如屏幕底部的任务栏）的垂直空间。
9.格林威治时间和本地时间之间的时差－Date().getTimezoneOffset()
10.是否支持sessionStorage－window.sessionStorage
11.是否支持localStorage－window.localStorage
12.是否支持indexdDB－window.indexedDB
注：在 HTML5 的本地存储中，有一种叫 indexedDB 的数据库，该数据库是一种存储在客户端本地的 NoSQL 数据库，它可以存储大量的数据。
13.是否支持Behavior
注：docment.body.addBehavior(IE5的一个属性)
14.是否支持调用本地数据库－window.openDatabase
15.浏览器所在系统的CPU等级－navigator.cupClass（仅 IE 支持）
16.客户端的操作系统－navigator.platform
17.是否支持Do not track功能（隐私设置相关属性）－navigator.doNotTrack
18.获取浏览器部分插件信息－flash plugin、Adobe PDF reader、QuickTime、real players、ShockWave player、Windows media player、Silverlight、Skype
19.canvas指纹
20.webgl:网页3D绘图协议，把对webgl的支持情况汇总起来的信息
21.webgl的提供商和显卡情况
22.是否安装AdBlock（广告阻止）
23.用户是否篡改了语言
24.用户是否篡改了屏幕分辨率
25.用户是否篡改了操作系统
26.用户是否篡改了浏览器
27.触摸屏支持
28.自定义方法
B.实现步骤：
1.导入fingerprint2插件（这里我使用的远程文件）：
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fingerprintjs2/1.5.1/fingerprint2.min.js"></script>
2.获取fingerprint2对象，以上的条件默认开启，回调函数返回result：
<body>
<p></p>
<script>
var fp = new Fingerprint2();
fp.get(function(result) {
$("p").text(result);
});
</script>
</body>
3.如果想使用自定义方法，方式如下：
<script>
function aa() {
return "1123";
}
var options = {
customFunction:aa,
};
var fp = new Fingerprint2(options);
fp.get(function(result,components) {
//返回结果
$("p").text(result);
});
</script>
C.弊端：
上述所有条件只是从概率上降低了UserID重复的概率，且要保持现在浏览器及上述条件都不变的状态，才能得到相同的UserID，并不是绝对意义上的唯一性，我用上述代码做了验证，即修改了浏览器的语言，产生的前后UserID就不同了。
这一点，在某视网测试地址也得到了验证，以下是某视网在chorm浏览器中文和英文设置的ViewId截图：
image
image
Fingerprint使用的参数很多，一旦设备系统更新 or 浏览器版本更新 or 浏览器关键插件有变化(版本更新 or 新增卸载关键插件 ，生成的ID都会改变，所以fingerPrint2js也不能完全取代cookie，但是可以作为辅助，在使用的时候结合cookies或flash cookies以降低清空cookie导致ID变化的概率，当cookies或flash cookies清空时，通过Fingerprint hash 重新设置Cookies的值。
当然，有人肯定会想，如果绑定了IP地址或者MAC地址，那么就无敌了，然而仅IE浏览器可以使用本地方法获取IP或MAC地址，想要适配所有平台及浏览器，获取IP地址只能去联网访问第三方接口，比如新浪接口，搜狐接口，太平洋电脑网IP查询接口等等。而MAC地址只有IE可以获取，暂时木有找到兼容其它浏览器的API。
三.我的方案（需要联网，仅供参考）
1.采用cookie和FingerPrint2js结合的方式。
2.依然采用FingerPrint2js插件，使用默认配置，再加一个IP条件（从接口获取）。
3.第一次访问获取页面，联网获取IP,生成ID,存入cookie，下次访问，从cookie取出ID。
4.如果清空缓存，从cookie中找不到ID，再次联网获取IP，与FingerPrint2js生成ID存入cookie。
理论上讲，只有第一次访问以及清空cookie的时候（除去禁用cookie的情况），客户端才会请求IP地址，减小服务器开销。在同一IP地址下，FingerPrint2js的ID重复率会大大降低，但还是不能排除因浏览器升级等原因造成的ID的改变。
网友评论