博文作者:rices
发布日期:2014-07-28
阅读次数:4120
博文内容:
【前言】
一 般情况下,网站或者广告联盟都会非常想要一种技术方式可以在网络上精确定位到每一个个体,这样可以通过收集这些个体的数据,通过分析后更加精准的去推送广 告(精准化营销)或其他有针对性的一些活动。Cookie技术是非常受欢迎的一种。当用户访问一个网站时,网站可以在用户当前的浏览器Cookie中永久 植入一个含有唯一标示符(UUID)的信息,并通过这个信息将用户所有行为(浏览了哪些页面?搜索了哪些关键字?对什么感兴趣?点了哪些按钮?用了哪些功 能?看了哪些商品?把哪些放入了购物车等等)关联起来。
而 随着网民对个人隐私的重视,Cookie越来越不受待见。不少安全工具甚至是浏览器都开始允许或引导用户关闭Cookie功能,比如很多主流浏览器都有一 个“隐私模式浏览”功能。这样以来,网站就很难追踪用户行为了。但仍然有一些方法可以让网站去追踪每一个访问者的行为,比如通过flash cookie的方式也可以达到唯一标识和追踪的目的。
笔 者近期注意到,国外媒体报道了一种非常难以摆脱的新型在线追踪工具被用来尾随从白宫官网到xx网站xx.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
相关推荐
获取浏览器唯一识别,代替cookie的一些解决方案,通过帆布指纹识别
微软研发用户追踪新技术欲取代cookie.docx
Web客户端追踪,主要是指用户使用客户端(通常是指浏览器)访问Web网站时,Web服务器通过一系列手段对用户客户端进行标记和识别,进而关联和分析用户行为的技术。 实际上,只要通过Web进入互联网的海洋,Web客户端...
cookie-2.0 :cookie: :cookie: :cookie: :cookie: :cookie: :cookie: :cookie: :cookie: :cookie:
项目名称:Cookie版人员管理系统。 使用技术:servlet+jsp+mysql+Cookie技术
更多隐私,更好的浏览 厌倦了有针对性的广告,他们神秘地知道您在网上购物了哪些产品?使用Cookie保护您的隐私。 macOS 10.14(建议使用Catalina)
C# cefsharp 多账号同时登陆,设置cookie隔离,修改部分浏览器指纹,源码仅供学习交流,后续可以加自动加购和不惧反爬虫等操作
网站性能优化攻略内容简介:《实用负载均衡技术:网站性能优化攻略》介绍了处理负载均衡问题的相关概念和工具,说明了如何避免性能退化和服务器上的服务突然崩溃的风险,阐述了单个服务器以及可以执行cookie插入或者...
:cookie: Vue CLI 3/4插件,用于处理浏览器cookie 安装 使用vue-cli或vue-cli UI添加cookie插件。 import和.use()将自动添加到main.js中 vue add cookie 用法示例 获取一个cookie this . $cookie . get ( 'jwt_...
Cookies的处理 作用 ...如果在请求的过程中产生了cookie,如果该请求使用session发起的,则cookie会被自动存储到session中. 案例 爬取雪球网中的新闻资讯数据:https://xueqiu.com/ #获取一个sessi
var cookie = Cookie . parse ( header ) ; cookie . value = 'somethingdifferent' ; header = cookie . toString ( ) ; var cookiejar = new tough . CookieJar ( ) ; cookiejar . setCookie ( cookie , '...
上章:主要介绍一下背景和Cookie。 博客链接:https://blog.csdn.net/qq_41895003/article/details/130448214 最通俗的关于Cookie, Session,Token和JWT的相关笔记和理解。在上章笔记中主要介绍一下背景和Cookie。...
浏览器指纹追踪类似人的外貌和指纹,Web客户端(这里主要指浏览器)也有多种“外貌”信息和“指纹”信息,将这些信息综合分析计算后,可对客户端进行唯一性识别,进而锁定、追踪、了解网民行为和隐私数据。
真棒书签:书签“利器”收集:cookie::popcorn:Wiki在线阅读:backhand_index_pointing_right:
Cookie_Site Cookie网站 CSS来源: soruce: 来源:
小程序原生的 request 网络请求接口并不支持传统的 Cookie,但有时候我们现有的后端接口确于依赖 Cookie(比如服务器用户登录态),这个库可用一行代码为你的小程序实现 Cookie 机制,以保证基于 cookie 的服务会话...
Cookie横幅 一个可定制的jQuery插件,用于添加横幅和阻止脚本,符合EU Cookie法。 包括文件 <!-- Cookie Banner core CSS file --> < link rel =" stylesheet " href =" cookie-banner.css " > <!--...
$.cookie('the_cookie'); // 获得cookie $.cookie('the_cookie', 'the_value'); // 设置cookie $.cookie('the_cookie', 'the_value', { expires: 7 }); //设置带时间的cookie $.cookie('the_cookie', '', { expires:...
类型: object :表示以日期和时间表示的cookie的最长生存期 :表示Cookie的最长生存期,以秒数表示 :指定将向其发送Cookie的那些主机 :每个cookie的范围仅限于一组路径 :将Cookie的范围限制为“安全”渠道...
简单的Cookie选择仅适用于Javascript。 压缩后只有3.3kb。 此插件可帮助您创建横幅或对话框,以根据规则接受或拒绝条款。演示版设置将脚本包含到您的网站中< script src =" simple-cookie-choices.min.js " > ...