點選劫持

點選劫持示例

假設使用者銀行的網站是 https://my-bank.example.com。使用者通常會保持在該網站上登入。為簡單起見，我們假設該網站有一個按鈕頁面，該按鈕可以將使用者的所有資金轉給攻擊者 — 儘管這顯然不現實，但該網站可能有一些執行敏感操作的互動式元素是合乎情理的。

攻擊者建立一個包含以下內容的網頁：

• 一個 <button> 元素，其內容鼓勵使用者點選它
• 一個 <iframe> 元素，嵌入了銀行的頁面。

<button id="fake-button">Click here for a free kitten!</button>
<iframe width="800" height="200" src="https://my-bank.example.com"></iframe>

在頁面的 CSS 中，攻擊者

• 隱藏 <iframe>，例如透過將其 opacity 設定為零
• 將按鈕定位在與“轉走所有錢？”按鈕相同的位置。

iframe {
  opacity: 0;
}

#fake-button {
  position: absolute;
  top: 185px;
  left: 90px;
}

結果如下（我們將 <iframe> 的透明度設定為 0.1，以便您可以看到疊加層）

如果使用者試圖點選“點選這裡免費獲取小貓！”按鈕，他們實際上將點選銀行網站上不可見的“轉走所有錢？”按鈕。如果使用者已登入，那麼此操作傳送到銀行伺服器的請求將包含使用者的真實憑據，並且請求將成功。

點選劫持防禦措施

點選劫持取決於目標網站是否被嵌入到攻擊者的偽造網站的 <iframe> 中。主要的防禦措施是禁止或至少控制此能力。

這裡有兩個相關的工具

• <a href="/en-US/docs/Web/HTTP/Guides/CSP#clickjacking_protection">frame-ancestors</a> 指令，位於 <a href="/en-US/docs/Web/HTTP/Guides/CSP">內容安全策略</a> 中
• <a href="/en-US/docs/Web/HTTP/Reference/Headers/X-Frame-Options">X-Frame-Options</a> 響應頭。

frame-ancestors 指令是 X-Frame-Options 的替代品。透過同時設定 X-Frame-Options 和 frame-ancestors，您可以防止不支援 frame-ancestors 的瀏覽器進行嵌入。鑑於 <a href="/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/frame-ancestors#browser_compatibility">瀏覽器對 frame-ancestors 的支援非常好</a>，這並不是一個主要問題。

如果同時設定了 frame-ancestors 和 X-Frame-Options，那麼支援 frame-ancestors 的瀏覽器將忽略 X-Frame-Options。

作為額外的部分緩解措施，網站應為會話 Cookie 設定 <a href="/en-US/docs/Web/HTTP/Reference/Headers/Set-Cookie#samesitesamesite-value">SameSite</a> 屬性為 Lax 或 Strict。來自嵌入式上下文（例如 <iframe> 元素）且與頂層文件不是 <a href="/en-US/docs/Glossary/Site">同站</a> 的請求將不包含這些 Cookie，因此伺服器不會將請求視為來自已登入使用者的請求。

防禦總結清單

• 設定 <a href="/en-US/docs/Web/HTTP/Guides/CSP#clickjacking_protection">frame-ancestors</a> CSP 指令以及 <a href="/en-US/docs/Web/HTTP/Reference/Headers/X-Frame-Options">X-Frame-Options</a> HTTP 響應頭，以防止其他網站將您的網站嵌入為 <iframe>，或者嚴格控制哪些網站可以嵌入它。

• 為會話 Cookie 設定 <a href="/en-US/docs/Web/HTTP/Reference/Headers/Set-Cookie#samesitesamesite-value">SameSite</a> 屬性為 Lax 或 Strict。

另見

• OWASP 網站上的點選劫持防禦備忘單