使用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
使用HTML5 -Canvas追踪用户,Chrome隐身模式阵亡的更多相关文章
- Chrome隐身模式有什么用
最近发布的Chrome浏览器,小编发现有一个个“隐身窗口”功能,那么这是什么功能呢?原来这是Chrome隐身模式!那么这个隐身模式有什么功能呢? Chrome隐身模式有什么用? 从官方的介绍来看,“隐 ...
- 基于HTML5 Canvas实现用户交互
很多人都有这样的疑问,基于HTML5 Canvas实现的元素怎么和用户进行交互?在这里我们用到HT for Web(http://www.hightopo.com/guide/guide/core/b ...
- chrome隐身模式无法播放flash的解决办法
困扰很多天的chrome无法播放flash的问题终于解决了 因为之前一直用隐身模式,一直不能播放flash,重装chrome,重装插件,还是不行 结果今天发现正常模式是可以播放的,所以找了一下chro ...
- 提高HTML5 canvas性能的几种方法
简介 HTML5 canvas 最初起源于苹果(Apple)的一项实验,现在已经成为了web中受到广泛支持的2D快速模式绘图(2Dimmediate mode graphic)的标准.许多开发者现在利 ...
- HTML5 Canvas之猜数字游戏
主要的内容描述的是如何渲染一个矩形的边框和填充背景,以及文字. 代码中有详细的注释: 效果图: 以下是代码: <!DOCTYPE html> <html lang="cn& ...
- HTML5 Canvas 初探
仅仅只是一个简单的hello world. js代码很简单: <!DOCTYPE HTML> <html lang="cn"> <head> & ...
- Chrome的隐身模式
先来说说隐身模式的启用方法吧 1.键盘快捷:Ctrl + Shift + N. 2.在Windows7下的任务栏处,右击“Chrome”图标,会出一个下拉菜单,点击“新建隐身窗口”. 3.你还可以在一 ...
- Chrome使用小技巧-多用户登录、直接打开隐身模式窗口
在开发过程中,有时候需要打开2个chrome,各自登录一个账号来做测试,正常情况下由于同一用户下的chrome共享cookies的原因,是没办法登录2个账号的. 这种情况,可以找到chrome图标,点 ...
- 谷歌浏览器-如何让Chrome默认以隐身模式启动?
桌面图标右键属性,在“目标”后添加参数“ --incognito”(注意是双短划线,不包括双引号,双短划线前加一空格)就可以直接以隐身模式启动Chrome浏览器
随机推荐
- ActionScript的for循环
actionscript支持的for循环有三种形式: 1.for(初始值;条件;递增) 例如: for(var x:int=1;x<=10;x++) trace(x); trace()会把结果输 ...
- 使用kubeadm安装kubernetes1.12.2版本脚本【h】
Master节点脚本: #!/bin/sh#使用系统的PATH环境export PATH=`echo $PATH` #停止firewall防火墙,并禁止开机自启动 systemctl stop fir ...
- HTML基础知识自学教程
HTML 是用来描述网页的一套标记标签,是我们在web前端开发中的基础.下面PHP程序员雷雪松主要结合自己的经验给大家分享下HTML的基础知识,以及在自学过程中一些比较常用的和重要的HTML知识点. ...
- Windows安装多个版本JDK如何切换
本人电脑同时安装了jdk1.7和1.8,以下时切换jdk版本的方式: 1.修改环境变量: 2.修改注册表: 打开HKEY_LOCAL_MACHINE\SOFTWARE\JavaSoft 分别修改Jav ...
- LeetCode.1160-找到可以由给定字符组成的字符串(Find Words That Can Be Formed by Characters)
这是小川的第411次更新,第443篇原创 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第262题(顺位题号是1160).你会得到一个字符串单词数组和一个字符串chars.如果字符串可 ...
- import、from 模块 import*、reload
import 模块名.from 模块名 import* 均为导入模块,前者调用模块中函数或者变量时需要添加引用,即模块名.调用函数或者变量名 具体用法见下 https://jingyan.baidu. ...
- SpringBoot使用AOP获取请求参数
最近试了下拦截controller方法查看请求参数,方式如下: package com.*.aop; import com.alibaba.fastjson.JSON; import com.alib ...
- 机器学习笔记——模型调参利器 GridSearchCV(网格搜索)参数的说明
GridSearchCV,它存在的意义就是自动调参,只要把参数输进去,就能给出最优化的结果和参数.但是这个方法适合于小数据集,一旦数据的量级上去了,很难得出结果.这个时候就是需要动脑筋了.数据量比较大 ...
- Cocos2d-x_初探_第一次配置与HelloWorld
此前多久,忘了,反正就是打通关泡泡龙以后.YY君向我推荐了这个(如题).一查资料,诶.还挺有意思的,那我就去下一个玩玩吧. 资料下载清单: 1.Android-ndk 2.Android-sdk 3. ...
- Hbase概述
一.HBASE概述 Hadoop Database NoSQL 面向列 提供实时更新查询 .... 是一个高可靠性 高性能 面向列 可伸缩的分布式存储系统 利用hbase技术可以在廉价的PC ...