利用CSS mix-blend-mode在firefox和chrome中獲取Facebook用戶信息

概述

最近，層疊樣式表（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 原文連接 看完的朋友能夠點個喜歡/關注，您的支持是對我最大的鼓勵。 我的主頁，如需轉載，請放上原文連接並署名。碼字不易，感謝支持！

若是喜歡本文的話，歡迎關注個人訂閱號，前端玩法，期待將來共同窗習成長。