TL;DR

Clickjacking 主要是在釣魚網站上嵌入正版網站（攻擊對象）的內容，並將一些物件隱藏在正版內容之上，讓受害者以為自己操作了正版網頁，但實際上卻是執行了隱藏物件上的動作。

可以透過以下幾種設定和方法來防禦：

• Content Security Policy (CSP)
• X-Frame-Options Header
• Frame Breaking Script

其他還有 window.confirm() protection 和一些注意事項在 OWASP 的網頁都有說明： Clickjacking Defense Cheat Sheet - OWASP

Firebase.json

關於 Content-Security-Policy 和 X-Frame-Options 的設定，在 Firebase 裡頭可以簡單作這樣的設定：

{
  "hosting": {
    "public": "dist",
    "cleanUrls": true,
    "headers": [
        {
            "source": "**",
            "headers": [
                {"key": "Content-Security-Policy", "value": "frame-ancestors 'none'"},
                {"key": "X-Frame-Options", "value": "DENY"}
            ]
        }
    ]
  }
}

Headers 詳細的設定方式可以參考 Firebase 的官方網頁：Customize Hosting Behavior  |  Firebase

Content Security Policy (CSP)

• 功用：限制是否要讓其他網頁可以使用 <frame> 或 <iframe> 嵌入本頁面
• 限制：有些瀏覽器並不支援此 Header
• 我很懶惰，所以直接設定
  • Content-Security-Policy: frame-ancestors 'none';
  • 禁止網站所有頁面被嵌入在任何網站

X-Frame-Options Header

• 功用：限制是否要讓其他網頁可以使用 <frame> 或 <iframe> 嵌入本頁面
• 限制：有些瀏覽器並不支援此 Header
• 我很懶惰，所以直接設定
  • X-Frame-Options: DENY;
  • 禁止網站所有頁面被嵌入在任何網站

Frame Breaking Script

• 功用：限制是否要讓其他網頁可以使用 <frame> 或 <iframe> 嵌入本頁面且在舊的瀏覽器上也適用，因為是直接使用 JavaScript 處理，而不是透過瀏覽器去解析 HTTP Header。
• 限制：必須要手動修改網頁上執行的 JavaScript 才能作用，當然遇到不支援 JavaScript 的瀏覽器就無效了？

節錄自 Clickjacking Defense Cheat Sheet - OWASP:

In the document HEAD element, add the following:

First apply an ID to the style element itself:

<style id="antiClickjack">body{display:none !important;}</style>

And then delete that style by its ID immediately after in the script:

<script type="text/javascript">
   if (self === top) {
       var antiClickjack = document.getElementById("antiClickjack");
       antiClickjack.parentNode.removeChild(antiClickjack);
   } else {
       top.location = self.location;
   }
</script>

This way, everything can be in the document HEAD and you only need one method/taglib in your API.

References

• Clickjacking Defense Cheat Sheet - OWASP
• Clickjacking Defense