安全研究員 Lyra Rebane 公佈了一種名為「SVG 點擊劫持」的新型點擊劫持技術，該技術不涉及任何 JavaScript，僅使用可縮放向量圖形 (SVG) 和層疊樣式表 (CSS) 即可完成。
它的獨特之處在於能夠利用 SVG 濾鏡的特性來讀取跨域螢幕內容，從而跨越原始的同源策略處理像素資訊。 Rebane 透過組合 SVG 濾鏡原語feBlend和feComposite建構了一個邏輯閘。這使得它能夠逐像素地進行任意計算，並展示了一個從 Google 文件中提取機密文字的概念驗證 (PoC)。
針對該報告，Google支付了 3,133.70 美元的漏洞賞金，但該攻擊尚未完全修復，據說會影響包括 Firefox 和 Chrome 在內的多個瀏覽器。
從： 
一種新型的點擊劫持攻擊依賴CSS和SVG。
【社論】
點擊劫持攻擊由來已久，但以往通常將其視為一種用戶介面層面的技巧，例如「疊加透明的 iframe 以誘發意外點擊」。 SVG 點擊劫持更進一步，利用 SVG 濾鏡處理跨域 iframe 像素的能力，並透過設定 feBlend 和 feComposite 邏輯閘，甚至可以讀取螢幕狀態並提供互動式引導。
關鍵在於「讀取狀態，然後引導使用者」。在Rebane的PoC中，攻擊者從外部逐像素地抓取Google Docs的使用者介面，並向使用者呈現一個看似「產生文件」或驗證碼輸入的螢幕，但實際上，攻擊者誘使用戶操作攻擊者預先準備好的文件。從使用者的角度來看，這似乎是自然操作的延伸，但在幕後，像素級影像處理如同一個邏輯電路，將所有點擊和輸入重定向到iframe 。
從防禦角度來看，這凸顯了「直接禁用 iframe」這種傳統方法不再奏效的情況。像 Google Docs 這樣旨在嵌入第三方網站的服務，很難收緊 X-Frame-Options 或 CSP 框架祖先的限制；許多其他 SaaS 服務，包括 YouTube、地圖、支付元件、評論和廣告，也面臨同樣的問題。此外，Rebane 指出，SVG 點擊劫持也可以應用於 HTML 注入環境，這表明「只要 JavaScript 被 CSP 阻止就安全」的假設正在瓦解。
從瀏覽器引擎層面來應對這個問題也並非易事。 Chromium 中一些較早的像素竊取漏洞被標記為“不會修復”，這使得我們很難界定允許此類行為作為規範的一部分，還是將其作為實現缺陷予以消除。 Rebane 本人也曾表示，這種攻擊尚未修復，而且它不僅影響 Chrome，還影響 Firefox 等其他瀏覽器。這意味著，這個問題需要從整個渲染管線的設計層面進行討論，而不是僅僅將其視為某個產品中的漏洞。
我認為關鍵在於轉變我們的思維模式，從“像素=外觀”轉變為“像素=可編程資訊通道”。像素既是運算資源又是側向通道這一事實，不僅對網頁瀏覽器，而且對擴增實境設備、空間運算，乃至未來人工智慧代理操控瀏覽器的使用者體驗設計都具有深遠的影響。隨著我們逐步減少 JavaScript 的使用，並朝著無程式碼和無 JavaScript 的方向發展，未來前端和 SaaS 領域的一個共同主題可能不再是“因為程式碼量減少了所以就安全了”，而是“我們如何才能安全地充分利用剩餘的渲染語言（CSS/SVG）？”
[術語]
點擊劫持
這是一種攻擊技術的統稱，它透過偽造網頁上的按鈕和連結等使用者介面元素，誘騙使用者點擊或輸入他們原本不想輸入的資訊。一個典型的例子是使用透明的 iframe 進行覆蓋。
同源政策
這是 Web 的基本安全模型，只允許在符合協定、主機名稱和連接埠的來源之間進行腳本存取和資料共用。
可縮放向量圖形 (SVG)
它是一種用 XML 編寫的 2D 向量圖像格式，也是一種網路標準規範，允許進行高級表達，例如濾鏡和動畫。
層疊樣式表（CSS）
它是一種樣式表語言，用於指定 HTML 和 SVG 的外觀，不僅廣泛用於佈局和顏色，還廣泛用於動畫和互動。
X-Frame-Options / frame-ancestors
這是一個 HTTP 回應標頭設置，允許或拒絕頁面在 iframe 等框架中顯示，並用作防止點擊劫持的對策。
交叉路口觀察器 v2 API
這是一個 API，可以檢測瀏覽器中元素的可見區域以及它是否被其他元素覆蓋，並可用於與可見性相關的邏輯，例如覆蓋層檢測。
[參考連結]
Lyra Rebane 部落格 – SVG 點選劫持（外部連結）
這是一篇技術部落格文章，作者親自詳細解釋了 SVG 點擊劫持的背景、實作方法，甚至邏輯閘配置。
OWASP點擊劫持防禦速查表（外部連結）
這是一系列最佳實踐，概述了點擊劫持攻擊和防禦措施，並提供了配置 X-Frame-Options 和 CSP 的指南。
MDN Web 文件 – 同源策略（外部）
這是一份技術文檔，它組織了 Web 開發人員的同源策略的概念、例外和實現行為。
交叉路口觀察器 v2 – web.dev （外部）
這是一篇由Google提供的技術文章，解釋了 Intersection Observer v2 API 的概述和用例，以及遮蔽偵測的範例實作。
利用 HTML5 實現完美像素級計時攻擊（外部連結）
本文是關於使用 HTML5 的像素計時攻擊，並且在 SVG 點擊劫持中也被引用，作為對跨域資訊外洩的先前研究。
人類側通道（外部）
這是一篇技術文章，解釋了利用瀏覽器行為的側通道攻擊，並介紹了從外部推斷使用者操作和狀態的技術。
[參考文章]
新型 SVG 點擊劫持攻擊允許攻擊者創建互動式點擊劫持攻擊（外部連結）
本文解釋如何使用 SVG 濾鏡進行跨域像素處理來實現高度互動的點擊劫持，並提供了相應的應對措施。
一種名為「SVG點擊劫持」的新型攻擊方法已經出現（外部連結）
本書以 Google Docs 為例，介紹了一個 PoC，透過螢幕對比展示了使用者輸入的內容（以為是驗證碼）如何被保存到攻擊者的文檔中，並對這種攻擊進行了直觀的解釋。
現代 SVG 點擊劫持攻擊 – Hacker News （外部連結）
在 Lyra Rebane 發表一篇文章後，開發者們正在討論 SVG 濾鏡的設計意圖、它們在瀏覽器中的實作以及實際使用中涉及的風險。
SVG 欺騙揭露了更深層的點擊劫持威脅（外部）
以 SVG 這項新技術為出發點，我們探討了整個渲染管線的安全設計及其對未來法規和標準化的影響。
什麼是點擊劫持？漏洞利用和安全性提示（外部連結）
本書總結了傳統的點擊劫持技術和多層防禦的概念，並介紹了應對新變種出現的實用要點。
[編者註]
在日常開發和使用過程中，你可能很少有機會將瀏覽器中發生的一切視為“程式行為”，而不僅僅是“外觀”。但是，當你聽說像 SVG 點擊劫持這樣的互動式攻擊僅使用 CSS 和 SVG 就能實現時，你對前端和 UI 世界的看法可能會改變。
如果你在自己的產品中使用 iframe 或嵌入式小部件，我希望這能讓你有機會停下來思考一下，你應該信任多少，又應該謹慎多少。
