JavaScript内容安全策略（CSP）[编辑 | 编辑源代码]

JavaScript内容安全策略（Content Security Policy，简称CSP）是一种用于增强网页安全性的机制，它通过限制浏览器可以加载和执行的资源（如脚本、样式、图片等）来减少跨站脚本攻击（XSS）、数据注入攻击等安全风险。CSP通过HTTP响应头或<meta>标签定义策略规则，是现代Web开发中的重要安全工具。

基本概念[编辑 | 编辑源代码]

CSP的核心思想是白名单机制，即开发者明确指定哪些来源的资源是可信的，浏览器仅加载和执行这些来源的内容。默认情况下，如果没有CSP策略，浏览器会加载任何来源的资源，这可能导致恶意脚本的执行。

主要目标[编辑 | 编辑源代码]

防止XSS攻击：限制内联脚本和外部脚本的加载。
控制资源加载：限制图片、样式、字体等资源的来源。
报告违规行为：记录违反策略的行为，便于开发者调试。

如何配置CSP[编辑 | 编辑源代码]

CSP可以通过两种方式配置： 1. HTTP响应头（推荐方式）：

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

2. HTML的<meta>标签：

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

常用指令[编辑 | 编辑源代码]

以下是CSP中常用的指令及其作用：

default-src：默认策略，适用于未明确指定的资源类型。
script-src：控制JavaScript脚本的来源。
style-src：控制CSS样式的来源。
img-src：控制图片的来源。
connect-src：限制AJAX、WebSocket等连接的来源。
report-uri（已废弃，推荐使用report-to）：指定违规报告发送的URL。

代码示例[编辑 | 编辑源代码]

基本策略示例[编辑 | 编辑源代码]

以下是一个简单的CSP策略，仅允许加载同源的脚本和样式：

Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self';

允许特定CDN的脚本[编辑 | 编辑源代码]

如果网站使用了jQuery等库，可以允许特定CDN的脚本：

Content-Security-Policy: script-src 'self' https://code.jquery.com;

内联脚本的处理[编辑 | 编辑源代码]

默认情况下，CSP会阻止内联脚本（如`<script>alert('test');</script>`）。如果需要允许内联脚本，可以使用`'unsafe-inline'`，但这是不推荐的：

Content-Security-Policy: script-src 'self' 'unsafe-inline';

更安全的方式是使用nonce或hash：

<script nonce="random123">
  alert('Allowed because of nonce');
</script>

对应的CSP头：

Content-Security-Policy: script-src 'nonce-random123';

实际案例[编辑 | 编辑源代码]

案例1：防止XSS攻击[编辑 | 编辑源代码]

假设一个网站允许用户输入评论，但没有CSP保护。攻击者可以注入以下脚本：

<script>alert('XSS Attack!');</script>

如果配置了CSP策略：

Content-Security-Policy: script-src 'self';

浏览器会阻止该内联脚本的执行，从而防止攻击。

案例2：限制资源加载[编辑 | 编辑源代码]

一个网站只允许加载来自自己域名和特定CDN的图片：

Content-Security-Policy: img-src 'self' https://trusted.cdn.com;

如果页面尝试加载`http://malicious.site/image.jpg`，浏览器会阻止。

高级用法[编辑 | 编辑源代码]

报告模式[编辑 | 编辑源代码]

CSP支持报告模式（Report-Only），仅记录违规行为而不阻止加载：

Content-Security-Policy-Report-Only: default-src 'self'; report-to /csp-report-endpoint;

使用nonce和hash[编辑 | 编辑源代码]

为了更安全地允许内联脚本或样式，可以使用nonce（一次性随机值）或hash（脚本内容的哈希值）：

Content-Security-Policy: script-src 'nonce-random123' 'sha256-abc123...';

图表说明[编辑 | 编辑源代码]

以下是CSP策略的流程图：

数学表达[编辑 | 编辑源代码]

CSP的哈希值计算方式如下： $hash = SHA-256 (scriptContent)$ 例如，对于脚本`alert('test');`，其SHA-256哈希值为： $sha256-abc123...$

总结[编辑 | 编辑源代码]

JavaScript内容安全策略（CSP）是保护现代Web应用的重要工具。通过合理配置CSP，开发者可以显著减少XSS等攻击的风险。建议始终使用严格的策略，并避免`'unsafe-inline'`等不安全选项。对于初学者，可以从简单的策略开始，逐步学习高级用法如nonce和hash。