概述
最近，層疊樣式表（CSS）的Web標準中又增加了一些新的功能，這些功能是如此強大，以至於安全研究人員可以濫用這些功能，對演示站點的訪問者實施去匿名化攻擊，從而暴露他們的Facebook使用者名稱、頭像以及是否喜歡特定的Facebook頁面。
通過這種攻擊洩露的資訊，可以幫助某些廣告商將IP地址或廣告資料與現實生活中的人對應起來，從而對使用者的線上隱私構成嚴重威脅。
該漏洞的影響範圍並不僅限於Facebook，而是所有允許通過iframe將其內容嵌入其他網頁的網站。
漏洞存在於瀏覽器中，而非網站中
實際上，該漏洞的根本原因，不在於網站，而在於瀏覽器對名為”mix-blend-mode“的CSS特性的實現，該特性是於2016年引入CSS3 web標準的。
mix-blend-mode特性允許Web開發人員將Web元件疊放在一起，並控制其混合效果。
正如該特性的名稱所暗示的那樣，這些效果是受Photoshop、Gimp、Paint.net等照片編輯軟體中的混合模式的啟發而來的。其中，常見的混合模式為疊加、變暗、變亮、顏色減淡、正片疊底、反轉等。
CSS3的mix-blend-mode特性支援16種混合模式，其中Chrome瀏覽器（自從v49版本開始）和Firefox瀏覽器（自從v59版本開始）對這些模式提供了全面的支援，而Safari瀏覽器則只提供了部分支援（從macOs系統上的v11版本和從iOS系統上的v10.3版本開始）。
研究人員使用DIV堆疊來重建iframe內容
在今天釋出的研究報告中，谷歌安全工程師Ruslan Habalov與安全研究員 Dario Weißer一起曝光了攻擊者是如何濫用CSS3的mix-blend-mode特性通過其他站點來洩漏使用者資訊的。
這個漏洞的侷限性在於，攻擊者必須設法誘導使用者訪問一個惡意網站，然後在惡意網站裡面嵌入iframe來載入其他網站。在上面提及的兩位研究人員給出的示例中，雖然兩個嵌入的iframe載入的都是Facebook的頁面，但其他網站也容易受到這個安全問題的影響。
具體攻擊手法為，在iframe之上疊加大量的DIV層，並且每一層都使用不同的混合模式。實際上，每一層只是一個1×1畫素的圖片，換句話說，每一層只能覆蓋iframe的一個畫素。
Habalov和Weißer表示，根據渲染所有DIV堆疊所需的時間，攻擊者可以確定使用者螢幕上顯示的畫素顏色。
研究人員說，通過逐一將這種DIV“掃描”層放到iframe上面，“就可以確定iframe的內容。”
正常情況下，攻擊者是無法訪問這些iframe的資料的，這主要得益於瀏覽器和允許其內容通過iframe進行載入的遠端站點中實現的反點選劫持和其他安全措施的限制。
兩個令人印象深刻的演示示例
通過兩個線上釋出的演示示例（這裡和這裡），研究人員能夠獲取使用者的Facebook名稱、低解析度版本頭像以及喜歡的站點。
對於現實中的攻擊來說，獲取使用者名稱只需20秒左右；而500毫秒足以用來檢查使用者對所有頁面的喜歡/不喜歡狀態；如果花上20分鐘左右的時間的話，就可以獲取Facebook使用者的頭像。
這種攻擊很容易實現隱身，因為iframe可以輕鬆移出螢幕，或隱藏在其他元素下面（請參閱下面的演示gif動畫演示，這裡的攻擊是以貓照片為掩護的）。 此外，通過讓使用者完成某些線上測試或閱讀一篇長文，誘騙使用者在網站上駐留幾分鐘並非難事。
適用於Chrome和Firefox的修復程式
Google和Mozilla的工程師在收到研究人員的漏洞報告後，已經為Chrome 63和Firefox 60修復了這個安全漏洞。
“這個安全問題是通過向量化混合模式計算來解決的，”據Habalov和Weißer稱。由於Safari瀏覽器的混合模式操作已經被向量化，所以，Safari的CSS3 mix-blend-mode特性實現不會受到該漏洞的影響。
除此之外，另一位名叫Max May的研究人員也獨立發現了該漏洞，並於2017年3月向Google提交了相應的報告。
如果演示網站打不開，可以通過此地址下載原始碼。
如果本篇文章對你有幫助，麻煩給個star
原文連結
看完的朋友可以點個喜歡/關注，您的支援是對我最大的鼓勵。
個人主頁，如需轉載，請放上原文連結並署名。碼字不易，感謝支援！
如果喜歡本文的話，歡迎關注我的訂閱號，前端玩法，期待未來共同學習成長。
