logo
GeekFormat

CSP 產生器

策略模板

首先選擇一個模板,然後根據您的業務需求微調策略指示。

策略指示編輯器

逐行編輯策略指示。支援新增、刪除和快速插入來源。

輸出結果

Content-Security-Policy
HTTP 標頭
Content-Security-Policy: default-src 'self'; script-src 'self' https:; style-src 'self' 'unsafe-inline' https:; img-src 'self' data: https:; connect-src 'self' https:; frame-ancestors 'self'
HTML Meta
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https:; style-src 'self' 'unsafe-inline' https:; img-src 'self' data: https:; connect-src 'self' https:; frame-ancestors 'self'">

風險警告

包含 'unsafe-inline',會降低 XSS 防護。
建議明確設定 object-src 'none'。

線上產生 CSP,先把來源規則配清楚。

相關推薦

適用場景

  • 網站準備上線時先生成一版可落地的 CSP,減少指令碼注入和第三方資源失控風險
  • 管理後台設定 frame-ancestors 為 'none' 防止頁面被嵌入釣魚網站
  • 開發環境切換開發預設範本允許 http:、ws:、'unsafe-inline' 和 'unsafe-eval'
  • 為 Nginx、Cloudflare 或後端服務產生可直接部署的 CSP 回應標頭和 meta 標籤

功能特點

  • 來源規則依資源類型拆開配:指令碼、樣式、圖片、API 網址都不混
  • 上線前更安心:先補齊基礎 CSP,再逐步收緊策略
  • 少踩白名單坑:減少來源漏寫、分號漏掉和規則衝突這類高頻錯誤
  • 產生後即可部署:適合複製到伺服器、CDN 或安全閘道器中直接使用

使用方法

  1. 選擇預設範本(嚴格生產環境、平衡推薦或開發本地)或手動新增指令行
  2. 編輯各指令的來源值,使用快速來源按鈕一鍵新增 'self'、https: 等標記
  3. 切換是否啟用 Report-Only 模式,查看自動產生的 HTTP 回應標頭和 HTML meta 標籤
  4. 檢查風險警告清單,複製 CSP 內容用於伺服器設定或頁面 head 標籤

常見問題

CSP 主要用來解決什麼問題?

CSP 用來限制頁面可以載入哪些指令碼、樣式、圖片、API 和 iframe 來源,是前端安全基線裡非常關鍵的一層。

設定 CSP 時最常見的錯誤是什麼?

常見問題包括白名單寫錯、遺漏 CDN 網域、誤攔截內嵌指令碼或樣式,以及測試環境和正式環境來源不一致。產生器可以幫助您更快構造規則。

適合用於 Nginx、Cloudflare 或後端回應標頭設定嗎?

適合。產生後的 CSP 內容可以直接複製到 Nginx、Apache、Node.js、Java、Cloudflare 或其他安全回應標頭設定中。

這個工具適合網站上線前做安全設定嗎?

非常適合。它能幫助開發和維運在上線前快速產生基礎 CSP 規則,減少手寫策略時的遺漏和格式錯誤。