最近一段時間，關於 通過 CSS 建立 “keylogger”（鍵盤記錄器） 的討論很多。
有些人呼籲瀏覽器廠商去“修復”它。有些人則深入研究，表示它僅能影響通過類 React 框架建立的網站，並指責 React。而真正的問題卻在於認為第三方內容是“安全”的。
第三方圖片
|
1 |
<img src="https://example.com/kitten.jpg"> |
如果我將上述程式碼引入我的檔案中，即表示信任 example.com。對方可能會刪除資源，給我一個 404，導致網站不完整，從而破壞這種信任關係。或者，他們可能會用其他非預期的資料來替代小貓圖片的資料。
但是，圖片的影響僅限於元素本身的內容區域。我可以向使用者解釋並希望使用者相信，“此處的內容來自 example.com，如果它有誤，則是原站點的問題，並不是本站造成的”。但這個問題肯定不會影響到密碼輸入框等內容。
第三方指令碼
|
1 |
<script src="https://example.com/script.js"></script> |
與圖片相比，第三方指令碼則有更多的控制權。如果我將上述程式碼引入我的檔案中，則表示我賦予了 example.com 完全控制我的網站的許可權。該指令碼能：
- 讀取/修改頁面內容。
- 監聽使用者的所有互動。
- 執行耗費大量計算資源的程式碼（如 cryptocoin 挖礦程式）。
- 通過向本站發請求，這樣能附帶使用者的 cookie，轉發響應。
（譯註：盜取使用者的 cookie 及其他資料） - 讀取/修改本地儲存。
- ……可以做任何對方想做的事情。
“本地儲存”非常重要。如果指令碼通過 IndexedDB 或快取 API 發起攻擊，則即使在刪除指令碼後，攻擊仍可能在整個站點內繼續存在。
如果你引入了其他站點的指令碼，則必須絕對相信對方及對方的防護能力。
如果你遭到惡意指令碼的攻擊，則可設定 Clear-Site-Data header（清空站點資料響應頭） 清除站點所有資料。
第三方CSS
|
1 |
<link rel="stylesheet" href="https://example.com/style.css"> |
相比圖片，CSS 在能力上更接近指令碼。像指令碼一樣，它適用於整個頁面。它可以：
- 刪除/新增/修改頁面內容。
- 根據頁面內容發起請求。
- 可響應多種使用者互動。
雖然 CSS 不能修改本地儲存，也不能通過 CSS 執行 cryptocoin 挖礦程式（也許是可能的，只是我不知道而已），但惡意 CSS 程式碼仍然能造成很大的損失。
鍵盤記錄器
從引起廣泛關注的程式碼開始講起：
|
1 2 3 |
input[type="password"][value$="p"] { background: url('/password?p'); } |
如果輸入框的 value 屬性值以 p 結尾，上述程式碼將會向 /password?p 發起請求。每個字元都可觸發這個操作，通過它能獲取到很多資料。
預設情況下，瀏覽器不會將使用者輸入的值儲存在 value 屬性中，因此這種攻擊需要依賴某些能同步這些值的東西，如 React。
要應對這個問題，React 可用另一種同步密碼欄位的方式，或瀏覽器可限制那些能匹配密碼欄位屬性的選擇器。但是，這僅僅是一種虛假的安全。你只解決了在特殊情況下的該問題，而其他情況依舊。
如果 React 改為使用 data-value 屬性，則該應對方法無效。如果網站將輸入框更改為 type="text"，以便使用者可以看到他們正在輸入的內容，則該應對方法無效。如果網站建立了一個 <better-password-input> 元件並暴露 value 作為屬性，則該應對方法無效。
此外，還有很多其他的基於 CSS 的攻擊方式：
消失的內容
|
1 2 3 4 5 6 7 |
body { display: none; } html::after { content: 'HTTP 500 Server Error'; } |
以上是一個極端的例子，但想象一下，如果第三方僅對某一小部分使用者這樣做。不但你很難除錯，還會失去使用者的信任。
更狡猾的方式如偶爾刪除“購買”按鈕，或重排內容段落。
新增內容
|
1 2 3 |
.price-value::before { content: '1'; } |
哦，價格被標高了。
移動內容
|
1 2 3 4 5 6 |
.delete-everything-button { opacity: 0; position: absolute; top: 500px; left: 300px; } |
上面的按鈕能做一些重要的操作，設定其為不可見，然後放在使用者可能點選的地方。
值得慶幸的是，如果按鈕的操作確實非常重要，網站可能會先顯示確認對話方塊。但也不是不可繞過，只需使用更多的 CSS 來欺騙使用者點選 “確定” 按鈕而不是“取消”按鈕即可。
假設瀏覽器確實採用上面的應對方法解決“鍵盤記錄器”的問題。攻擊者只需在頁面上找到一個非密碼文字輸入框（可能是搜尋輸入框）並將其蓋在密碼輸入框上即可。然後他們的攻擊就又可用了。
讀取屬性
其實，你需要擔心的不僅僅是密碼輸入框。你可能在屬性中儲存著其他的隱藏內容：
|
1 2 3 4 5 |
<input type="hidden" name="csrf" value="1687594325"> <img src="/avatars/samanthasmith83.jpg"> <iframe src="//cool-maps-service/show?st-pancras-london"></iframe> <img src="/gender-icons/female.png"> <div></div> |
所有這些都可以通過 CSS 選擇器獲取，且能發出請求。
監聽互動
|
1 2 3 4 5 6 7 |
.login-button:hover { background: url('/login-button-hover'); } .login-button:active { background: url('/login-button-active'); } |
可將 hover 和 active 狀態傳送到伺服器。通過適當的 CSS，你就能獲取到使用者意圖。
讀取文字
|
1 2 3 4 5 6 7 8 9 |
@font-face { font-family: blah; src: url('/page-contains-q') format('woff'); unicode-range: U+85; } html { font-family: blah, sans-serif; } |
在這種情況下，如果頁面內有 q 字元，則會傳送請求。你可以為不同的字元，並針對特定的元素，建立大量不同的字型。字型也可以包含 ligature（連字），所以你可以在開始檢測字元序列。你甚至可以通過 將字型技巧與滾動條檢測結合起來 來推斷內容。
譯註：關於 ligature（連字）, 可檢視 Wikipedia Typographic Ligature
第三方內容不安全
這些只是我所知道的一些技巧，我相信還有更多。
第三方內容在其沙箱區域內具有強大的能力。一張圖片或沙盒化的 iframe 僅在一個小範圍內的沙箱中，但指令碼和樣式的範圍卻是你的頁面，甚至是整個站點。
如果你擔心惡意使用者誘使你的網站載入第三方資源，可以通過 CSP 用作防護手段，其可以限制載入圖片，指令碼和樣式的來源。
你還可以使用 Subresource Integrity（子資源完整性 ） 來確保指令碼/樣式的內容匹配特定的 hash，否則將不載入。感謝 Hacker News上的Piskvorrr 提醒我！
如果你想了解更多如上述的 hack 技巧，包括滾動條技巧，更多資訊請參閱 Mathias Bynens’ talk from 2014，Mike West’s talk from 2013，或 Mario Heiderich et al.’s paper from 2012（PDF）。是的，這不是什麼新東西。