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

关注

原创 2025-06-09 10:06:53 2.3k 阅读 AI 写同款· GEO 优化 ›

Vue进阶（三十三）Content-Security-Policy（CSP）详解_content-security-policy前端和后端 CSP) 是一种加固 Web 应用的安全性技术，通过在网站页面中设置 CSP Header 来限制页面中能够执行的脚本、样式、图片等资源。CSP 包括很多不同的策略，因此安全设置的具体值取决目标网站的需求和资源使用情况。一般而言，建议设置较为严格的 CSP，以避免XSSCSRF等安全问题。以上设置的 CSP 规则禁止所有来自第三方网站的资源，只允许本网站的资源加载。其中script-src只允许本网站和 example.com 的脚本加载，img-src只允许本网站和 data: URI 的图片加载，阅读详情

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:;">

收录于

http-网络

标签

#前端 #web安全

网站扫描出的漏洞解决：检测到目标Content-Security-Policy、X-XSS-Protection/Content-Security-Policy响应头缺失、加密算法等处理修复方法 Content Security Policy (CSP) 通过告诉浏览器一系列规则，严格规定页面中哪些资源允许有哪些来源，不在指定范围内的统统拒绝，可以服务器添加 Content-Security-Policy 头信息来指定规则解决。connect-src *会使安全进行升级，即一个http页面中所有调用的静态资源会自动升级使用https调用。但这样也会产生很多问题，如果调用的资源实际并不支持https的话，这时如果不是线上环境可以不理会，线上环境使用https就没有这样的问题了。阅读详情

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

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

CSP 在前端的作用

CSP 的主要指令

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

示例：CSP 配置

相关推荐