01月02, 2018

canvas指纹追踪技术

一般情况下,需要在网络上定义一个个体,比如用户登录、广告追踪,都会用到cookie(session)技术。当用户在当前网站访问或登录时可以种下一个唯一的cookie值,并将其与服务器session存储的值进行对比就可以定位一个用户或判断一个用户是否登录。

然后随着网民对个人隐私的重视,cookie越来越不受待见,毕竟谁也不想自己在x宝搜了一个鞋子,结果到什么网站都给你推荐鞋子吧。很多主流工具和浏览器都允许或引导用户关闭cookie功能,而浏览器大多都会提供一个隐私(无痕)模式,这个时候cookie就可能失效。

虽然可以屏蔽cookie,但是程序员总能想出各种方案来解决当前的问题,确认浏览器的特征信息其实有很多种方法,这里介绍一种基于canvas实现的浏览器指纹认证方法。

canvas指纹

Canvas(画布)是HTML5中一种动态绘图的标签,可以使用其生成甚至处理高级图片。2014年9月,ProPublica报道:新型的canvas指纹追踪正在被用到“上到白宫,下到YouPorn”等众多网站,事实上早在2012年已有研究报告[6]分析称canvas指纹被用于跟踪用户。

原理

在绘制canvas图片时,同样的canvas绘制代码,不同机器和浏览器绘制的图片特征是相同并且独一无二的。不同浏览器使用了不同的图形处理引擎、不同的图片导出选项、不同的默认压缩级别等。在像素级别来看,操作系统各自使用了不同的设置和算法来进行抗锯齿和子像素渲染操作。即使相同的绘图操作,产生的图片数据的CRC检验也不相同。

这样一来,基于canvas标签绘制特定内容的图片,使用canvas.toDataURL()方法获得图片内容的base64编码(对于PNG格式的图片,以块(chunk)划分,最后一块是32位CRC校验)作为唯一性标识。

代码如下:

function bin2hex (s) {
    var i, l, o = "", n;

    s += "";

    for (i = 0, l = s.length; i < l; i++) {
        n = s.charCodeAt(i).toString(16)
        o += n.length < 2 ? "0" + n : n;
    }

    return o;
}

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var txt = 'http://www.luodao.me/';
ctx.fillStyle = "#f60";
ctx.fillRect(125,1,62,20);
var b64 = canvas.toDataURL().replace("data:image/png;base64,","");
var bin = atob(b64);
var crc = bin2hex(bin.slice(-16,-12));
console.log(crc);

效果如下图所示,在同一机器的同一浏览器下,无论正常模式,还是隐私模式,其产生的指纹都是一致的。

alt

优缺点

优点:

  • 利用canvas这一特性来实现用户追踪,目前并没有好的对抗方案,几乎无法屏蔽。

缺点:

  • canvas在低端浏览器下不受支持。
  • 指纹的唯一性并不是100%唯一的,唯一程度大概有99%,不过这个唯一程度已经很高了。

有兴趣可以在这个地址测试一下:https://www.browserleaks.com/canvas,可查看浏览器的Canvas唯一性字符串以及唯一程度。

本文链接:https://luodao.me/post/canvas-zhuizhong.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。