【学习记录】浏览器的内容安全策略（CSP）

内容安全策略

内容安全策略（CSP）是一种浏览器安全机制，用于防止跨站脚本攻击（XSS）、数据注入攻击等安全威胁。它通过定义哪些资源可以被加载和执行，从而限制恶意内容的注入和执行。

1. 什么是内容安全策略？

内容安全策略是一种 HTTP 头部字段（Content-Security-Policy），用于指定网页可以加载哪些资源（如脚本、样式、图片、字体等），以及这些资源可以从哪些来源加载。

通过 CSP，开发者可以明确告诉浏览器哪些资源是可信的，从而减少恶意代码注入的风险。

2. CSP 的作用

CSP 的主要作用是防止以下安全威胁：

1. 跨站脚本攻击（XSS）

   • 通过限制脚本的来源和执行方式，防止恶意脚本注入。

2. 数据注入攻击

   • 防止恶意内容注入到网页中（如内联脚本、内联样式）。

3. 点击劫持（Clickjacking）

   • 通过限制 iframe 的加载来源，防止点击劫持攻击。

4. 混合内容（Mixed Content）

   • 防止 HTTPS 页面加载 HTTP 资源，确保页面安全性。

3. CSP 的配置

CSP 通过 HTTP 响应头或 <meta> 标签进行配置。

3.1 HTTP 响应头

Content-Security-Policy: <策略指令>

3.2 <meta> 标签

<meta http-equiv="Content-Security-Policy" content="<策略指令>" />

4. CSP 的指令

CSP 的指令用于定义资源的加载规则。以下是一些常用的指令：

4.1 资源加载指令

• default-src：定义默认的资源加载策略（适用于未明确指定的资源类型）。
• script-src：定义脚本的加载来源。
• style-src：定义样式的加载来源。
• img-src：定义图片的加载来源。
• font-src：定义字体的加载来源。
• connect-src：定义 AJAX、WebSocket 等连接的来源。
• frame-src：定义 iframe 的加载来源。
• media-src：定义音频和视频的加载来源。
• object-src：定义插件（如 Flash）的加载来源。

4.2 特殊指令

• base-uri：限制 <base> 标签的 URL。
• form-action：限制表单提交的目标 URL。
• frame-ancestors：限制页面可以被哪些源嵌入（防止点击劫持）。
• report-uri：指定违规报告的上报地址。
• upgrade-insecure-requests：将 HTTP 资源自动升级为 HTTPS。

4.3 指令值

• 'none'：禁止加载任何资源。
• 'self'：只允许加载同源资源。
• 'unsafe-inline'：允许内联脚本和内联样式。
• 'unsafe-eval'：允许动态执行脚本（如 eval()）。
• https:：只允许加载 HTTPS 资源。
• data:：允许加载 data: URL 资源。
• example.com：允许加载指定域名的资源。

5. CSP 的示例

5.1 基本配置

• 只允许加载同源资源：

  Content-Security-Policy: default-src 'self'
  

• 允许加载同源和指定域名的资源：

  Content-Security-Policy: default-src 'self' https://example.com
  

5.2 防止 XSS

• 禁止内联脚本和内联样式：

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

• 允许内联脚本和内联样式：

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

5.3 防止点击劫持

• 禁止页面被嵌入到 iframe 中：

  Content-Security-Policy: frame-ancestors 'none'
  

• 只允许特定域名嵌入页面：

  Content-Security-Policy: frame-ancestors https://example.com
  

5.4 上报违规行为

• 将违规行为上报到指定地址：

  Content-Security-Policy: default-src 'self'; report-uri https://example.com/csp-report
  

6. CSP 的常见问题

6.1 内联脚本和内联样式被阻止

• 原因：CSP 默认禁止内联脚本和内联样式。

• 解决方法

  • 使用 'unsafe-inline' 允许内联脚本和内联样式。
  • 将内联脚本和内联样式提取到外部文件中。

6.2 动态脚本执行被阻止

• 原因：CSP 默认禁止动态脚本执行（如 eval()）。

• 解决方法

  • 使用 'unsafe-eval' 允许动态脚本执行。
  • 避免使用 eval() 等动态执行方法。

6.3 资源加载失败

• 原因：CSP 配置过于严格，导致资源无法加载。

• 解决方法

  • 检查 CSP 配置，确保允许加载所需资源。
  • 使用浏览器开发者工具查看 CSP 违规报告。

7. CSP 的浏览器支持

• 所有现代浏览器都支持 CSP。
• 可以通过 Content-Security-Policy-Report-Only 头部字段测试 CSP 配置，而不会实际阻止资源加载。

8. 总结

• 内容安全策略（CSP）是一种强大的浏览器安全机制，用于防止 XSS、数据注入等攻击。
• 通过配置 CSP 指令，可以限制资源的加载来源和执行方式。
• 合理配置 CSP 可以显著提升网站的安全性。