使用HTML5 -Canvas追踪用户,Chrome隐身模式阵亡

  中国的一些精准营销公司又要偷着乐了= =从之前追踪Cookie到后面追踪FlashCookie,某些商家总在永无止境的追踪用户行为甚至是隐私,将其转化为所谓的“商业价值”。我们被迫面临“世风日下、道德沦亡”之窘境,不过笔者后来又释怀了,反正在中国上网本来就没有隐私嘛。毕竟国家机器还在合法工作呢......

  话说回来,HTML5-Canvas追踪用户的核心原理其实就是一句话:在绘制canvas图片时,同样的canvas绘制代码,不同机器和浏览器绘制的图片特征是相同并且独一无二的,这样以来,提取最简单的crc值便可以唯一标识和跟踪这个用户。原因嘛,其实是当HTML5 Canvas元素绘制操作时,在不同的操作系统不同的浏览器上,产生的图片内容其实是不完全相同的。当然,既然是不完全相同那就是有碰撞重复的情况,不过看起来经过一些优化可以显著降低重复率,比如验证更多的项目比如浏览器插件、加入UID之类的。

  无心插柳柳成荫,本来用来校验图片的功能居然被用于追踪用户,现实就是这么有趣~

原文作者:rices 【http://security.tencent.com/index.php/blog/msg/59】

【前言】

一般情况下,网站或者广告联盟都会非常想要一种技术方式可以在网络上精确定位到每一个个体,这样可以通过收集这些个体的数据,通过分析后更加精准的去推送广告(精准化营销)或其他有针对性的一些活动。Cookie技术是非常受欢迎的一种。当用户访问一个网站时,网站可以在用户当前的浏览器Cookie中永久植入一个含有唯一标示符(UUID)的信息,并通过这个信息将用户所有行为(浏览了哪些页面?搜索了哪些关键字?对什么感兴趣?点了哪些按钮?用了哪些功能?看了哪些商品?把哪些放入了购物车等等)关联起来。

而随着网民对个人隐私的重视,Cookie越来越不受待见。不少安全工具甚至是浏览器都开始允许或引导用户关闭Cookie功能,比如很多主流浏览器都有一个“隐私模式浏览”功能。这样以来,网站就很难追踪用户行为了。但仍然有一些方法可以让网站去追踪每一个访问者的行为,比如通过flash cookie的方式也可以达到唯一标识和追踪的目的。

笔者近期注意到,国外媒体报道了一种非常难以摆脱的新型在线追踪工具被用来尾随从白宫官网到色情网站YouPorn.com的热门网站的访问者。经过分析,这个就是另一种比较新的访客追踪技术:“帆布指纹识别”技术,具体代码见附录6。这个技术的独特之处是:它不像通过Cookie或者Flash Cookie等之类的方式,你基本是无法屏蔽它的。

【原理分析】

笔者收集整理了很多知名站点上的类似代码,详见附录4,从这些“帆布指纹识别”代码可以看出,均使用到了HTML5专属标签<canvas>的一个现状:在绘制canvas图片时,同样的canvas绘制代码,不同机器和浏览器绘制的图片特征是相同并且独一无二的,这样以来,提取最简单的md5值便可以唯一标识和跟踪这个用户。

一段产生canvas元素的javascript代码:

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);

chrome隐身模式测试:


同一机器的chrome浏览器,无论正常模式还是隐身模式,得到的crc值始终一致。而对于不同机器得到的值是不同的,追踪效果显而易见。

看到这里,相信很多人想问,Why?为什么会出现这样的情况?同样的js代码,在不同设备的浏览器上,结果是唯一并且各不相同的。这到底是为什么?其实原因很简单,同样的HTML5 Canvas元素绘制操作,在不同的操作系统不同的浏览器上,产生的图片内容其实是不完全相同的。出现这种情况可能是有几个原因:

1、在图片格式上,不同web浏览器使用了不同的图形处理引擎、不同的图片导出选项、不同的默认压缩级别等。

2、在像素级别来看,操作系统各自使用了不同的设置和算法来进行抗锯齿和子像素渲染操作。

因此,即使是相同的绘图操作,最终产生的图片数据在hash层面上依然是不同的。这个具体代码层面,恐怕要去搞懂各个主流浏览器的实现和以及操作系统的渲染。笔者精力所限,短期很难给出。大家可以自行摸索下,欢迎交流J

【后话】

HTML5千变万化,利用canvas 这一特性来实现用户追踪,目前并没有好的对抗方案,未来也只能依靠广大浏览器厂商自行了断,实现canvas绘图机制的随机化或许可以很好的保护用户隐私,防止被追踪。

文中涉及到的代码和技术细节,只限用于技术交流,切勿用于非法用途。另外,如果想要研究更多的用户追踪技术,推荐去研究下大名鼎鼎的专注于访客追踪的开源项目:evercookie【附录5】,这个猥琐的小工具,通过几乎所有你想到和想不到的方式(Cookie、Flash、Silverlight、Web History、HTTP ETags、Web cache、window.name caching、userData storage、HTML5、甚至是java的漏洞等)来跟踪访问网站的用户行为。

【附录】

[1] http://cseweb.ucsd.edu/~hovav/dist/canvas.pdf

[2] https://securehomes.esat.kuleuven.be/~gacar/sticky/index.html

[3] https://panopticlick.eff.org/browser-uniqueness.pdf

[4] 部分“帆布指纹鉴别代码”地址列表:

http://ct1.addthis.com/static/r07/core130.js 
http://i.ligatus.com/script/fingerprint.min.js
http://src.kitcode.net/fp2.js 
http://admicro1.vcmedia.vn/fingerprint/figp.js 
http://shorte.st/js/packed/smeadvert-intermediate-ad.js 
http://stat.ringier.cz/js/fingerprint.min.js 
http://cya2.net/js/STAT/89946.js 
http://images.revtrax.com/RevTrax/js/fp/fp.min.jsp 
http://rackcdn.com/mongoose.fp.js

[5]  evercookie官网 http://samy.pl/evercookie/

[6]  使用帆布指纹识别技术的库fingerprintjs 官网 https://github.com/Valve/fingerprintjs

[7]  https://www.browserleaks.com/canvas#how-does-it-work

时间: 2024-10-24 13:02:41

使用HTML5 -Canvas追踪用户,Chrome隐身模式阵亡的相关文章

谷歌Gboard输入法新增“无痕模式”:仅在Chrome隐身窗口中适用

据外媒Android Police报道,如大家所知道的,Chrome浏览器中的"隐身模式"是为了防止你的私密浏览记录被其他人看到,但是,在这种模式下,你的输入法键盘依然会记住你输入的短语,为了阻止你的键盘在Chrome隐身模式下记住你输入的内容,现在,谷歌已经更新了他们的Gboard应用. ▲配图来自Android Police 目前如果你想让Gboard输入法在隐身窗口下不再记录你输入的内容,你需要将它与Android O开发者预览版和Chrome开发版搭配使用,因为这个特性依然在测

Chrome的隐身模式

先来说说隐身模式的启用方法吧 1.键盘快捷:Ctrl + Shift + N. 2.在Windows7下的任务栏处,右击“Chrome”图标,会出一个下拉菜单,点击“新建隐身窗口”. 3.你还可以在一个正在浏览的页面中,通过“右键点击链接”出现下拉菜单,选择“在隐身窗口中打开链接”,直接进入隐身窗口(如下图). 简单一点的说,Chrome的隐身模式的好处就是保持你的隐私.具体表现在在此窗口中查看的网页不会显示在浏览器历史记录或搜索历史记录中,关闭隐身窗口后也不会在计算机上留下 Cookie 之类

HTML5 Canvas核心技术图形动画与游戏开发(读书笔记)----第一章,基础知识

一,canvas元素 1 为了防止浏览器不支持canvas元素,我们设置“后备内容”(fallback content),下面紫色的字即为后备内容 <canvas id="canvas" width="600" height="300">您的浏览器不支持canvas,可以选择升级您的浏览器</canvas> 2 开发基于canvas的应用程序的最基本的几个操作 1),使用document.getElementById()方

HTML5 canvas 绘制精美的图形

HTML5 是一个新兴标准,它正在以越来越快的速度替代久经考验的 HTML4.HTML5 是一个 W3C “工作草案” — 意味着它仍然处于开发阶段 — 它包含丰富的元素和属性,它们都支持现行的 HTML 4.01 版本规范.它还引入了几个新元素和属性,它们适用许多使用 web 页面的领域 — 音频.视频.图形.数据存储.内容呈现,等等.本文主要关注图形方面的增强:canvas. 新的 HTML5 canvas 是一个原生 HTML 绘图簿,用于 JavaScript 代码,不使用第三方工具.跨

HTML5 Canvas核心技术—图形、动画与游戏开发.pdf6

操作图像的像素:getImageData() putImageData() ImageData对象 调用getImageData()方法实际是获取了一个指向ImageData对象的引用,返回的对象包含3个属性:1)width以设备像素为单位的图像数据宽度 2)height以设备像素为单位的图像数据高度 3)data包含各个设备像素数值的数组 width和height都是只读的无符号长整数,data属性包含的每个数组元素都表示图像数据中相应的像素值,每个值包含的颜色分量都是含有8个二进制位的整数(

html5 Canvas绘制图形入门详解

html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome.Opera.Safari.IE9+)都已经开始支持html5了.除此之外,在移动浏览器市场上,众多的移动浏览器也纷纷展开关于「html5的支持能力以及性能表现」的军备竞赛.html作为革命性的网页技术标准,再加上众多浏览器厂商或组织的鼎力支持,可以想见,html5将会成为未来网页技术的领头羊. ht

HTML5 Canvas简简单单实现手机九宫格手势密码解锁

原文:HTML5 Canvas简简单单实现手机九宫格手势密码解锁 早上花了一个半小时写了一个基于HTML Canvas的手势解锁,主要是为了好玩,可能以后会用到. 思路:根据配置计算出九个点的位置,存入一个数组,当然存入数组的顺序的索引是: 第一行:0   1  2   第二行:3  4  5 第三行:6  7  8 然后就根据这个坐标数组去绘制九个点 再则我们需要一个保存选中点的数组,每当touchmove事件就判断当前触摸点和那个点的距离小于圆的半径  如果为真的话 那么就添加进入选中点的数

HTML5 Canvas 六角光阑动态效果

光阑是光具组件中光学元件的边缘.框架或特别设置的带孔屏障,本人实现了结构比较简单的六角光阑,效果有点像宇航员在徐徐张开的飞船舷窗中看到逐渐完整的地球,下面四张图可以感受一下. 当然看动态效果才能真正体验,要看完整的演示请下载:https://files.cnblogs.com/files/xiandedanteng/slotAnimation.rar 并用chrome打开. 代码如下: <!DOCTYPE html> <html lang="utf-8"> &l

HTML5 Canvas arc()函数//////////////////////(转)

HTML5 Canvas arc()函数 实例 创建一个圆形: var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.arc(100,75,50,0,2*Math.PI); ctx.stroke(); 浏览器支持 Internet Explorer 9.Firefox.Opera.Chrome 以及 Safari 支持 arc() 方法.