帆布指纹识别
canvas fingerpinting
- 广告联盟或许网站运营者都希望能够精准定位并标识每一个个体,通过对用户行为的分析(浏览了哪些页面?搜索了哪些关键字?对什么感兴趣?点了哪些按钮?用了哪些功能?看了哪些商品?把哪些放入了购物车等等),为用户推送更加精准的广告(精准化营销)。同时,通过对用户的标识,可以将不同站点的用户进行关联。
- 在过去,实现上述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);
复制代码
一些影响因素
- 浏览器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指纹
使用建议
- 因为Fingerprint使用的参数多,稍有变化就可能造成获取到的hash变化.
- 所以目前并不能代替Cookies,可以和Cookies与Flash Cookies结合,在Cookies和Flash Cookies被清空的情况下,通过Fingerprint hash 重新设置Cookies的值。