概述
最近，層疊樣式表（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層，并且每一層都使用不同的混合模式。實際上，每一層只是一個1x1像素的圖片，換句話說，每一層只能覆蓋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
原文鏈接
如果喜歡本文的話，歡迎關注我的訂閱號，前端玩法，期待未來共同學習成長。
