关于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 防护,降低了人为编码失误导致的安全风险。
相关推荐
lubiii_8 小时前
网络安全渗透测试第一步信息收集
安全·web安全·网络安全
你的人类朋友10 小时前
🔒什么是HMAC
后端·安全·程序员
阿部多瑞 ABU12 小时前
《基于国产Linux的机房终端安全重构方案》
linux·安全
小刘鸭地下城13 小时前
内容安全策略(CSP)深度指南:从基础配置到高级防护
安全
内心如初20 小时前
应急响应事件处理(网络安全体系架构与应急响应的前置知识)
安全·web安全
Teamhelper_AR20 小时前
AR眼镜:化工安全生产的技术革命
安全·ar
zz-zjx20 小时前
堡垒机安全架构:从零搭建企业级防护(单节点版)
安全·ssh·安全架构
纪元A梦20 小时前
Redis最佳实践——安全与稳定性保障之高可用架构详解
redis·安全·架构
一枚前端小能手21 小时前
🛡️ Token莫名其妙就泄露了?JWT安全陷阱防不胜防
前端·javascript·安全
lypzcgf1 天前
Coze源码分析-资源库-创建知识库-基础设施/存储/安全
安全·go·coze·coze源码分析·智能体平台·ai应用平台·agent开发平台