编辑“︁JavaScript内容安全策略（CSP）”︁

= JavaScript内容安全策略（CSP） =

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

== 基本概念 ==

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

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

== 如何配置CSP ==

CSP可以通过两种方式配置：
1. '''HTTP响应头'''（推荐方式）：
   <syntaxhighlight lang="http">
   Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com;
   </syntaxhighlight>
2. '''HTML的<meta>标签'''：
   <syntaxhighlight lang="html">
   <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://trusted.cdn.com">
   </syntaxhighlight>

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

== 代码示例 ==

=== 基本策略示例 ===
以下是一个简单的CSP策略，仅允许加载同源的脚本和样式：
<syntaxhighlight lang="http">
Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self';
</syntaxhighlight>

=== 允许特定CDN的脚本 ===
如果网站使用了jQuery等库，可以允许特定CDN的脚本：
<syntaxhighlight lang="http">
Content-Security-Policy: script-src 'self' https://code.jquery.com;
</syntaxhighlight>

=== 内联脚本的处理 ===
默认情况下，CSP会阻止内联脚本（如`<script>alert('test');</script>`）。如果需要允许内联脚本，可以使用`'unsafe-inline'`，但这是不推荐的：
<syntaxhighlight lang="http">
Content-Security-Policy: script-src 'self' 'unsafe-inline';
</syntaxhighlight>

更安全的方式是使用'''nonce'''或'''hash'''：
<syntaxhighlight lang="html">
<script nonce="random123">
  alert('Allowed because of nonce');
</script>
</syntaxhighlight>
对应的CSP头：
<syntaxhighlight lang="http">
Content-Security-Policy: script-src 'nonce-random123';
</syntaxhighlight>

== 实际案例 ==

=== 案例1：防止XSS攻击 ===
假设一个网站允许用户输入评论，但没有CSP保护。攻击者可以注入以下脚本：
<syntaxhighlight lang="html">
<script>alert('XSS Attack!');</script>
</syntaxhighlight>
如果配置了CSP策略：
<syntaxhighlight lang="http">
Content-Security-Policy: script-src 'self';
</syntaxhighlight>
浏览器会阻止该内联脚本的执行，从而防止攻击。

=== 案例2：限制资源加载 ===
一个网站只允许加载来自自己域名和特定CDN的图片：
<syntaxhighlight lang="http">
Content-Security-Policy: img-src 'self' https://trusted.cdn.com;
</syntaxhighlight>
如果页面尝试加载`http://malicious.site/image.jpg`，浏览器会阻止。

== 高级用法 ==

=== 报告模式 ===
CSP支持'''报告模式'''（Report-Only），仅记录违规行为而不阻止加载：
<syntaxhighlight lang="http">
Content-Security-Policy-Report-Only: default-src 'self'; report-to /csp-report-endpoint;
</syntaxhighlight>

=== 使用nonce和hash ===
为了更安全地允许内联脚本或样式，可以使用'''nonce'''（一次性随机值）或'''hash'''（脚本内容的哈希值）：
<syntaxhighlight lang="http">
Content-Security-Policy: script-src 'nonce-random123' 'sha256-abc123...';
</syntaxhighlight>

== 图表说明 ==

以下是CSP策略的流程图：
<mermaid>
graph TD
    A[浏览器加载页面] --> B{检查CSP策略}
    B -->|允许| C[加载资源]
    B -->|阻止| D[阻止资源并报告]
    D --> E[发送报告到report-uri]
</mermaid>

== 数学表达 ==

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

== 总结 ==

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

[[Category:编程语言]]
[[Category:JavaScript]]
[[Category:Javascript安全]]