Laravel-Vite 项目中内联样式和脚本如何添加 CSP Nonce？

2024-03-01 19:52:49

在 Laravel-Vite 项目中为内联样式和脚本添加 CSP Nonce

概述

在 Laravel-Vite 项目中，向 Vue 注入的内联样式和脚本可能导致浏览器 CSP（内容安全策略）错误。这是因为浏览器出于安全考虑，默认情况下不会执行没有 nonce 的内联脚本或样式。本文将分步指导你如何在项目中添加 nonce，解决 CSP 错误并提高应用程序的安全性。

添加 Nonce

安装 Vite 插件：
使用 npm 安装 vite-plugin-csp-nonce 插件：
```
npm install --save-dev vite-plugin-csp-nonce
```

配置 Vite：
在 vite.config.js 中添加插件：

// vite.config.js
import { defineConfig } from 'vite'
import cspNonce from 'vite-plugin-csp-nonce'

export default defineConfig({
  plugins: [
    cspNonce(),
  ],
})

修改自定义 CSP 策略

修改 CustomPolicy：
在 app/Support/Csp/Policies/CustomPolicy.php 中，添加 nonce-... 到 CSP 策略：

// app/Support/Csp/Policies/CustomPolicy.php
use Spatie\Csp\Directive;

public function configure()
{
  parent::configure();

  $this
    ->addDirective(Directive::STYLE, ['self', 'nonce-...'])
    ->addDirective(Directive::SCRIPT, ['self', 'nonce-...']);
}

注意： 将 nonce-... 替换为实际的 nonce 值。

重新生成 CSP Header

清除缓存和配置：
运行以下命令：

php artisan config:clear
php artisan cache:clear

常见问题解答

什么是 nonce？
nonce 是一个随机生成的字符串，用于验证内容来自受信任的源。
为什么需要 nonce？
nonce 防止攻击者注入恶意脚本或样式，因为它们不包含有效的 nonce。
在哪里可以找到 nonce 值？
nonce 值由 Vite 插件生成，通常包含在 index.html 中 <meta> 标签。
添加 nonce 后是否需要刷新浏览器？
不，不需要刷新浏览器，更改将自动生效。
在生产环境中如何处理 nonce？
可以使用服务端渲染（SSR）或客户端渲染（CSR）来管理 nonce。对于 CSR，建议使用第三方 CSP 管理服务来处理 nonce 的分配和验证。