在不斷發展的網路安全領域，內容安全策略(CSP) 已成為一種強大的工具，可協助開發人員保護其應用程式免受各種形式的攻擊，特別是跨站點攻擊腳本（XSS）。本部落格將帶您了解 CSP 的基礎知識、如何實現它，並提供實際範例來幫助您掌握其用法。

什麼是內容安全策略 (CSP)？

內容安全策略 (CSP) 是一項安全功能，可透過控制允許網站載入和執行的資源來協助防止一系列攻擊。透過定義CSP，您可以指定可以載入哪些腳本、樣式和其他資源，從而顯著降低XSS和資料注入攻擊的風險。

為什麼要使用 CSP？

1.緩解 XSS 攻擊： 透過限制腳本載入來源，CSP 有助於防止攻擊者註入惡意腳本。

2.控制資源載入： CSP 可讓您控制網站載入資源（例如圖片、腳本、樣式表等）的位置。

3.防止資料注入： CSP 可以幫助防止旨在將不需要的資料注入您的網站的攻擊。

CSP的基本結構

CSP 是使用 Content-Security-Policy HTTP 標頭定義的。以下是 CSP 標頭的簡單範例：

Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com; style-src 'self' 'unsafe-inline'

在此政策中：

default-src 'self': 預設只允許同源資源。
script-src 'self' https://trusted.cdn.com: 允許來自同一來源和受信任 CDN 的腳本。
style-src 'self' 'unsafe-inline': 允許同源樣式和內聯樣式。

在 JavaScript 應用程式中實作 CSP

第 1 步：定義您的政策

首先確定您的應用程式需要載入哪些資源。這包括腳本、樣式、圖像、字體等。

步驟 2：將 CSP 標頭新增至您的伺服器

如果您使用的是 Express.js 伺服器，則可以如下設定 CSP 標頭：

const express = require('express');
const helmet = require('helmet');
const app = express();

app.use(helmet.contentSecurityPolicy({
    directives: {
        defaultSrc: ["'self'"],
        scriptSrc: ["'self'", "https://trusted.cdn.com"],
        styleSrc: ["'self'", "'unsafe-inline'"],
        imgSrc: ["'self'", "data:"],
    }
}));

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

第 3 步：測試您的 CSP

CSP 就位後，請徹底測試。使用瀏覽器開發人員工具檢查是否有任何資源被封鎖。根據需要調整策略，以確保您的應用程式正常運行，同時保持安全。

範例：在範例專案中實施 CSP

讓我們考慮一個簡單的 HTML 頁面，它從受信任的 CDN 載入腳本和樣式。

    
    
    
    
    


    
Content Security Policy Example
    
    

在此範例中：

• 預設僅允許來自同源（'self'）的資源。
• 允許來自同一來源和 cdnjs.cloudflare.com CDN 的腳本。
• 允許內聯樣式（'unsafe-inline'），但為了更好的安全性，應盡可能避免這種情況。

強大 CSP 的技巧

1.避免「unsafe-inline」和「unsafe-eval」： 這些允許內聯腳本和樣式，這些腳本和樣式可以被利用。請改用基於隨機數或基於哈希的策略。

2.使用僅報告模式： 從 Content-Security-Policy-Report-Only 開始記錄違規行為而不強制執行策略，從而允許您微調策略。

3.定期更新 CSP： 隨著您的應用程式的發展，請確保更新您的 CSP 以反映新的資源要求和安全最佳實踐。

結論

實施強大的內容安全策略是保護 JavaScript 應用程式免受一系列攻擊的關鍵一步。透過了解 CSP 的基礎知識並遵循最佳實踐，您可以顯著增強 Web 應用程式的安全狀況。從基本策略開始，對其進行徹底測試，然後迭代以實現功能和安全性之間的完美平衡。