百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

点过的网页会变色?没错,这玩意把你的浏览记录漏光了

zhezhongyun 2025-05-23 21:30 4 浏览

提起隐私泄露这事儿,托尼其实早就麻了。。。平时网购、换手机号、注册各种账号之类的都会咔咔泄露,根本就防不住。

但托尼真是没想到,浏览器里会有一个看起来完全人畜无害的功能,也在偷偷泄露我们的个人隐私,而且这一泄露就 23 年。。。

这个功能我保证大家都用过。不知道各位差友们有没有这种印象,初中上微机课那会儿,当同学们满怀激动的心情打开 4399 ,一眼就能看出上一波上课的玩了什么游戏 —— 就看游戏的链接有没有变紫,链接变紫了,说明这个页面前不久刚打开过

不光是 4399 啊,这个贴心的小功能其实广泛存在于各大网页里,就比方说我在搜索引擎里打开了差评的官网,回退后就能发现链接的颜色变成了紫色,本质上是提醒你:“ 你之前打开过这个网页了哦!” 能让你浏览信息的效率变得更高。

对,别怀疑,泄露隐私的就是这么个不起眼的小功能。

在聊这玩意为啥能泄露隐私之前,咱们不妨先来扒一扒这个功能是怎么做到让浏览过的网页链接变色的。

我们知道,一个网页要想好看,排版必须得合理,这就要用到一个叫 “ CSS 语言 ” 的东西了。它能定义网页的字体、颜色、间距、对齐方式这些视觉元素,改善用户的视觉体验。

这个链接变紫的操作,就是这个 “ CSS ” 根据浏览器历史文件,把浏览过的链接标记为 “ :visited ”,然后再把颜色设置为 “ purple ”,代码大概是这样。

这样一来,浏览过的网页链接都会被 CSS 打上标签、变更样式,跟没浏览过的网页区分开来

然后问题就出现了:因为这个 “ :visited ” 是一个全局列表,假设你在 “ 差评 ” 网站上访问了 “ 火锅 ” ,那 “ 火锅 ” 的链接会变紫色对吧;但紧接着,如果你访问了一个名叫 “ 好评 ” 的山寨网站,里头也有一个同样的 “ 火锅 ” 链接,这个链接也将会是紫色。

这样一来好评也知道你撸过火锅了。

浏览器只认历史记录里的链接,压根儿不管你是在哪儿看过的这个链接。

那么如果有一个恶意网站,里边内嵌了很多很多链接,那么理论上网站的管理者只需要利用这个漏洞,读取你页面上的 CSS 信息,就能知道你之前浏览过哪些链接。

我知道这会儿肯定有人会说了,不就是个浏览历史吗,泄露了就泄露了呗,对面难不成还能拿这个卖钱?

还。。。真能卖点钱,对于某些领域来说,这种信息还是挺有价值的

依靠这个漏洞,老板能看到自己的员工有没有偷偷摸鱼刷 Boss 直聘、卖车的销售能看到你都考虑过哪些竞品、甚至哪儿不舒服搜过什么症状,卖保健品的都能给你精准推送一波。

单说这些其实还好,最多就是烦人一点,但这种信息要是收集的多了,就能跟特定的身份联系起来,识别出你是谁。

就比如说最早用来读取用户网页上 CSS 信息的办法,是一个叫做 “ getComputedStyle() ” 的 JavaScript 函数,每分钟可以测试几十万个链接。按照这样的速度,可以快速、大量破解用户的历史记录,这种体量的数据一旦暴露,这就真是实名制上网了

最令托尼担忧的是托尼在刷相关事例的时候还发现了一个已经挂了很久的网站,宣称让你的兄弟打开这个页面上的链接,就能看到你兄弟曾经看过什么淘气页面。

还好已经挂了。

不知道屏幕前多少差友捏了一把冷汗,反正我是没有。

而这么危险浅显的一个漏洞,最早在 2002 年就被一个名叫 David Baron 的开发者发现并上传,迄今已经过去 23 年之久了。。。

它为啥能活这么久呢?中间就没有人想去解决这个问题吗?

有的朋友,有的,但效果都不理想。

就比如说针对上面提到的那个 “ getComputedStyle() ” 函数,有些浏览器就进化了,会对网站 “ 撒谎 ” ,将所有链接都看作是未访问过的。

后来也有一些对网站可用样式做限制的方案,直接把紫色链接的显示禁止掉了。

但这些要么影响性能和兼容性,要么总是被黑客找办法绕了过去。。。大家就这样缝缝补补了好多年,也只能对这个漏洞起一些缓解的作用,没法彻底解决。

最后 Chrome 团队都摆烂了,直接把用户反馈上来的相关问题标为 “ 无法解决 ” 。

不过这场闹剧也许终于要结束了。根据 Google 软件工程师 Kyra Seevers 的说法,这个漏洞已经在今年4月份 Chrome 136 版本中得到解决了。

那这回 Google 是怎么解决掉这个陈年积案的呢?托尼研究了一下 Kyra Seevers 发的这篇博客文章,发现他们给浏览记录整了个分区。

这个分区分为三个部分:链接网址,顶级网站和框架源,浏览器在记录浏览历史的时候会同时记录下这三个部分的信息。我们先不讨论这个 “ 框架源 ” ,还是用之前差评和火锅的例子给大家捋捋。

大家在 “ 差评 ” ( 顶级网站 ) 上打开 “ 火锅 ” ( 连接网址 ),火锅的链接会变紫;而这回山寨 “ 好评 ” 上的 “ 火锅 ” 链接就不会跟着变紫了,因为它们有不一样的顶级网站。

而这个 “ 框架源 ” 则是为了兼顾更多的场景,因为有的时候网站会内嵌一个其他网站的页面,里边也可能会有链接,这就也得做一个区分。

比如我们在 “ 差评 ” 内嵌的 “ 高德地图 ” 页面( 框架源 )里点击了 “ 火锅 ” 链接,它会变紫;但 “ 差评 ” 内嵌的 “ 百度地图 ” 页面上同一个 “ 火锅 ” 链接就不会变紫,因为它们的框架源不同。

当这个分区启用了之后,这个 “ :visited ” 历史记录就不再是所有网站都能查询的全局列表了,而会根据这三个分区去判断你到底是不是头一回儿访问这个链接,中间只要有一个分区对不上,CSS 就不会给链接标记 “ :visited ”,颜色样式也不会有变化。

好兄弟再不会知道你看了什么淘气页面了!如果一切顺利,等到月底 Chrome 浏览器更新 136 版本,这个长达 23 年,通过链接变色泄露隐私的抓马漏洞终于要落下帷幕了。

所以托尼的朋友们从此可以高枕无忧了吗?还不行,相关隐私泄露的风险依旧存在,而且岁数这么大的漏洞也屡见不鲜。。。

这次托尼在查相关资料的时候,发现了一篇 2000 年的论文,论文中讨论了一种针对网络隐私的时序攻击方式,大概的原理是网站通过你页面加载的时间,判断你之前有没有对页面内容进行缓存,进而推测你之前是否访问过这个页面。

不得不说,人类为了达成某种目的,真的是什么歪门邪道都能想得出来。。。。

而现如今,这个 25 岁高龄的漏洞也没有被彻底解决,时序攻击的依据也从缓存加载时间进化到渲染矢量图的时间,道高一尺魔高一丈

这事儿去年还被拿出来讨论过


除了这些攻击, Google 在这次还在 Github 关于浏览器历史分区技术的解释页面,贴心为我们总结了一批专门攻击浏览器历史记录的漏洞,看着长长这一条,托尼说不焦虑是假的。

聊了这么多,托尼知道很多人仍然对于 “ 浏览器历史记录 ” 这种程度的隐私泄露不以为然。

可托尼想说,现在的情况跟 20 几年前已经完全不同了,互联网已经成了大家生活中不可或缺的一部分,网上的信息也承载着越来越重的意义,而且任何隐私都本不该被泄露。

见微知著,都 2025 年了,如果连一个浏览器历史记录都管不好的话,怎么能让大家放心在网上冲浪呢?

相关推荐

历时10个多月,学习了这132 个CSS 特效,还不来学习

这132个特效,是我历时10个多月在油管一个一个跟着敲出来的,为了加强记忆,每个练习,我都录制了视频,在这里分享出来给大家。大家可能又会调侃了,你是工作不饱和吧,有时间做这些。其实,我目前工作还是挺饱...

让CSS flex布局最后一行左对齐的N种方法

作者:张鑫旭https://www.zhangxinxu.com/wordpress/2019/08/css-flex-last-align/前言小伙伴们是否还记得,之前小编也发布了几篇关于CSS相关...

CSS 奇思妙想 background-clip

作者:SbCoco来源:iCSS前端趣闻说起background-clip,可能很多人都很陌生。Clip的意思为修剪,那么从字面意思上理解,background-clip的意思即是背景裁剪。我...

CSS简单圆角框实现方法

先看下效果图对基于CSS的设计最初的批评意见之一是CSS太死板了,只能建立方框,因此本次我们需要用图形软件创建下面两个图形,一个用于顶部,一个用于底部。接下来我们详细介绍它的实现方法:1.创建一个简单...

文档声明:HTML文档的基石

在前端开发的世界里,文档声明虽是一个看似不起眼的细节,却在网页的解析和渲染过程中扮演着至关重要的角色。今天,就让我们深入探讨文档声明的奥秘,揭开它背后的原理和重要性。一、文档声明的定义与作用文档声明,...

CSS 单位指南

在前端开发中,CSS单位的选择直接影响着页面的布局效果和响应式表现。本文将系统介绍CSS中各种单位的特性、使用场景和最佳实践,帮助你做出更明智的选择。一、CSS单位分类全景图CSS单位可分为...

CSS3 遮罩

在网页设计中,我们经常需要实现一些特殊的视觉效果来增强用户体验。CSS3遮罩(mask)允许我们通过控制元素的可见区域来创建各种精美的视觉效果。本文将带你全面了解CSS3遮罩的功能和应用。什么是...

用css如何实现三角形

在实际编程中我们经常会遇到下拉菜单的下三角和一些特殊的图形,那么这些如何用css来实现呢?例1例2例3原理:仔细想想,原理非常简单,利用CSS的border以及它的属性值transparent来实现三...

css 实现各种多边形图案

使用css的border边框属性和宽度高度可以实现各种形状的图形,如下:梯形html:<divclass="trapezoid"></div>css:/*梯形...

用css制作头像渐变边框

之前有一个头像渐变边框的需求,当时是全部用的切图,但是不同的地方可能头像大小不一样,切图适配性太差,正好这几日学了下css渐变的各种妙用,想到之前的头像边框其实可以用渐变来实现。当时用到的头像切图:目...

如何帮图片加边框?方法有三种

如何帮图片加边框?随着社会经济的发展,更多人开始注意外在物品的美观度,例如图片有无边框等装饰。而在设计和排版中,给图片加边框是一种常见的技巧,可以使图片更突出、更有吸引力。有许多方法可以完成这个任务,...

边框图片怎么做?提供三种方法

边框图片怎么做?边框图片可以为图片增加一定的装饰和美感,使其更加突出和引人注目。同时,边框图片也可以用于设计海报、宣传品等,让设计更加精美和专业。边框图片是一种常见的设计元素,可以为图片增加一定的装饰...

css设置div只显示某一边的边框

在网页设计中经常用到css来设计各种边框样式以及颜色等,有时候需要一个div只显示一个边框,那么你可能会用到下面的一些方法。一、CSSborder-width属性border-width是实现显示...

适合在任何地方使用的 Linux:15 个小型 Linux 发行版

如果你有一台老旧的PC或超小型设备,这些Linux发行版中的一个应该适合你。来源:https://linux.cn/article-12281-1.html作者:DavidGewirtz译者...

css box-shadow的巧妙应用

还有人不会写阴影吗下面就带大家来分享一些实实在在的干货。box-shadow的作用box-shadow的作用是给元素添加阴影,说简单点就是要给元素阴影特效就用box-shadow就行。box-shad...