编辑“︁HTML内容安全策略（CSP）”︁（章节）

= HTML内容安全策略（CSP） =  
'''HTML内容安全策略'''（Content Security Policy，简称CSP）是一种通过HTTP响应头或HTML元标签定义的网络安全机制，用于防止跨站脚本攻击（XSS）、数据注入攻击等安全威胁。它通过限制网页可以加载的资源（如脚本、样式、图片、字体等）的来源，从而减少恶意代码执行的风险。

== 基本概念 ==  
CSP的核心思想是'''白名单机制'''，即开发者明确声明哪些外部资源可以被加载和执行。浏览器会根据策略规则阻止不符合要求的资源请求。  

CSP的主要功能包括：  
* 限制脚本来源（内联脚本、外部脚本）  
* 控制资源加载（如图片、字体、媒体文件）  
* 禁止`eval()`等不安全代码执行方式  
* 报告策略违规行为（通过报告端点）  

== 如何实现CSP ==  
CSP可以通过以下两种方式实现：  

=== 1. 通过HTTP响应头 ===  
服务器在响应头中设置`Content-Security-Policy`字段：  

<syntaxhighlight lang="http">  
Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com; style-src 'self' 'unsafe-inline'; img-src *;  
</syntaxhighlight>  

=== 2. 通过HTML元标签 ===  
在HTML的`<meta>`标签中定义策略：  

<syntaxhighlight lang="html">  
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">  
</syntaxhighlight>  

== 常用指令 ==  
以下是一些关键的CSP指令及其作用：  

{| class="wikitable"  
|+ CSP常用指令  
! 指令 !! 作用 !! 示例  
|-  
| <code>default-src</code> || 默认资源加载策略 || <code>default-src 'self'</code>  
|-  
| <code>script-src</code> || 控制JavaScript来源 || <code>script-src 'self' 'unsafe-inline'</code>  
|-  
| <code>style-src</code> || 控制CSS来源 || <code>style-src 'self' https://fonts.googleapis.com</code>  
|-  
| <code>img-src</code> || 控制图片来源 || <code>img-src * data:</code>  
|-  
| <code>report-uri</code> || 违规报告发送地址 || <code>report-uri /csp-report-endpoint</code>  
|}  

== 实际案例 ==  
=== 案例1：阻止内联脚本 ===  
默认情况下，CSP会阻止内联脚本（如`<script>alert('XSS')</script>`）。若需允许内联脚本，需添加`'unsafe-inline'`：  

<syntaxhighlight lang="http">  
Content-Security-Policy: script-src 'self' 'unsafe-inline';  
</syntaxhighlight>  

=== 案例2：限制图片加载域 ===  
以下策略仅允许从本站和指定的CDN加载图片：  

<syntaxhighlight lang="http">  
Content-Security-Policy: img-src 'self' https://images.cdn.example.com;  
</syntaxhighlight>  

== 高级用法 ==  
=== 非随机数（Nonce）和哈希（Hash） ===  
为了更安全地允许特定内联脚本，可以使用'''nonce'''或'''hash'''：  

<syntaxhighlight lang="html">  
<script nonce="random123">  
  console.log("This script is allowed by CSP");  
</script>  
</syntaxhighlight>  

对应的CSP头：  
<syntaxhighlight lang="http">  
Content-Security-Policy: script-src 'nonce-random123';  
</syntaxhighlight>  

=== 报告模式 ===  
在部署初期，可以使用`Content-Security-Policy-Report-Only`头仅报告违规而不阻止资源：  

<syntaxhighlight lang="http">  
Content-Security-Policy-Report-Only: default-src 'self'; report-uri /csp-report;  
</syntaxhighlight>  

== 策略设计示例 ==  
以下是一个严格的CSP策略示例：  

<syntaxhighlight lang="http">  
Content-Security-Policy:  
  default-src 'none';  
  script-src 'self' https://cdn.jsdelivr.net;  
  style-src 'self' 'unsafe-inline';  
  img-src 'self' data:;  
  font-src 'self';  
  connect-src 'self';  
  frame-src 'none';  
  report-uri /csp-reports;  
</syntaxhighlight>  

== 可视化策略流程 ==  
<mermaid>  
flowchart TD  
    A[浏览器加载页面] --> B{检查CSP头或meta标签}  
    B -->|策略存在| C[拦截不符合规则的请求]  
    B -->|无策略| D[允许所有资源加载]  
    C --> E[发送违规报告（如配置）]  
</mermaid>  

== 数学表达 ==  
CSP的策略匹配可以形式化为：  

<math>  
\text{AllowResource}(R) \iff R \in \bigcup_{i=1}^{n} \text{SourceList}_i  
</math>  

其中：  
* <math>R</math>是请求的资源  
* <math>\text{SourceList}_i</math>是策略中允许的来源列表  

== 总结 ==  
CSP是增强Web应用安全性的重要工具，通过精细控制资源加载来源，有效减少XSS等攻击风险。开发者应根据实际需求设计策略，并利用报告模式优化规则。

[[Category:编程语言]]
[[Category:HTML]]
[[Category:HTML安全性]]