在单页应用程序中定义动态内容安全策略答案

【问题标题】：Defining a dynamic Content Security Policy in a Single Page Application在单页应用程序中定义动态内容安全策略
【发布时间】：2021-07-07 04:04:24
【问题描述】：

我想定义一个内容安全策略，默认情况下允许从任何来源加载图像，但将其限制为仅允许网站某些部分中的一组特定来源。

在为每次导航发出新 HTTP 请求的传统网站中，这可以通过为需要更严格策略的页面发送不同的 Content-Security-Policy HTTP 标头来轻松完成。但是在单页应用程序中，这当然是不可能的，因为导航到应用程序的限制性更强的部分不会导致新的 HTTP 请求（我也想在比 URL 导航更动态的条件下定义策略）。

我知道——除了在 HTTP 标头中——CSP 策略也可以在 meta 标记中定义，当定义多个 CSP 策略时，请求 must pass all of them 被允许。因此，我解决问题的第一种方法是在整个页面的 Content-Security-Policy 标头中设置默认 CSP，然后在需要时通过在文档的标头中添加 <meta http-equiv="Content-Security-Policy" content="…"> 标记来动态设置更多限制性策略。

这对于动态添加更多限制性策略非常有效。最大的问题是删除或修改该元标记不会删除或修改相关的内容安全策略（在 Firefox 中的 Chrome 中测试）。此行为在W3C Content Security Policy spec 中定义：

注意：在解析元素后对meta 元素的content 属性的修改将被忽略。

那么有没有办法动态添加（更重要的是删除）不依赖于 HTTP 导航的内容安全策略？我想避免默认设置限制性图像策略，然后通过散列或随机数排除单个图像，因为这将非常复杂。

【问题讨论】：

不，没有。即使有某种“黑客”，也可能会在新版本的浏览器发布时打补丁。

标签： http security single-page-application progressive-web-apps content-security-policy

【解决方案1】：

在 SPA 中，您每次都可以创建一个新的全屏 iframe 并通过脚本填充它。 <iframe>，作为嵌套浏览上下文，可以有自己的 CSP 元标记，而与父页面无关。
父页面将只包含管理 iframe 内容的脚本，也许可以为此目的使用 Worker()。

【讨论】：