Laravel 的 CSP 第三方包 JavaScript 文件被阻止或阻止应用内联样式

Question

我正在使用包在基于 Laravel 的项目中实现 CSP，但我在控制台中遇到了错误： Content-Security-Policy：页面的设置阻止了内联资源的加载（“style-src”）。

控制台有 https://js.hubspot.com/web-interactives-embed.js 链接。

我的CSP如下

base-uri 'self';
connect-src 'self' www.google-analytics.com t.clarity.ms cta-service-cms2.hubspot.com forms.hubspot.com forms.hscollectedforms.net api.hubapi.com api.hubspot.com;
default-src 'self';
form-action 'self';
img-src 'self' staging.bizgift.com www.facebook.com track.hubspot.com perf-na1.hsforms.com forms.hsforms.com bg-staging-card-data-image.s3.us-east-2.amazonaws.com;
media-src 'self';
object-src 'none';
script-src 'self' 'nonce-xGOAfkOT7dzkL1Lm9iaCYQSUFKaUl9mB' www.clarity.ms www.googletagmanager.com js.hs-scripts.com connect.facebook.net js.usemessages.com js.hscollectedforms.net js.hsleadflows.net js.hs-analytics.net js.hsadspixel.net js.hs-banner.com js.hubspot.com https://www.google.com/recaptcha/api.js https://www.gstatic.com/recaptcha/releases/ 'sha256-t4h5VBmDF1HalHj1RIc5rlbzUOVz49wxo+GLAmeWMck=' 'sha256-T916iAHsYCoazOC03cjMMYogCMNmmLm8w2bnMJcVCpI=' 'sha256-DOhucvj5bwyKXX02OUWhVzdUmy+vwezf/yB6BagJdXY=' 'sha256-3g/2E0Wxcw3seFILyZ99YcO9qd7UTSq6biYU+Ax6FRA=' 'sha256-FrEDD233IMeaBOJDMuhTCXG5WkM29jFccD81Q39RsG0=' 'sha256-uRfQyDYxE8FsDbNhR0BF1yVYE9W02Z/xa+uG4/sDaII=' 'sha256-L6v7VHQvrD+uZgEcNVg+dqEMhEjDx6GLydm1hc3sTyk=' 'sha256-gaoCjDPzeBGz9m4DY/gux3C7hM8DaZhy4nLGoTX/dUY=';
style-src 'self' 'nonce-xGOAfkOT7dzkL1Lm9iaCYQSUFKaUl9mB' 'unsafe-inline' fonts.googleapis.com;
child-src 'self';
font-src 'self' staging.bizgift.com fonts.gstatic.com;
frame-src js.usemessages.com;
block-all-mixed-content;

任何人都可以帮我修复此类错误吗？

Answer 1

可能至少有 2 个问题：

1. 评估。第一个错误表明您正在使用 eval 函数。您需要按照 https://web.dev/articles/csp#eval_too 中的说明重写此代码。如果这是不可能的，并且您找不到任何其他解决方案，您可能必须将“unsafe-eval”添加到 script-src。
2. 其他错误提到内联样式，但根据您提供的 style-src 允许“unsafe-inline”。很可能存在另一个阻止内联样式的 CSP。检查文档的响应标头和元标记，了解需要修改/删除的其他 CSP。另一个原因可能是您的 CSP 未正确构建/解析。