CSP Content Security Policy（内容安全策略）

睡不着的可乐

于 2025-01-21 11:32:46 发布

阅读量1.3k

点赞数 25

文章标签：前端 web安全

本文链接：https://blog.csdn.net/qq_42822849/article/details/145280389

版权

CSP Content Security Policy（内容安全策略）

CSP 前端中的 CSP 指的是 Content Security Policy（内容安全策略），是一种用于提升网站安全性的浏览器功能。CSP 主要用于防止 XSS（跨站脚本攻击）和数据注入攻击，通过限制网页中的内容来源（如脚本、样式、图像、媒体等）来降低被恶意代码利用的风险。

CSP 在前端的作用

CSP 可以通过 HTTP 响应头或 <meta> 标签来定义安全策略，规定前端页面中允许加载的资源来源。它的核心作用是控制前端页面中内容的加载来源，确保只能加载可信的内容。

主要作用包括：

防止 XSS 攻击：
- 禁止内联脚本（inline script，如 <script> 中的代码）。
- 限制只加载来自可信域名的脚本资源。
防止恶意外部资源加载：
- 限制外部资源（如图片、视频、CSS 等）的来源。
- 阻止加载未经授权的第三方内容。
防止数据注入：
- 限制通过特定方式注入的内容（如动态生成的脚本）。
日志与监控：
- CSP 可以通过 report-uri 或 report-to 将违规行为记录到服务器，便于分析和监控。

CSP 的主要指令

default-src（默认资源来源）
控制所有类型的资源（脚本、图片、样式等）的默认来源。

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

‘self’ 表示只允许加载当前域的资源。

script-src（脚本来源）
限制 <script> 和动态脚本的加载来源。

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

仅允许当前域和 https://trusted.com 加载脚本。

style-src（样式来源）
限制 <style> 标签或外部 CSS 的加载来源。

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

'unsafe-inline' 表示允许内联样式（但一般不推荐，因为会降低安全性）。

img-src（图片来源）
限制<img>中图片的加载来源。

Content-Security-Policy: img-src 'self' data:

允许从当前域加载图片，也允许 data: URI 格式的图片（如 Base64 编码）。

connect-src（网络请求来源）
限制通过 XMLHttpRequest、fetch、WebSocket 等方式发出的请求。

Content-Security-Policy: connect-src 'self' https://api.trusted.com

font-src（字体来源）
限制字体文件的加载来源。

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

frame-src（嵌套内容来源）
控制 <iframe> 中嵌套内容的来源。

Content-Security-Policy: frame-src 'self' https://trusted.com

前端开发中使用 CSP 的注意事项

尽量避免内联脚本：
- CSP 默认会禁止内联脚本（即 <script> 标签直接书写的代码），包括事件处理程序（如 onclick="..."）。
- 如果必须使用内联脚本，可以通过 nonce 或 hash 的方式让 CSP 允许某些特定的内联脚本。
避免使用通配符：
- 虽然可以用 * 来允许所有来源，但这会降低安全性。
- 推荐尽量精确地指定来源。
开发环境和生产环境策略区分：
- 在开发环境中可以使用宽松的策略方便调试。
- 在生产环境中应尽量使用严格的 CSP 策略。
CSP 报警监控：
- 配置 report-uri 或 report-to，可以记录并监控 CSP 违规行为，帮助发现潜在的安全问题。

示例：CSP 配置

通过 HTTP 响应头设置 CSP：

Content-Security-Policy: default-src 'self'; script-src 'self' https://cdn.example.com; style-src 'self'; img-src 'self' https://images.example.com; connect-src 'self' https://api.example.com; report-uri /csp-violation-report-endpoint/

通过<meta>标签设置 CSP：

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