CSP PHP 问题 LottiePlayer

Question

我通过 PHP、fastcgi:

使用随机数生成

fastcgi_param NONCE $nonce;

在我添加的 CSP 中（使用 NGINX + header）：

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 播放器脚本，它说我不使用 nonce 或 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 都会发生错误：

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

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

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 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'; 30=] 和 <script src='...'> 标签。我认为这不是你想要的。
其他浏览器会忽略 script-src-elem 并使用 script-src 'strict-dynamic' 'nonce-${nonce}'，但 Safari 会忽略 'strict-dynamic'。因此，如果使用加载子脚本，您必须将它们的主机源添加到 script-src 指令中。

CSP PHP 问题 LottiePlayer

CSP PHP issue LottiePlayer

javascript

php

security

web

content-security-policy