HTML5 + JS 网站追踪技术:帆布指纹识别 Canvas FingerPrinting Universally Unique Identifier,简称UUID
1
1
1
HTML5 + JS 网站追踪技术:帆布指纹识别 Canvas FingerPrinting
1
一般情况下,网站或者广告联盟都会非常想要一种技术方式可以在网络上精确定位到每一个个体,这样可以通过收集这些个体的数据,通过分析后更加精准的去推送广告(精准化营销)或其他有针对性的一些活动。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
1
1
1
1
1
1
1
1
HTML5 + JS 网站追踪技术:帆布指纹识别 Canvas FingerPrinting Universally Unique Identifier,简称UUID的更多相关文章
- [转]取代cookie的网站追踪技术:”帆布指纹识别”初探
[前言] 一般情况下,网站或者广告联盟都会非常想要一种技术方式可以在网络上精确定位到每一个个体,这样可以通过收集这些个体的数据,通过分析后更加精准的去推送广告(精准化营销)或其他有针对性的一些活动.C ...
- 帆布指纹识别(canvas fingerprinting)
广告联盟或许网站运营者都希望能够精准定位并标识每一个个体,通过对用户行为的分析(浏览了哪些页面?搜索了哪些关键字?对什么感兴趣?点了哪些按钮?用了哪些功能?看了哪些商品?把哪些放入了购物车等等),为用 ...
- FingerprintJS - 在浏览器端实现指纹识别
FingerprintJS 是一个快速的浏览器指纹库,纯 JavaScript 实现,没有依赖关系.默认情况下,使用 Murmur Hash 算法返回一个32位整数.Hash 函数可以很容易地更换. ...
- 基于HTML Canvas实现“指纹识别”技术
https://browserleaks.com/canvas 说明所谓指纹识别是指为每个设备标识唯一标识符(以下简称UUID).诸如移动原生的APP都可以通过调用相关设备API来获取相应的UUID. ...
- 网站指纹识别工具——WhatWeb v0.4.7发布
WhatWeb是一款网站指纹识别工具,主要针对的问题是:“这个网站使用的什么技术?”WhatWeb可以告诉你网站搭建使用的程序,包括何种CMS系统.什么博客系统.Javascript库.web服务 ...
- [Web][高中同学毕业分布去向网站+服务器上挂载]二、敲定思路与方向(HTML5+JS(JQuery+ECharts))
高中同学毕业分布网站:敲定思路 一.背景 第一集:http://www.cnblogs.com/Twobox/p/8368121.html 中大体确定了自己的 大体目标.大体思路. 但是 . 在今天的 ...
- 网站指纹识别工具Whatweb的使用
目录 whatweb 一些常见的Whatweb的扫描 常规扫描 批量扫描 详细回显扫描 扫描强度等级控制 快速本地扫描(扫描内网的主机) 将扫描结果导出至文件内 whatweb whatweb 是ka ...
- Node.js 应用全链路追踪技术——[全链路信息获取]
全链路追踪技术的两个核心要素分别是 全链路信息获取 和 全链路信息存储展示. Node.js 应用也不例外,这里将分成两篇文章进行介绍:第一篇介绍 Node.js 应用全链路信息获取, 第二篇介绍 N ...
- WAF指纹识别和XSS过滤器绕过技巧
[译文] -- “Modern Web Application Firewalls Fingerprinting and Bypassing XSS Filters” 0x1 前言 之前在乌云drop ...
随机推荐
- python(pymysql操作数据库)
第一种方式 import pymysql # 打开数据库连接 db = pymysql.connect(host="192.168.88.11", user="root& ...
- Ajax编程基础
目录 Ajax编程基础 传统网站中存在的问题 Ajax概述 Ajax的应用场景 Ajax的运行环境 Ajax运行原理及实现 Ajax运行原理 Ajax的实现步骤 1.创建Ajax对象 2.告诉Ajax ...
- spark join 广告用户特征 与广告特征的 join 拿到训练集
spark join 广告特征做广播
- assets和static的区别
相同点:assets和static两个都是存放静态资源文件.项目中所需要的资源文件图片,字体图标,样式文件等都可以放在这两个文件下,这是相同点不相同点:assets中存放的静态资源文件在项目打包时,也 ...
- IdentityServer4之Implicit和纯前端好像很配哦
前言 上一篇Resource Owner Password Credentials模式虽然有用户参与,但对于非信任的第三方的来说,使用这种模式是有风险的,所以相对用的不多:这里接着说说implicit ...
- 踹树(Trie 字典树)
Trie 字典树 ~~ 比 KMP 简单多了,无脑子选手学不会KMP,不会结论题~~ 自己懒得造图了OI WIKI 真棒 字典树大概长这么个亚子 呕吼真棒 就是将读进去的字符串根据当前的字符是什么和所 ...
- SpringCloud及其组件详解
SpringCloud及其组件详解 1.Spring Cloud 1.1 Spring Cloud和Dubbo的区别图解 1.2 微服务的技术栈 2.Spring Cloud 概述 2.1 Sprin ...
- Spring3文件上传,提速你的Web开发
Spring1 推出的时候可以说是不小的颠覆了J2EE 的开发,彻底把EJB打败,将J2EE开发进行简化,Spring2 推出以后完美的与多种开源框架与服务器的结合,让你对其拥抱的更紧,Spring变 ...
- 【从零开始撸一个App】RecyclerView的使用
目标 前段时间打造了一款简单易用功能全面的图片上传组件,现在就来将上传的图片以图片集的形式展现到App上.出于用户体验考虑,加载新图片采用[无限]滚动模式,Android平台上我们优选Recycler ...
- P2801 教主的魔法 (分块)
题目传送 长度为\(n(n\le 1000000)\)的数组,\(q(q\le 3000)\) 次操作.修改操作即将某个区间的值增加某个不大于1000的值,查询操作即查询某个区间比C大于等于的数有多少 ...