Skip to content

CSP 与沙箱:前端脚本执行边界如何收紧

主题边界

  • Content Security Policy 控制页面可从哪些源加载哪些资源,以及哪些脚本执行方式被允许。
  • 沙箱机制则常用于 iframe 或不可信内容隔离。

机制与流程

  • CSP 通过响应头声明 script-srcstyle-srcimg-srcconnect-src 等策略,限制资源来源和内联执行方式。
  • 现代 CSP 通常使用 nonce 或 hash 允许特定内联脚本,而不是一刀切地开放 unsafe-inline
  • iframe sandbox 可以按能力位开放脚本、表单、同源访问、弹窗等权限,默认是强限制容器。

关键差异

  • CSP 控制的是资源与执行策略,sandbox 控制的是一个嵌入浏览上下文的能力集合。
  • 开发阶段的宽松策略和线上严策略差异很常见,但需要清楚知道为什么放宽。

边界条件

  • 引入第三方脚本、内联样式、SSR 状态注水和动态脚本创建时,CSP 配置容易被破坏。
  • 只上报不阻断的 Report-Only 模式适合观察兼容问题,但不能当作真正防护。

工程落点

  • CSP 往往需要和构建系统、SSR 模板、CDN 域名、埋点脚本和错误上报一起设计。
  • 对富文本、广告位、第三方嵌入场景,sandbox 和 postMessage 协议设计同样重要。

相关主题