CSP发行LottiePlayer

Question

我通过PHP使用了现在的生成程序，generation：

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脚本，它说我不使用nonce，或者我肯定会使用sha散列。

错误如下：

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：

 <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>

我还试着直接把现在添加到彩票播放器中，看起来如下所示：

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

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

Answer 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 不支持 'strict-dynamic'因此可能需要为辅助脚本添加一些主机源。

TD；DR;或发生了什么

1. 主要问题是您在STYLE-src中违反了CSP (“拒绝应用内联样式它违反了以下内容安全策略指令："style-src‘self’”)。但是，您正试图通过将'nonce-value'添加到SCRIPT-src中来修复它。您必须将'nonce-value'添加到style-src指令中，将nonce='value'属性添加到所有<style>标记中。如果使用内联样式类型的<tag style='...'>，则nonce根本不有用(因此在现阶段通过'unsafe-inline'解决了这个问题)。
2. Chrome浏览器支持script-src-elem指令，因此Chrome不会使用script-src 'strict-dynamic' 'nonce-${nonce}'，所有<scrit>和<script src='...'>标记都将使用script-src-elem 'self';。我不认为这是你想要的。 其他浏览器将忽略script-src-elem并使用script-src 'strict-dynamic' 'nonce-${nonce}'，但Safari将忽略'strict-dynamic'。因此，在使用加载子脚本的情况下，必须将它们的主机源添加到script-src指令中。