Laravel项目CSP配置问题：HubSpot JS触发内联样式加载被阻止

问题原因 #

js.hubspot.com/web-interactives-embed.js脚本会在页面中注入未携带对应nonce的内联样式，而你的CSP配置中style-src同时指定了nonce和'unsafe-inline'——根据CSP规则，当存在nonce或hash时，'unsafe-inline'会被浏览器忽略，导致未带nonce的内联样式被拦截。

修复方案 #

方案1：移除style-src中的nonce（兼容性优先） #

如果无法让HubSpot生成的内联样式携带页面nonce，可直接移除style-src中的nonce值，保留'unsafe-inline'，让内联样式正常加载：

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

方案2：添加内联样式的哈希值（安全性优先） #

1. 打开浏览器控制台，找到被拦截的内联样式具体代码
2. 对该样式内容生成SHA-256哈希值
3. 将哈希值添加到style-src中，替换'unsafe-inline'，示例：

style-src 'self' 'nonce-xGOAfkOT7dzkL1Lm9iaCYQSUFKaUl9mB' 'sha256-你的内联样式哈希值' fonts.googleapis.com;

方案3：配置HubSpot使用nonce #

检查HubSpot的嵌入文档，确认是否支持传递nonce参数，让其生成的内联样式自动携带页面的动态nonce（需确保Laravel中nonce是每个请求动态生成的，避免固定值带来的安全风险）

内容的提问来源于stack exchange，提问作者Nileshsinh Rathod