Laravel中Laravel Mix Webpack允许内联样式的CSP配置问题

问题分析 #

错误提示里style-src包含'unsafe-inline'但仍被阻止，核心原因大概率是nonce配置不匹配、Inertia/Vue渲染的内联样式未携带正确nonce，另外注意错误里的'self.'多了个点，属于配置笔误，需先修正。

具体修复步骤 #

1. 修正CSP配置笔误 #

在config/csp.php中，将style-src里的'self.'改为'self'，多余的点会导致self源失效：

// config/csp.php
return [
    // ...其他配置
    'directives' => [
        // ...
        'style-src' => [
            "'self'",
            "'nonce-{{nonce}}'",
            // 若非必要不建议保留'unsafe-inline'，优先用nonce实现安全内联
            // "'unsafe-inline'",
        ],
        // ...
    ],
];

2. 传递nonce到Inertia/Vue前端 #

因为使用Inertia，需将CSP生成的nonce同步到前端，确保Vue动态渲染的样式能携带该nonce：

步骤2.1 在服务提供者中共享nonce

在app/Providers/AppServiceProvider.php的boot方法中，生成并共享nonce：

use Spatie\Csp\Nonce\NonceGenerator;

public function boot()
{
    $nonceGenerator = app(NonceGenerator::class);
    $nonce = $nonceGenerator->generate();
    
    // 共享给所有视图
    view()->share('cspNonce', $nonce);
    
    // 同步到Inertia共享数据
    \Inertia\Inertia::share([
        'cspNonce' => $nonce,
    ]);
}

步骤2.2 在Vue中全局配置nonce

在resources/js/main.js中，接收Inertia传递的nonce，同时设置webpack的nonce：

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/inertia-vue2'

createInertiaApp({
  resolve: name => require(`./Pages/${name}`),
  setup({ el, app, props, plugin }) {
    const cspNonce = props.initialPage.props.cspNonce
    
    // 给webpack指定nonce，处理打包生成的内联脚本/样式
    __webpack_nonce__ = cspNonce
    
    // 把nonce挂载到Vue全局，方便组件调用
    return createApp({ render: () => h(app, props) })
      .use(plugin)
      .config.globalProperties.$cspNonce = cspNonce
      .mount(el)
  },
})

3. 确认nonce生成器配置 #

在config/csp.php中，确保nonce生成器使用默认的随机字符串实现：

// config/csp.php
return [
    // ...
    'nonce_generator' => Spatie\Csp\Nonce\RandomStringNonceGenerator::class,
    // ...
];

4. 处理手动插入的样式 #

如果组件中存在手动创建的style标签，必须手动添加nonce属性：

<template>
  <div :style="dynamicStyle"></div>
</template>

<script>
export default {
  data() {
    return {
      dynamicStyle: { color: 'red' }
    }
  },
  mounted() {
    const style = document.createElement('style')
    style.nonce = this.$cspNonce
    style.textContent = '.custom-class { background: blue; }'
    document.head.appendChild(style)
  }
}
</script>

5. 清除缓存并测试 #

执行以下命令清除配置缓存和前端打包缓存：

php artisan config:clear
npm run dev

重新访问页面，检查CSP头是否正确输出，内联样式是否正常生效。

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