CSP PHP 问题 LottiePlayer

Posted 2023-03-21

【中文标题】CSP PHP 问题 LottiePlayer

【英文标题】：CSP PHP issue LottiePlayer

【发布时间】：2021-08-25 23:12:46

【问题描述】：

我通过 php，fastcgi 使用 nonce 生成：

fastcgi_param NONCE $nonce;

在我添加的 CSP 中（使用 nginx + 标头）：

script-src 'strict-dynamic' 'nonce-$nonce'

整个 CSP 如下所示：

add_header Content-Security-Policy "default-src 'none'; frame-ancestors 'self'; base-uri 'none'; form-action 'self'; script-src 'strict-dynamic' 'nonce-$nonce'; script-src-elem 'self'; connect-src 'self' 'nonce-$nonce' https://www.w3.org; img-src 'self'; font-src 'self'; style-src 'self'";

通过 PHP 添加：

nonce="<?= $_SERVER['NONCE']?>"

在 DevTools 中我只看到：

nonce

没有：

nonce="number"

对吗？

已按原样解决。

主要问题是我在 DevTools 中看到来自使用 lottie player 脚本的错误，它说我不使用随机数或我肯定会使用的 sha hash。

错误如下：

lottie-player.js:1 Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-4Czhp/5smweUxQ0BkhMh9cmbPz4zsdDHhq70HOQBcHY='), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.

通过以下方式使用的每个彩票都会发生错误：

 <lottie-player></lottie-player>

这是脚本调用：

<script type="text/javascript" src="/lottie-player.js" nonce="<?= $_SERVER['REQUEST_ID'] ?>"></script>

用法：

<lottie-player src="/main.json" background="transparent" speed="1" autoplay></lottie-player>

我还尝试将 nonce 直接添加到 lottie-player，如下所示：

<lottie-player src="/main.json" background="transparent" speed="1" autoplay nonce="<?= $_SERVER['REQUEST_ID'] ?>"></lottie-player>

但这不是解决办法，这就是我寻求帮助的原因。

【问题讨论】：

请分享更多细节。您尝试过什么来解决问题？你被困在哪里了？

“在 DevTools 中我只看到：nonce 没有：nonce="number" 是否正确？” - 是的，我认为应该如此。浏览器必须隐藏该值以防止其他脚本访问（另请参见MDN: Accessing nonces and nonce hiding），因此很可能以同样的方式从开发工具中隐藏它。如果您想验证它是否正确填充，您需要检查浏览器收到的实际 html 源代码。

@NicoHaase，我无法解决这个问题：lottie-player.js:1 Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-4Czhp/5smweUxQ0BkhMh9cmbPz4zsdDHhq70HOQBcHY='), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present. 随机数已添加到脚本中，但我仍然收到此错误。

@CBroe，感谢您的澄清！

请通过编辑为您的问题添加所有说明。这不仅应包含错误消息，还应包含所涉及的代码和您解决问题的尝试

【参考方案1】：

简而言之：使整个 CSP 看起来像：

add_header Content-Security-Policy "default-src 'none'; frame-ancestors 'self'; base-uri 'none'; form-action 'self'; script-src 'strict-dynamic' 'nonce-$nonce'; script-src-elem 'self'; connect-src 'self' https://www.w3.org; img-src 'self'; font-src 'self'; style-src 'self' 'unsafe-inline'";

有什么变化：

script-src-elem 'self'; 被完全删除 'nonce-$nonce' 已从 connect-src 指令中删除，那里不支持它 'unsafe-inline' 添加到 style-src 指令

注意 Safari does not support 'strict-dynamic'，因此它可能需要为辅助脚本添加一些主机源。

TD; DR; 或者发生了什么

您在STYLE-src 中存在 CSP 违规的主要问题（“拒绝应用 内联样式 它违反了以下内容安全策略指令：“style-src 'self'” ”）。但是您正试图通过将'nonce-value' 添加到SCRIPT-src 中来修复它。您必须将'nonce-value' 添加到style-src 指令中，并将nonce='value' 属性添加到所有<style> 标记中。在使用 <tag style='...'> 的内联样式的情况下，nonce 根本没有用（因此在这个阶段它通过 'unsafe-inline' 解决了）。

Chrome 浏览器支持 script-src-elem 指令，因此 Chrome 不会使用 script-src 'strict-dynamic' 'nonce-$nonce'，而是将 script-src-elem 'self'; 用于所有 <scrit> 和 <script src='...'> 标签。我不认为这是你想要的。 其他浏览器将忽略script-src-elem 并使用script-src 'strict-dynamic' 'nonce-$nonce'，但Safari 将忽略'strict-dynamic'。因此，如果使用加载子脚本，您必须将它们的主机源添加到script-src 指令中。

【讨论】：

我不明白删除，你说的是 script-src-elem 'self';完全被删除，但我在您提供的 CSP 中看到它，我应该删除它还是不删除它？

另外，如果我理解正确的话，如果我为每个样式添加随机数，我就不需要使用“unsafe-inline”，对吧？

是的，你是对的。但是如果某些<style> 是由 LottiePlayer 自己插入的，则您无法为其添加 nonce= 属性。此外，如果 LottiePlayer 使用 element.setAttribute('style', ...) 构造或直接插入

他们很遗憾，从script-src-elem 'self' 开始，删除，对吧？没有unsafe-inline，还有什么方法可以实现它？

删除 script-src-elem 'self' 并不意味着允许 'unsafe-inline'，这意味着 Chrome 将回退到 script-src 'strict-dynamic' 'nonce-$nonce'; 并使用它。或者，您可以将其更改为 script-src-elem 'strict-dynamic' 'nonce-$nonce'; 而不是删除（保持与 script-src 相同）。