如何瞭解與實施 Content Security Policy - Content Security Policy (CSP)實作指南：前端工程師必讀的資訊安全手冊(四)

Content Security Policy 的核心指令與實施

當我們討論 Content Security Policy (CSP) 時，實際上我們談論的是一組控制瀏覽器載入內容的指令。這些指令可以幫助我們防止各種安全威脅，如跨站點腳本攻擊 (XSS)、點擊劫持等。以下是一些最常見的 CSP 指令：

default-src: 這是一個備用指令，如果沒有指定特定類型的資源的來源，就會採用這個指令的設定。例如，如果你沒有設定 script-src，則 default-src 的設定將適用於腳本。
script-src: 這個指令控制哪些來源的腳本可以載入並執行。例如，你可能希望只載入自己網站或特定第三方網站的腳本。
style-src: 這個指令控制哪些來源的樣式表可以載入。這對防止攻擊者使用惡意 CSS 實現攻擊非常有用。
img-src: 這個指令控制哪些來源的圖像可以載入。這對防止攻擊者使用圖像來傳輸資料或執行攻擊可以提供保護。

每一種指令都可以有多個來源，並且可以使用特殊的關鍵字，如 ‘self’（只允許從同源載入資源）和 ‘none’（不允許從任何來源載入資源）。

在我們了解了 Content Security Policy (CSP) 的核心指令後，下一個問題就是如何實施 CSP。以下是兩種主要的方式：

在 HTML 中實施 CSP

在 HTML 中實施 CSP 是最直接的方式。你可以在 HTML 文件的 head 內添加一個 meta 標籤，並使用 http-equiv 屬性設定為 “Content-Security-Policy”。 content 屬性則設定為你的 CSP 指令。

例如：

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*; child-src 'none';">

上述的例子中，我們設定了 default-src 為 ‘self’，意味著只允許從同源的地址載入內容； img-src 為 https://*，代表所有使用 HTTPS 的地址都可以載入圖像； child-src 設為 ‘none’，意味著不允許載入任何子資源。

在 Web 伺服器中實施 CSP

另一種方式是在伺服器層面實施 CSP。具體的做法是在伺服器的回應頭中添加 “Content-Security-Policy” 欄位。其實施方式依伺服器的類型和配置而異。例如，在 Apache 伺服器中，你可以在 .htaccess 文件中添加如下配置：

Header set Content-Security-Policy "default-src 'self'; img-src https://*; child-src 'none';"

這裡的 CSP 指令與我們在 HTML 中設定的相同。

無論是在 HTML 中還是在伺服器中實施 CSP，關鍵在於仔細設定你的 CSP 指令，以符合你的需求同時確保網站的安全。