Appearance
CSP 与沙箱:前端脚本执行边界如何收紧
主题边界
- Content Security Policy 控制页面可从哪些源加载哪些资源,以及哪些脚本执行方式被允许。
- 沙箱机制则常用于 iframe 或不可信内容隔离。
机制与流程
- CSP 通过响应头声明
script-src、style-src、img-src、connect-src等策略,限制资源来源和内联执行方式。 - 现代 CSP 通常使用 nonce 或 hash 允许特定内联脚本,而不是一刀切地开放
unsafe-inline。 - iframe sandbox 可以按能力位开放脚本、表单、同源访问、弹窗等权限,默认是强限制容器。
关键差异
- CSP 控制的是资源与执行策略,sandbox 控制的是一个嵌入浏览上下文的能力集合。
- 开发阶段的宽松策略和线上严策略差异很常见,但需要清楚知道为什么放宽。
边界条件
- 引入第三方脚本、内联样式、SSR 状态注水和动态脚本创建时,CSP 配置容易被破坏。
- 只上报不阻断的 Report-Only 模式适合观察兼容问题,但不能当作真正防护。
工程落点
- CSP 往往需要和构建系统、SSR 模板、CDN 域名、埋点脚本和错误上报一起设计。
- 对富文本、广告位、第三方嵌入场景,sandbox 和 postMessage 协议设计同样重要。