时间戳

首页 > 解决方案 > 在单页应用程序中定义动态内容安全策略

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

问题描述

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

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

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

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

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

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

标签： httpsecuritysingle-page-applicationprogressive-web-appscontent-security-policy

解决方案

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

推荐阅读