如何配置Content Security Policy允许livewire.js运行？

我是Laravel Livewire应用开发新手，未使用CSP时Livewire运行正常，但使用Spatie的CSP后livewire.js被拦截。已尝试给@livewireStyles和@livewireScripts传递nonce参数，但问题仍未解决。

错误截图：

1. 配置Spatie CSP生成并传递Nonce #

首先修改config/csp.php，配置nonce生成逻辑并更新CSP指令，确保带nonce的脚本/样式能被允许：

return [
    // 其他配置保留...
    'nonce' => function () {
        return request()->csp_nonce; // Spatie中间件会自动给request绑定该属性
    },
    'directives' => [
        'default-src' => ['self'],
        'script-src' => [
            'self',
            'nonce-' . request()->csp_nonce, // 核心：允许带该nonce的脚本执行
            // 若Livewire使用CDN资源，需添加对应域名，比如：'cdn.jsdelivr.net'
        ],
        'style-src' => [
            'self',
            'nonce-' . request()->csp_nonce, // 允许带nonce的样式
        ],
        'connect-src' => ['self', 'ws://localhost:8000'], // 适配Livewire的WebSocket连接，根据你的环境调整域名/端口
    ],
];

2. 让Livewire自动适配Nonce #

针对Livewire 3 #

修改config/livewire.php，配置CSP nonce回调，Livewire会自动给所有脚本、样式标签加上正确的nonce，无需手动在模板传参：

return [
    // 其他配置保留...
    'csp_nonce' => function () {
        return csp_nonce(); // Spatie提供的全局辅助函数，直接获取当前nonce
    },
];

针对Livewire 2 #

如果使用Livewire 2，确保模板中正确传递nonce，同时检查是否有遗漏的内联脚本：

@livewireStyles(['nonce' => csp_nonce()])
@livewireScripts(['nonce' => csp_nonce()])

3. 验证中间件注册 #

确认Spatie\Csp\AddCspHeaders中间件已在app/Http/Kernel.php的web中间件组中注册：

protected $middlewareGroups = [
    'web' => [
        // 其他中间件...
        \Spatie\Csp\AddCspHeaders::class,
    ],
];

4. 精准排查拦截原因 #

打开浏览器开发者工具（F12），查看控制台的CSP错误提示，明确拦截类型：

• 内联脚本被拦截：检查脚本标签是否正确携带了nonce
• 外部资源被拦截：在script-src中添加对应域名
• WebSocket连接被拦截：调整connect-src规则匹配你的Livewire实时连接地址

额外注意事项 #

• 测试前清除浏览器缓存，避免旧CSP规则残留
• 若使用Vite/Mix编译资源，确保编译后的资源路径被script-src允许
• 优先使用nonce而非unsafe-inline/unsafe-eval，保障站点安全性

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