跳转到内容

HTML内容安全策略(CSP)

来自代码酷

HTML内容安全策略(CSP)[编辑 | 编辑源代码]

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

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

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

CSP的主要功能包括:

  • 限制脚本来源(内联脚本、外部脚本)
  • 控制资源加载(如图片、字体、媒体文件)
  • 禁止`eval()`等不安全代码执行方式
  • 报告策略违规行为(通过报告端点)

如何实现CSP[编辑 | 编辑源代码]

CSP可以通过以下两种方式实现:

1. 通过HTTP响应头[编辑 | 编辑源代码]

服务器在响应头中设置`Content-Security-Policy`字段:

  
Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com; style-src 'self' 'unsafe-inline'; img-src *;

2. 通过HTML元标签[编辑 | 编辑源代码]

在HTML的`<meta>`标签中定义策略:

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

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

以下是一些关键的CSP指令及其作用:

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

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

案例1:阻止内联脚本[编辑 | 编辑源代码]

默认情况下,CSP会阻止内联脚本(如`<script>alert('XSS')</script>`)。若需允许内联脚本,需添加`'unsafe-inline'`:

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

案例2:限制图片加载域[编辑 | 编辑源代码]

以下策略仅允许从本站和指定的CDN加载图片:

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

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

非随机数(Nonce)和哈希(Hash)[编辑 | 编辑源代码]

为了更安全地允许特定内联脚本,可以使用noncehash

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

对应的CSP头:

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

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

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

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

策略设计示例[编辑 | 编辑源代码]

以下是一个严格的CSP策略示例:

  
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;

可视化策略流程[编辑 | 编辑源代码]

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

CSP的策略匹配可以形式化为:

AllowResource(R)Ri=1nSourceListi

其中:

  • R是请求的资源
  • SourceListi是策略中允许的来源列表

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

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

Syntax error in graphmermaid version 9.1.1