網頁功能集體「罷工」？兇手可能不是程式碼，而是隱形的 CSP 門神
快速導覽
【前言】
網站改版上線，或是剛嵌入一個新的第三方工具（如：評論套件、社交媒體牆），結果該出現的地方卻是一片空白？明明程式碼沒改、GTM 也沒有調整，但功能就是動不了，GTM 也無法載入。在急著修程式碼或怪罪廠商之前，請先檢查一個資安層級的門神：CSP（Content Security Policy）。
🔍 情境：消失的功能區塊與「互推」循環
當新的第三方工具嵌入後，預期中的精美區塊變成了一個空的白盒。這時，溝通通常會陷入以下這個令人絕望的循環：
- 行銷端： 「GTM 沒動，為什麼這個工具出不來？追蹤數據也全斷了？」
- 工具廠商： 「我們的代碼在其他網站都正常，一定是你們網站把我們擋掉了。」
- 客戶 IT 端： 「我們查過了，伺服器設定裡完全沒有開啟 CSP，這絕對不是我們擋的。」
當每個人都說「沒動設定」時，問題通常就藏在那些被忽視的「預設政策」或「隱形標籤」裡。
💡 第二幕：到底什麼是 CSP？
CSP（Content Security Policy，內容安全政策） 簡單來說，就是一份給瀏覽器的「網頁資源白名單」。
它告訴瀏覽器：「在這份網頁裡，你只准載入我指定的這些網域資源。」
- 如果 CSP 設為 'self'： 代表只准載入自己網站的東西。
- 如果廠商的腳本不在白名單內： 瀏覽器為了保護使用者，會直接「拒絕執行」該腳本。
這就是為什麼 IT 可能覺得沒開（因為沒動伺服器大門），但瀏覽器卻因為某個角落的小規則而把門關上了。
🛠 第三幕：怎麼從 F12 查到是不是 CSP 在搞鬼？
要終結互推，最快的方式就是拿出「證據」。請打開瀏覽器（如 Chrome），按下 F12（或右鍵點擊「檢查」）：
- 按下 F12（或右鍵點擊「檢查」）開啟開發者工具。
- 切換到 「Network（網路）」 頁籤。
- 重新整理網頁（F5），在清單中找到類型（Type）為 「Doc（文件）」 的該網頁請求並點擊它。
- 在右側出現的面板中，選擇 「Headers（標頭）」 標籤。
- 在 「Response Headers（回應標頭）」 區塊中，尋找是否出現了 content-security-policy 這個項目。
- 檢查關鍵： 如果看到它的數值中出現了 'self'，就代表該頁面被設定為「只允許載入自家網域的資源」。這正是導致第三方工具（外部來源）被阻擋、功能無法顯示的罪魁禍首。
🚀 第四幕：找到問題後，請工程師確認「這兩個位置」
一旦確認是 CSP 擋掉了工具，請工程師檢查以下兩個地方，通常答案就在其中之一：
1. HTTP Response Header（伺服器層級）
這是最常見的位置。請工程師檢查網頁伺服器（如 Nginx, Apache）或後端應用程式（Node.js, PHP）在回傳頁面時，標頭是否帶有 Content-Security-Policy。
- 檢查方法： 在 F12 的「Network」分頁點擊頁面 URL，查看「Response Headers」。
2. HTML Meta Tag（頁面層級）
如果 IT 堅持伺服器沒設定，那很可能是寫在 HTML 程式碼裡。有些 CMS 系統或前端框架會自動加入：
- 位置： <head> 區塊內的 <meta http-equiv="Content-Security-Policy" content="...">。
- 特點： 這種設定不需要動到伺服器設定，只要改 HTML 就會生效，因此 IT 檢查伺服器 Config 時常會漏掉。
📢 總結
當網站部分區塊無故消失，請記住「先看 Console，再找 CSP」。只要定位出這條規則是寫在 「伺服器 Header」 還是 「HTML Meta Tag」，就能立刻結束互推循環，讓網頁功能恢復運作！
