掌握 JavaScript 應用程式的內容安全策略 (CSP)：實用指南-js教程-PHP中文網

掌握 JavaScript 應用程式的內容安全策略 (CSP)：實用指南

WBOY

發布： 2024-07-18 10:15:41

原創

511 人瀏覽過

Mastering Content Security Policy (CSP) for JavaScript Applications: A Practical Guide

在不斷發展的網路安全領域，內容安全策略(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 步：定義您的政策

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

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://trusted.cdn.com; style-src 'self' 'unsafe-inline'; img-src 'self' data:;">

登入後複製

步驟 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 載入腳本和樣式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://cdnjs.cloudflare.com; style-src 'self' 'unsafe-inline';">
    <title>Secure CSP Example</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
</head>
<body>
    <h1>Content Security Policy Example</h1>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            console.log('jQuery is working!');
        });
    </script>
</body>
</html>

登入後複製

在此範例中：