點選劫持防護

該 內容安全策略 frame-ancestors 指令和 X-Frame-Options 標頭控制網站如何在另一個網站上的 <iframe> 中嵌入。這些功能有助於防止點選劫持。

問題

點選劫持 是一種攻擊，惡意網站透過使連結或 UI 元素看起來像使用者熟悉的受信任網站來欺騙使用者點選。這通常是透過 <iframe> 將受信任網站的部分或全部嵌入到惡意網站中來實現的。然後，按鈕、連結或其他 UI 功能將放置在該內容的頂部，以使使用者認為他們正在與受信任的網站互動，而實際上他們正在與惡意網站互動。

解決方案

根據需要使用 HTTP 標頭

  • Content-Security-Policy: frame-ancestors 是首選，因為它提供了對網站嵌入的更細粒度的控制。但是，它在 IE11 及更早版本、Chromium 版本之前的 Edge、Safari 9.1（桌面版）和 Safari 9.2（iOS 版）中不受支援。
  • X-Frame-Options 的粒度較低，但它在上面列出的舊版瀏覽器中受支援。

建議同時使用兩者，除非您知道不需要支援舊版瀏覽器。

除非您確實需要，否則應拒絕所有嵌入您網站的嘗試。當需要嵌入時，請提供必要的最小嵌入許可權。需要在 <iframe> 中嵌入的網站必須使用 JavaScript 防禦和強大的 Content-Security-Policy 來防止來自惡意來源的點選劫持。 Window.confirm() 可用作 JavaScript 防禦的一部分，以通知使用者他們即將執行的操作：請參閱 window.confirm() 保護。

每個設定的等效選項如下所示

CSP 值 X-Frame-Options 值 描述
frame-ancestors 'none' DENY 拒絕所有嵌入嘗試。
frame-ancestors 'self' SAMEORIGIN 僅允許同源嵌入嘗試。
frame-ancestors https://example.org ALLOWFROM https://example.org 允許來自指定域的嵌入嘗試。

注意：X-Frame-Options: ALLOWFROM https://example.org 語法已棄用，大多數瀏覽器都會忽略它。建議在這種情況下改為設定 DENY，和/或依賴於 CSP 等效項。

注意：使用 SameSite 指令設定 Cookie 在依賴於使用者身份驗證的點選劫持情況下也很有用。

示例

使用 X-Frame-Options 和 CSP 阻止網站被嵌入

http
Content-Security-Policy: frame-ancestors 'none'
X-Frame-Options: DENY

僅允許在同源頁面上嵌入網站

http
Content-Security-Policy: frame-ancestors 'self'
X-Frame-Options: SAMEORIGIN

僅允許 example.org 嵌入網站

http
Content-Security-Policy: frame-ancestors https://example.org
# Block embedding in browsers that don't support CSP2
X-Frame-Options: DENY

另請參閱