了解动态加载所有内容时的 connect-src、script-src 和 style-src

Question

我对@9​​87654321@ 提供的指令有点困惑。主要与connect-src、script-src和style-src混淆

我有一个 javascript，它发送 Fetch、Ajax（在同一个域上）并动态加载具有样式表的链接标签。

如果我必须将我的脚本列入某个域的白名单，这应该是所有connect-src、script-src 和style-src 的一部分吗？我在这里有点困惑。

为了更清楚，https://example.com 有一个脚本，它从https://example.com 加载、发送数据并加载位于https://some-another-domain.com 的样式表。内容安全策略应如何反映这一点？ connect-src、script-src 和 style-src 是否应该同时包含这两个域？

有人可以帮忙澄清一下吗？

Answer 1

每个指令应该只包含它所涵盖的源（控制）。

1. connect-src 指令 covers 可以使用以下脚本 API 接口从中加载资源的 URL（请参阅 test）：

• <a ping='...'>
• fetch()
• XMLHttpRequest()
• sendBeacon()
• WebSocket()（因此 ws:/wss: 方案只能在 connect-src/default-src 中指定）
• EventSource()

因此，如果您执行XMLHttpRequest('https://example.com/ajax') 或使用内部调用XMLHttpRequest() 的jQuery $ajax('https://example.com/ajax')，则需要在connect-src 中允许https://example.com：
connect-src https://example.com;
同样，如果您使用fetch('https://google.com/api/json')，则需要将此主机源添加到connect-src：
connect-src https://example.com https://google.com/api/;
以上所有 6 个 API 依此类推。

1. script-src 指令controls 5 件事：

• 通过<script src='http://example.com/script.js'></script> 加载外部脚本。为此，您需要在 script-src 中允许相关的主机源。或者可以使用'nonce-value'/'hash-value' 令牌。
• 像<script>...</script> 这样的内联脚本块。您需要在 script-src 中使用 'unsafe-inline' 或 'nonce-value'/'hash-value' 标记来允许此类脚本。
• eval()、setTimeout()、setInterval()、Function()、setImmediate()、execScript() 函数调用在 'unsafe-eval' 源表达式上进行门控。如果你使用那些你需要在script-src 中有'unsafe-eval'（setTimeout()/setInterval() 有一些例外）。
• 导航到 <a href='javascript:...'> 等 javascript-URL。
• 在<div onblur='...'>、<input onclick='...'> 等标签中嵌入事件处理程序。
  * 对于最后两件事，您需要在 script-src 指令中添加“unsafe-inline”或使用 unsafe-hashes + @987654370 @ 标记配对（目前支持一些错误）。

1. style-src 指令covers 几件事（参见test）：

• 样式表请求通过<link href='http://example.com/min/css.css' rel='stylesheet'>。在这种情况下，您需要将http://example.com host-source 添加到style-src 指令中。
• 来自 CSS @import url('https://example.com/style_import.css') 的样式表请求
• 来自链接 HTTP 响应标头字段 Link: https://example.com/file.css; rel=stylesheet 的样式表请求。
• 内联样式块：<style>...</style>。您需要在 style-src 中包含 'unsafe-inline' 或 'nonce-value'/'hash-value' 才能允许这些。
• 标签中的 style= 属性：<tag style='color:green; margin:0 auto;'>。您需要在style-src 中有'unsafe-inline' 才能允许这些。或将'unsafe-hashes' + 'hash-value' 配对使用（目前尚未广泛支持）。
  * JS 调用setAttribute('style', 'display:none;') 被视为上面的<tag style='display:none;'>。
• 在style-src 中使用CSSStyleSheet.insertRule()、CSSGroupingRule.insertRule()、CSSStyleDeclaration.cssText 和CSSStyleRule.selectorText 本来是要与'unsafe-eval' 绑定的，但它尚未实现。

上述结构的任何使用（甚至通过脚本调用）都需要在styler-src 指令中允许相关的来源或标记。