翻譯：瘋狂的技術宅
原文：https://jakearchibald.com/2018/third-party-css-is-not-safe/
前一段時間，有很多關於用CSS構建的“鍵盤記錄器”的討論（源代碼見：https://github.com/maxchehab/CSS-Keylogging）。
有些人要求瀏覽器“修復”它。 另有一些人挖掘得更深一些，發現它隻影響使用React及類似框架編寫的網站，併為此指責React。 不過真正的問題在於第三方內容是不是“安全的”。
下面我們逐一分析這些第三方內容。
第三方圖片
如果因為我信任example.com，就在自己的代碼中包含上述內容。那麼 他們可能會刪除資源，從而給我返回一個404，使我的網站看起來支離破碎，從而辜負了這種信任。同時他們也有可能會用一些不恰當的內容取代原來的圖片。
不過圖像的影響僅限於元素本身的內容框。 我可以向自己的用戶解釋“這是來自example.com的內容，如果它變冒犯了你，那是他們的錯，可別來找我”，並寄希望於用戶們能夠相信我。 但是這種事肯定不會影響我數據庫中密碼字段之類的東西。
第三方腳本
與圖片相比，第三方腳本有更多的控制權。 如果我的代碼中包含上述內容，就會給example.com完全控制自己的網站的機會。 他們能：
- 讀取/更改頁面內容。
- 監控用戶交互的每一個步驟。
- 運行計算量很大的代碼（比如用你的瀏覽器挖礦）。
- 盜取用戶的cookie向我的來源發出請求，並轉發響應數據。
- 讀取/更改原始存儲。
- 幾乎可以做任何他們想做的事。
“原始存儲”位非常重要。 如果腳本影響了IndexedDB或緩存存儲API，即使你把腳本刪掉，攻擊也可能會仍然繼續。
如果你在自己的代碼中引用了來自其他來源的腳本，那麼必須絕對信任它們，並保證其安全性。
如果遇到惡意腳本，則應使用 Clear-Site-Data標頭清除所有站點數據。
第三方CSS
CSS的作用更接近於腳本而不是圖像。和腳本一樣，它適用於整個頁面。 它可以：
- 刪除/添加/修改頁面內容。
- 根據頁面內容發出請求。
- 對許多用戶交互作出響應。
CSS不能修改原始存儲，你不能用CSS寫一個挖礦程序（也有可能，或許我還不知道），但惡意CSS仍然可以造成很大的破壞。
鍵盤記錄器
咱們從最開始的那個問題開始
如果輸入的 value屬性以 p結尾，上面的代碼將觸發對 /password?p的請求。 對每個字符都會執行此操作，這樣你會獲得大量鍵盤輸入的數據。
默認情況下，瀏覽器不會將用戶輸入的值存儲在 value屬性中，因此攻擊往往在同步這些值的內容時發生，例如React。
為了緩解這種情況，React可以使用另一種同步密碼字段的方法，或者瀏覽器可以限制與密碼字段的 value屬性匹配的選擇器，但這僅僅是一種虛假的安全感。 你只不過是解決了一個特定的問題，但其他情況下一切照舊。
如果 React 切換到使用data-value屬性，則上述手段將失敗。如果站點將輸入更改為type ="text"，那麼用戶可以看到他們正在輸入的內容，則這種手段失敗。 如果站點創建<better-password-input>並將值作為屬性公開，同樣上述手段失敗。
此外，還有許多基於CSS的攻擊：
消失的內容
這是一個極端的例子，但想象一下，如果第三方代碼為你的一小部分用戶做了這種事，會出現什麼樣的後果：將會侵蝕掉用戶對你的信任，同時很難排查問題到底出在何處。
更加腹黑的黑客可能會偶爾刪除“購買”按鈕，或著重新排列內容中的段落。
添加內容
哎呀，你這麼快就漲價了！
移除內容
把一個有“刪庫跑路”功能的按鈕設為不可看，然後再把它放在用戶可能會點擊的地方。
值得慶幸的是，如果按鈕執行的是後果非常嚴重的操作，該網站可能會首先顯示確認對話框。 沒關係，只需使用更多的CSS來誘騙用戶單擊“是的我確定！”按鈕而不是“哦天吶！不是！”按鈕。
想象一下，如果瀏覽器確實試圖消除“鍵盤記錄”這種小伎倆的影響。攻擊者還可以在頁面上放一個非密碼文本輸入框（可能是搜索字段）並將其覆蓋在密碼輸入框之上，呵呵，現在他們又回來了。
讀取屬性
你擔心的可不僅僅是密碼。 一些私有內容可能會保存在屬性中：
所有這些都可以被CSS選擇器設為目標，並且可以把結果發到某個服務器上。
監控互動
可以將hover和active等動作發送回服務器。 適當的使用CSS，你可以很好地瞭解用戶想要幹什麼。
讀取文本
在這種情況下，如果頁面包含q，將發送請求。 你可以為不同的文字創建大量的這種請求，並可以定位特定的元素。 字體還可以包含連字，因此還可以檢測字符序列。 你甚至可以將字體技巧與滾動條檢測相結合，從而能推斷出更多相關內容的信息。
結論：第三方內容並不安全
這些只是我所知道的一些技巧，我相信還會有更多類似的小技巧。
第三方內容在其沙箱中具有很高的影響力。 雖然圖像或沙盒iframe有著非常小的沙箱，但腳本和樣式的作用範圍卻影響你的整個頁面，甚至是整個站點。
如果你擔心用戶會欺騙你的網站去加載第三方資源，可以使用CSP（內容安全策略：https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP）保證安全，從而限制從中獲取圖像，腳本和樣式的位置。
還可以使用子資源完整性來確保腳本/樣式的內容與特定的哈希匹配，否則將無法執行。
如果你對這種安全技術感興趣，包括滾動條技巧的更多細節，可以去看看Mathias Bynens在2014年的演講（https://vimeo.com/100264064#t=1290s），Mike West在2013年的演講（https://www.youtube.com/watch?v=eb3suf4REyI），或Mario Heiderich等人的2012年論文（PDF：http://www.nds.rub.de/media/emma/veroeffentlichungen/2012/08/16/scriptlessAttacks-ccs2012.pdf）。 沒錯，這些技術並不是最新的。
十五年編程經驗，今年1月整理了一批2019年最新WEB前端教學視頻，不論是零基礎想要學習前端還是學完在工作想要提升自己，這些資料都會給你帶來幫助，從HTML到各種框架，幫助所有想要學好前端的同學，學習規劃、學習路線、學習資料、問題解答。只要關注我的頭條號，後臺私信我【前端】兩個字，即可免費獲取。