Laravel CSP 如何在 Laravel Mix Webpack 中允许内联样式答案

【问题标题】：Laravel CSP how to allow inline styles in Laravel Mix WebpackLaravel CSP 如何在 Laravel Mix Webpack 中允许内联样式
【发布时间】：2023-02-06 11:39:22
【问题描述】：

我正在使用 spatie/laravel-csp 包在 Laravel 应用程序中设置 CSP 标头。但是 inline style 无法应用并因以下错误而被拒绝。

拒绝应用内联样式，因为它违反了以下内容内容安全策略指令：“style-src 'self.' 'nonce-TjpZGox5zGathTvJDeVMfxzHaOtWMc7v' '不安全内联'”。

更多细节。

我正在使用 Laravel 7。

/spatie/laravel-csp 2.8

"laravel-mix": "^5.0.1",

和 Vue 2 的惰性
到目前为止我已经尝试过什么。

指定webpack_nonce@入口文件（main.js）webpack documentation

在 spatie/laravel-csp 文档中使用内联脚本和样式

【问题讨论】：

您是否解决了这个问题，而没有使用“不安全内联”打开安全性，这显然是不可取的？我遇到了同样的问题，如果不做一些实质性的工作就无法提取 css
你能告诉我们导致错误的 HTML 吗？

标签： laravel webpack laravel-mix

【解决方案1】：

您还可以通过添加 style-src 'self' 'unsafe-inline' 来为样式做 CSP；

在您的清单文件中添加此行：

"content_security_policy": "default-src 'self' style-src 'self' 'unsafe-inline';"

这将允许您在扩展中继续使用内联样式。

注意：不推荐使用内联样式标签来防止攻击。

【讨论】：

我不是在寻找打开 xss 攻击之门的解决方案。没有导入随机数的解决方案吗？
无法将赏金奖励给存在重大安全漏洞的人。对不起。

【解决方案2】：

如果您使用的是 Laravel，请尝试在 index.php 文件中指定您的 webpack_nonce。

【讨论】：