什麼是 Content Security Policy (CSP)?

什麼是 Content Security Policy (CSP)?

內容安全策略(Content Security Policy,CSP)是一種網站安全機制,用於減輕和防止跨站腳本(Cross-Site Scripting,XSS)和其他類型的網站攻擊。CSP 通過限制網頁內容能夠執行的來源和類型,幫助保護網站免受已知和未知的安全漏洞和攻擊。

CSP 的基本原則是通過指定允許載入的資源來控制網頁的執行環境。這些資源可以是腳本文件、樣式表、圖像、字體或其他資源。CSP 使用一個特殊的HTTP標頭(Content-Security-Policy)將這些限制應用到網頁。

通過設置 CSP,網站管理員可以指定允許載入的資源的來源,從而限制執行環境中的潛在攻擊者可以利用的漏洞。例如,可以限制僅載入同源(相同域名和端口)的腳本,或者只允許從特定網域載入圖像。這些限制可以降低XSS攻擊的風險,因為攻擊者無法載入惡意腳本或其他攻擊資源。

CSP 還提供了報告功能,允許網站管理員收集並報告違反策略的事件。這些報告可以用於監控和分析網站的安全狀態,並採取相應的措施來保護網站。

總而言之,Content Security Policy(CSP)是一種通過限制網頁內容執行環境的機制,用於減輕和防止網站攻擊,特別是跨站腳本(XSS)攻擊。通過控制載入資源的來源和類型,CSP 提供了一個強大的工具,有助於提高網站的安全性。

Content Security Policy (CSP) 有哪些設定?

Content Security Policy(CSP)提供了多種設定,用於指定網頁內容的執行環境。以下是一些常見的CSP設定:

  1. default-src:指定預設資源的來源,用於沒有特定指令的資源。例如:default-src 'self'表示僅允許從相同的域名載入資源。

  2. script-src:指定腳本資源的來源。例如:script-src 'self'表示僅允許從相同的域名載入腳本。

  3. style-src:指定樣式表資源的來源。例如:style-src 'self'表示僅允許從相同的域名載入樣式表。

  4. img-src:指定圖像資源的來源。例如:img-src 'self'表示僅允許從相同的域名載入圖像。

  5. font-src:指定字體資源的來源。例如:font-src 'self'表示僅允許從相同的域名載入字體。

  6. connect-src:指定資源連接的來源,例如AJAX、WebSocket等。例如:connect-src 'self'表示僅允許與相同的域名建立連接。

  7. frame-src:指定嵌入框架的來源。例如:frame-src 'self'表示僅允許嵌入相同的域名的框架。

  8. media-src:指定媒體資源(音頻、視頻)的來源。例如:media-src 'self'表示僅允許從相同的域名載入媒體資源。

  9. object-src:指定object元素(如Flash)的來源。例如:object-src 'self'表示僅允許從相同的域名載入object元素。

  10. frame-ancestor: 指定哪些網站可以用 iframe 將你的網站資源載入

(範例教學) 在 Nginx 如何設定 CSP Header ?

在 Nginx 中,你可以通過添加 HTTP 標頭來設定 Content Security Policy(CSP)。請按照以下步驟進行配置:

  1. 打開你的 Nginx 配置文件,通常是位於 /etc/nginx/nginx.conf 或 /etc/nginx/conf.d/default.conf。
  2. 在 server 或 location 區塊中,添加以下指令以設定 CSP 標頭:
add_header Content-Security-Policy "指令";

將 "指令" 替換為你希望設定的 CSP 指令。例如,如果你希望僅允許從相同域名載入資源,可以使用以下指令:

add_header Content-Security-Policy "default-src 'self';";

這將設定名為 Content-Security-Policy 的標頭,並將其值設定為 "default-src 'self';"。

  1. 保存配置文件並重新啟動 Nginx 服務,以使配置生效。

請注意,這只是一個簡單的示例,你可以根據你的需求自定義 CSP 指令。另外,如果你的網站使用HTTPS,你也可以使用 add_header 指令的第三個參數來設定 CSP 標頭的傳輸方式,例如:

add_header Content-Security-Policy "default-src 'self';" always;

使用 always 參數可以確保即使在使用HTTPS的情況下,也始終傳送 CSP 標頭。

完成上述步驟後,Nginx 將在 HTTP 標頭中包含指定的 CSP 標頭,從而告訴瀏覽器應用所需的安全策略。請確保你的 CSP 指令符合你的安全需求並適合你的網站。

(範例教學) 在 Nuxt 2 如何設定常見的 CSP Header ?

在 nuxt 2 你可以安裝 @dansmaculotte/nuxt-security 這個套件來設定 CSP Header。這個套件的背後是基於 ExpressJS 的 helmet