Laravel CSP与Frontegg Vue集成问题：登录页无法运行

问题根源 #

报错明确指出：当CSP规则中存在nonce或哈希值时，'unsafe-inline'会被忽略。你的当前配置虽然添加了'unsafe-inline'，但spatie/laravel-csp默认启用了nonce（报错中的'nonce-loop'），导致内联样式被拦截，而Frontegg的登录页面使用了未携带该nonce的内联样式。

解决方案 #

方案1：禁用Nonce（最简单直接）

如果你不需要nonce机制，可直接关闭它，让'unsafe-inline'生效：

1. 打开config/csp.php配置文件，将nonce选项设为false：

'nonce' => false,

2. 更新你的CSP策略，补充Frontegg依赖的样式源（报错中提到了fonts.googleapis.com）：

// frontegg
$this->addDirective(Directive::SCRIPT, 'https://assets.frontegg.com');
$this->addDirective(Directive::CONNECT, 'https://frontegg.com');
$this->addDirective(Directive::CONNECT, 'https://app-g6y1wrdhmmrt.frontegg.com');
$this->addDirective(Directive::IMG, 'https://fronteggprodeustorage.blob.core.windows.net');
$this->addDirective(Directive::STYLE, 'https://fonts.googleapis.com'); // 补充字体样式源
$this->addDirective(Directive::STYLE, 'unsafe-inline');

方案2：保留Nonce并传递给Frontegg

若必须使用nonce，需将Laravel生成的nonce传递给Frontegg组件：

1. 在加载Frontegg的Blade模板中，注入nonce到全局变量：

<script nonce="{{ csp_nonce() }}">
    window.fronteggNonce = "{{ csp_nonce() }}";
</script>

2. 初始化Frontegg时，配置使用该nonce（参考Frontegg Vue文档），例如：

import { Frontegg } from '@frontegg/vue';

Frontegg.init({
  // 其他配置
  styleNonce: window.fronteggNonce,
});

3. 确保你的CSP策略中保留nonce配置，同时补充fonts.googleapis.com：

$this->addDirective(Directive::STYLE, 'https://fonts.googleapis.com');

方案3：使用内联样式哈希（不推荐，仅适用于静态样式）

如果Frontegg的内联样式固定不变，可计算其哈希并添加到CSP规则：

1. 提取报错中被拦截的内联样式内容，用sha256计算哈希（可使用在线工具或终端命令）。
2. 将哈希添加到style-src规则：

$this->addDirective(Directive::STYLE, "'sha256-xxxxxx...'"); // 替换为实际哈希值
$this->addDirective(Directive::STYLE, 'https://fonts.googleapis.com');

验证 #

修改配置后，清除Laravel缓存并重新测试登录页面：

php artisan config:clear
php artisan cache:clear

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