关于Web前端安全防御之内容安全策略(CSP)

一、CSP 的核心作用

CSP(Content Security Policy,内容安全策略)是一种由浏览器强制执行的安全层,核心作用是限制网页可以加载和执行的资源来源(如脚本、样式、图片等),以及控制页面的行为(如是否、表单提交等)。通过明确指定可信的资源来源和允许的操作,CSP 能有效防御 XSS、点击劫持、数据注入等多种攻击,从根源上阻断恶意代码的加载和执行。

二、三个关键 CSP 指令及用途

CSP 通过多个指令精细控制不同类型的资源和行为,以下是三个核心指令:

1.script-src

  • 用途:限制页面可以加载和执行的脚本来源(包括 <script> 标签、事件处理器、eval() 等)。
  • 示例:script-src 'self' https://trusted-cdn.com 表示仅允许加载本站域名('self')和 trusted-cdn.com 的脚本,禁止其他来源的脚本(如恶意网站的脚本)。

2.img-src

  • 用途:限制页面可以加载的图片资源来源(包括 <img>、CSS background-image 等)。
  • 示例:img-src 'self' data: https://images.example.com 表示允许加载本站图片、data: 协议的 Base64 图片,以及 images.example.com 域名的图片,防止恶意图片(如用于追踪或钓鱼的图片)被加载。

3.default-src

  • 用途:作为所有其他资源指令(如 script-src、img-src)的默认值,当某个资源类型未单独指定指令时,使用 default-src 的配置。
  • 示例:default-src 'self' 表示所有未明确指定的资源类型(如音频、视频、字体等)均仅允许从本站加载,简化配置的同时提供基础安全保障。

三、配置 CSP 允许信任的 CDN 加载脚本,同时禁止内联脚本

要实现 "允许可信 CDN 加载脚本 + 禁止内联脚本",需通过 script-src 指令精确配置,并禁用内联脚本的所有形式(包括 <script> 标签内容、onclick 等事件属性、javascript: 协议)。

配置示例:

html 复制代码
Content-Security-Policy: script-src 'self' https://cdn.example.com https://another-trusted-cdn.com; object-src 'none'
  • 允许可信来源:'self' 允许本站脚本,https://cdn.example.comhttps://another-trusted-cdn.com 允许指定 CDN 的脚本。
  • **禁止内联脚本:**未包含 'unsafe-inline'(允许内联脚本的关键词),因此浏览器会拦截所有内联脚本(如 <script>alert(1)</script>、οnclick="..." 等)。
  • **额外加固:**object-src 'none' 禁止加载 <object>、<embed> 等潜在危险资源,进一步减少攻击面。

注意事项:

若需保留部分内联脚本(不推荐),可使用哈希值随机 nonce授权:

  • **哈希值:**script-src 'sha256-abc123...'(计算内联脚本的哈希值,仅允许匹配的内联脚本执行)。
  • **Nonce:**script-src 'nonce-random123' 并在 <script nonce="random123"> 中使用相同 nonce(每次请求生成随机值,避免复用)。

四、2025 年 CSP 新增指令及 require-trusted-types-for 的作用

CSP 标准持续演进,2025 年新增的指令主要聚焦于强化 XSS 防护和资源控制,以下是几个重要更新:

1.require-trusted-types-for 'script'

  1. 作用:强制要求所有动态插入到 DOM 的内容(如通过 innerHTML、document.write 等 API)必须经过 "可信类型"(Trusted Types)验证,禁止直接使用字符串作为 HTML / 脚本插入。
  2. 增强 XSS 防护的原理:
  • 传统防御依赖开发者手动转义输入,而 require-trusted-types-for 从 API 层面阻断危险操作 ------ 若代码尝试将字符串直接传给 innerHTML,浏览器会拒绝执行并报错。
  • 开发者必须通过预定义的 "可信类型策略"(如 TrustedHTML)处理内容,确保输入经过自动转义或过滤,从根源上防止未处理的恶意字符串被注入 DOM。

2.style-src-attr 和 style-src-elem(进一步细化样式控制)

  • 作用:将原有的 style-src 拆分为两个指令,分别控制样式属性(如 <div style="...">)和 <style> 标签的来源,更精细地限制内联样式和外部样式表。

3.navigate-to

  • 作用:限制页面可以导航到的 URL 来源(包括 <a> 链接、window.location 跳转等),防止恶意跳转至钓鱼网站。

总结

  • CSP 的核心是通过限制资源来源和行为,构建网页的安全边界。
  • 关键指令如 script-src、img-src、default-src 分别控制脚本、图片和默认资源的加载。
  • 配置可信 CDN 并禁止内联脚本时,需通过 script-src 明确指定来源,避免 'unsafe-inline'。
  • 2025 年新增的 require-trusted-types-for 等指令通过强制内容验证机制,进一步强化了 XSS 防护,降低了人为编码失误导致的安全风险。
相关推荐
带娃的IT创业者2 小时前
第4集:配置管理的艺术:环境变量、多环境配置与安全实践
开发语言·python·安全·项目配置·开发基础
white-persist3 小时前
Burp Suite模拟器抓包全攻略
前端·网络·安全·web安全·notepad++·原型模式
网安小白的进阶之路8 小时前
A模块 系统与网络安全 第四门课 弹性交换网络-3
网络·安全·web安全
安当加密9 小时前
基于PostgreSQL的TDE透明加密解决方案:构建数据全生命周期的国密合规安全体系
安全·postgresql·区块链
源文雨10 小时前
MacOS 下 Warp ping 局域网设备报错 ping: sendto: No route to host 的解决方法
运维·网络协议·安全·macos·网络安全·ping
周某人姓周11 小时前
安全初级(二)HTTP
网络协议·安全·http
Hello.Reader11 小时前
在运行中的 Kafka 集群渐进式启用安全零停机实战手册(KRaft/Broker 通用)
分布式·安全·kafka
国科安芯14 小时前
关于软错误的常见问题解答
单片机·嵌入式硬件·安全·硬件架构·软件工程
小红帽61516 小时前
使用burp工具的intruder模块进行密码爆破
网络·安全·html
老赵聊算法、大模型备案16 小时前
2025年6-8月中国大模型备案分析报告
大数据·人工智能·安全·语言模型·aigc