如何在iFrame中使用CSP？阻止非同源JS加载执行问题

要解决你遇到的问题——阻止good.com/main.html加载bad.com/c.js这类非同源资源，Content Security Policy (CSP) 是最可靠的工具，结合iframe的sandbox属性可以精准实现需求。我来详细说明：

1. 为什么你之前的Sandbox配置没生效？ #

你之前用的sandbox="allow-same-origin allow-scripts"，作用是让iframe内的页面保留原同源身份并允许执行脚本，但它不限制跨域资源加载。Sandbox的核心是隔离页面权限（比如禁止弹窗、表单提交），而非控制资源来源，所以无法阻止bad.com的脚本加载。

2. 用CSP限制资源加载（推荐方案） #

CSP可以明确指定页面允许加载的资源来源，你有两种实现方式：

方式一：直接在iframe标签上添加CSP属性 #

如果无法修改good.com的服务器配置，直接在iframe上设置contentsecuritypolicy属性，强制限制脚本仅来自good.com：

<iframe 
  src="https://good.com/main.html" 
  scrolling="no" 
  style="overflow: hidden; height: 700px;"
  sandbox="allow-scripts"
  contentsecuritypolicy="script-src 'self' https://good.com; object-src 'none'; frame-src 'none';"
></iframe>

规则解释：

• script-src 'self' https://good.com：仅允许加载来自good.com同源（'self'对应iframe的src域名）和明确指定的https://good.com的脚本，自动拦截bad.com的跨域脚本
• object-src 'none'：禁止加载插件类资源（如Flash），增强安全性
• frame-src 'none'：禁止页面嵌套其他iframe，避免额外风险

⚠️ 注意：这里我移除了allow-same-origin，因为保留它可能会让good.com自身的CSP（如果有的话）覆盖我们设置的规则。去掉后，iframe页面会被隔离在独立源中，但我们的CSP规则依然会生效，同时允许加载good.com的a.js和b.js。

方式二：在good.com服务器端设置CSP响应头 #

如果你能控制good.com的服务器，可以在返回main.html时添加CSP响应头，这样无论页面在哪里加载，都会自动遵循规则：

Content-Security-Policy: script-src 'self'; object-src 'none'; frame-src 'none';

这个规则会强制页面仅加载同源脚本，直接阻止所有跨域资源（包括bad.com/c.js）。

3. 处理内联脚本的特殊情况 #

如果good.com/main.html包含内联脚本，默认会被CSP拦截。你有两个选择：

• 临时允许内联脚本：在CSP规则中添加'unsafe-inline'（不推荐，降低安全性）
• 使用脚本哈希值：计算内联脚本的SHA-256哈希，添加到CSP规则中，仅允许特定内联脚本执行。例如：

  contentsecuritypolicy="script-src 'self' https://good.com 'sha256-abcdef123456...'; ..."
  

内容的提问来源于stack exchange，提问作者RPT