初探Web客户端追踪技术

果子有想法

这是第 321篇不掺水的，想要了解更多，请戳下方卡片关注我们吧～初探Web客户端追踪技术http://zoo.zhengcaiyun.cn/blog/article/webclient前言案例1当我们首次浏览网站时，在网页的下方位置经常会出现提示，询问是否允许使用 Cookie 来提供服务和流量。为了不被挡住浏览的内容，我们经常会下意识地点击“接受”，然后继续浏览。看似无害而有害增强你在这个网站上的体验的操作，然而很多人没有意识到，当你点下按钮后，网站会塞给你一块饼干（Cookie），接着用这个饼干来换取你的相关信息，甚至能追踪你在网站上的足迹。例如你在当前页面语言选择了“中文”，那么下次再进入到这个网站时，会默认帮你选择“中文”语言。2488387931.jpg案例2在某个网站登录账号时，用户有时候会忘记密码，输入多次后触发了网站的风险机制（如验证码校验），这个时候用户换了另外一个账号登录，然而对于新的账号登录，网站仍然会让当前设备用户处于风险机制中。其原因之一便是你的设备指纹在当前某个时间段内被列入风险用户名单中，在这段时间内，你会持续地触发风险机制。20230213100234.jpg常见追踪技术Cookie追踪Cookie 是很多网站用于追踪用户行为的手段，服务端会在 HTTP/HTTPS 的响应头部返回 Set-Cookie 字段，浏览器将其自动保存。对于属于当前网站的 Cookie 的所属域（Domain）中，又可以分为第一方 Cookie（以自身网址后缀存储）和第三方 Cookie（以非自身网站后缀存储）。2301781751.jpg当我们在微博上浏览新闻资讯，这个时候可以会刷到某购物网站内嵌的广告，这时候浏览器会同时存在微博和该购物网站的 Cookie ，并且还会惊讶地发现，微博给我们推送的资讯和推荐的广告都符合我们近期浏览的相关内容，这个时候我们便清楚，原来我们的访问行为已经被分析计算出来。第一方 Cookie第一方 Cookie 常指的是由当前用户访问的域生成的 Cookie。当你使用账号登录后，网站会返回属于你的 Cookie，该 Cookie 的所属域是属于当前网站的，Cookie 中还记录着关于你身份的相关信息。使用明确身份在某宝PC购物网站上搜索了“充电器”，用相同的用户登录移动端APP，会得到相似类型的推荐。1606075787.jpgimage-20221120170035193_副本.png第三方 Cookie第三方 Cookie 常指某个 Cookie 的域并不是当前所访问网站的域，一般通过 JS 脚本，图片链接和 iframe 等技术生成。常见的有：广告网络商。如熟悉的 Google Adsense(https://adsense.google.com/start/)，谷歌通过它们识别大量用户行为，在多个网站中进行广告投放；大平台下拥有多个子平台，进行某些用户数据跟踪。如上购物网站，无论是 PC 还是移动端，都源于是同一个平台，即相同域下面。而第三方 Cookie 针对的是不同域下的平台，去预判用户行为和推荐用户的商品。如果在上述购物网站旗下的另一平台上，也对应着推送用户曾经浏览的商品。image-20221120170704254.pngFlash Cookie我们常说的 Cookie 一般都是指基于浏览器的 HTTP Cookie。可想，一台用户电脑上安装了多个浏览器，虽然登录的身份是同一个用户，但是却对应着多个 HTTP Cookie，且 HTTP Cookie 存在着过期时间和存储大小限制，所以Cookie 存在着被自动销毁的场景，这个时候 Flash Cookie 技术便可以解决这些问题。Flash Cookie 顾名思义即通过 Flash 插件来实现本地存储 Cookie，也称之为 Share Object。尽管各个不同的浏览器是隔离的，但是每个浏览器都可以通过Flash 获取 Cookie，除非人为主动去删除，否则 Cookie 可以被持久存储在本地共享对象中。提及 Flash Cookie，不得不提到 Evercookie 技术。该技术于 2010 年十大黑客技术排行榜中位居第二。Evercookie 使用不同的存储技术将 Cookie 缓存在浏览器、系统中，其中包含着 HTTP Cookie， HTML5 的 LocalStorage/ SessionStorage/globalStoage，Flash Cookie 等多种技术，在用户清除了浏览器 Cookie 数据之后仍能将数据重新恢复。但随着各大浏览器不支持 Flash 技术，Flash Cookie 技术也随着不攻自破。浏览器指纹追踪上述的 HTTP Cookie 和 Supper Cookie 都有可能存在着被删除或者禁用的风险，并且随着广告拦截器和 Cookie 清除工具越发高明，单单 Cookie 这项技术就不似那么稳妥了，于是众人又将目光投向浏览器指纹。浏览器指纹是通过对多种特征信息综合分析计算后，生成无状态的客户端指纹，指纹具有唯一性，能够被识别、追踪用户行为和隐私数据。浏览器的基本特征所有浏览器应该具备的特征信息称之为浏览器的基本特征其中包含浏览器信息，计算机信息，硬件信息等，这些特征信息综合后得出的指纹仍然会存在相同的碰撞，所以尽管基本特征已经够多，但仍然无法确定用户的身份，还需要更多的信息来参与计算得出最终唯一的指纹。查看当前浏览器的相关信息(https://www.whatismybrowser.com/)。特征信息获取方式浏览器中的浏览器扩展/插件IE: ActiveXObject非IE: window.navigator.plugins浏览器是否执行 JavaScript 脚本script标签中判断脚本是否执行浏览器是否接受各种 Cookie 和Supper Cookie的信息window.navigator.cookieEnabled浏览器是否发送 Do Not Track 标头window.navigator.doNotTrack浏览器是否支持触屏document.hasOwnProperty("ontouchstart")浏览器语言window.navigator.languageuser-Agentwindow.navigator.userAgent时区偏移量new Date().getTimezoneOffset()地区经纬度HTML5 Geolocation操作系统window.navigator.platform屏幕信息window.screenb2b3硬件指纹音频指纹：AudioContext利用设备音频设置，把播放音频文件的方式模拟成一个正弦函数，再把正弦函数转化成哈希函数，作为附加熵，结合浏览器的基本特征信息，生成音频指纹。使用 HTML5 AudioContext API 进行指纹识别，AudioContext 指纹是计算机音频堆栈本身的属性，并不会收集计算机播放和录制的声音。1393337913.jpgCanvas 指纹使用 HTML5 提供的 Canvas API 绘制隐藏元素图片，相同的 Canvas 代码在不同的计算机上绘制出的结果也会出现差异，尽管在肉眼上很难看出区别。这是因为浏览器、操作系统、GPU 和图形驱动器任一设备的不同，都会导致绘制图画时渲染的方式不一样，而这恰恰是指纹的唯一识别。1054475719.jpgWebRTC 指纹浏览器提供 WebRTC 功能，通过 UDP 协议建立连接，从而获取到公共 IP 地址、本地 IP 地址和媒体设备（如摄像头、麦克风）的数量及其哈希值。由于是通过 UDP 协议，所以即便是使用了代理，网站也能够获取到真实的公共和本地 IP 地址。3970425793.jpgWebGL 指纹WebGL 是一个 JavaScript API,可在任何兼容的 Web 浏览器中渲染高性能的交互式 3D 和 2D 图形。不同组合的硬件设备会将该图形转换成唯一的hash值 综合指纹分析计算指纹的方法还有许多，以上四种巧妙的方法仍然会出现指纹碰撞的几率。但通过各种综合计算出哈希值的指纹，能够提高它的唯一性。目前已有开源的浏览器指纹库(https://github.com/fingerprintjs/fingerprintjs) ，可查询浏览器属性并从中计算出哈希值，生成浏览器指纹。防范措施无痕浏览器目前基本主流浏览器都支持无痕模式，但是只能拦截住一部分的浏览器追踪痕迹。禁用 JavaScript 和 Cookie此方法乃为杀敌一千自损八百，前端大多主流的框架都是由 JavaScript 加载执行渲染，禁用 JavaScript 可能会导致页面异常。但是可以通过禁用第三方的 JavaScript 和 Cookie，但是仍需慎用禁用 WebRTC 和 Geolocation通过浏览器的设置，禁用 WebRTC 和 Geolocation，但是此行为也会影响部分网站的体验。使用防追踪浏览器候鸟浏览器 (https://www.ehouniao.com/) 通过欺骗站点所能够获取到的参数，修改数字指纹，使得网站读取的与你真实的指纹不同，从而达到防追踪的目的。结论浏览器的追踪技术是一把双刃剑，它建立了用户个人信息和网站之间的连接，合理地使用能够大大提高用户的体验，但是同时也存在着隐私泄漏。此前，谷歌和亚马逊均因违规使用 Cookie 而面临着巨额罚单，315 晚会上也多次曝光多家互联网公司窃取侵犯用户隐私信息。尽管这些都骇人听闻，但在国际上大部分国家抓取 Cookie 并不违法，只要合理使用，用户也不用过分恐慌，毕竟无论是 Cookie 还是浏览器指纹能提供的用户信息相对有限。尊重科学精神，提倡文明上网。参考文献flash cookie - 百度百科硬件指纹 (https://docs.multilogin.com/l/zh/article/aJHHdYrdmY-audio-context)浏览器指纹解读 (https://blog.51cto.com/lixi/5377134)WebGL (https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API#%E6%8C%87%E5%8D%97%E5%92%8C%E6%95%99%E7%A8%8B)看完两件事如果你觉得这篇内容对你挺有启发，我想邀请你帮我两件小事1.点个「在看」，让更多人也能看到这篇内容（点了「在看」，bug -1 ）2.关注公众号「政采云技术」，持续为你推送精选好文招贤纳士政采云技术团队（Zero），包含前端（ZooTeam）、后端、测试、UED 等，Base 在风景如画的杭州，一个富有激情和技术匠心精神的成长型团队。政采云前端，隶属于政采云研发部。团队现有 90 余个前端小伙伴，平均年龄 27 岁，近 3 成是全栈工程师，妥妥的青年风暴团。成员构成既有来自于阿里、网易的“老”兵，也有浙大、中科大、杭电等校的应届新人。团队在日常的业务对接之外，还在物料体系、工程平台、搭建平台、性能体验、云端应用、数据分析及可视化等方向进行技术探索和实战，推动并落地了一系列的内部技术产品，持续探索前端技术体系的新边界。如果你想改变一直被事折腾，希望开始能折腾事；如果你想改变一直被告诫需要多些想法，却无从破局；如果你想改变你有能力去做成那个结果，却不需要你；如果你想改变你想做成的事需要一个团队去支撑，但没你带人的位置；如果你想改变既定的节奏，将会是“5 年工作时间 3 年工作经验”；如果你想改变本来悟性不错，但总是有那一层窗户纸的模糊… 如果你相信相信的力量，相信平凡人能成就非凡事，相信能遇到更好的自己。如果你希望参与到随着业务腾飞的过程，亲手推动一个有着深入的业务理解、完善的技术体系、技术创造价值、影响力外溢的前端团队的成长历程，我觉得我们该聊聊。任何时间，等着你写点什么，发给 ZooTeam@cai-inc.com