vite功能之---内容安全策略（CSP）

内容安全策略（CSP）

由于 Vite 的内部机制，为了部署 CSP 必须设置某些指令或配置。

'nonce-{RANDOM}'

1. 当设置了 html.cspNonce 时，Vite 会为任何 <script> 和 <style> 标签，以及样式表和模块预加载的 <link> 标签添加一个 nonce 属性。此外，当设置了这个选项时，Vite 会注入一个 meta 标签 (<meta property="csp-nonce" nonce="PLACEHOLDER" />)。
2. 带有 property="csp-nonce" 的 meta 标签的 nonce 值将在开发和构建后的必要时刻被 Vite 使用。

html.cspNonce

在 Vite 中，html.cspNonce 是用于生成 Content Security Policy (CSP) 头信息中的 nonce 值的一种配置方式。

什么是 CSP 和 Nonce？

Content Security Policy (CSP) 是一种用于增强 Web 应用程序安全性的策略，通过指定页面可以加载哪些资源（如脚本、样式、图片等），从而减少 XSS（跨站脚本攻击）等安全风险。

• Nonce 是一种用作 Content Security Policy (CSP) 中的机制，通常是一个随机生成的字符串。它被附加到 <script> 或 <style> 标签中，并与 CSP 的规则一起使用，允许特定的内联脚本或样式被执行，而不违反 CSP 的规定。

vite.html.cspNonce 的作用

在 Vite 中，html.cspNonce 选项用于生成并将一个随机的 nonce 值注入到 HTML 页面中，特别是内联 <script> 或 <style> 标签上。这是为了确保 CSP 策略能允许内联资源的执行，而不违反安全规则。

• Vite 通过此选项允许你为每个构建生成一个 唯一的 nonce 值，这个值会自动插入到 HTML 文件中相关的内联脚本或样式标签上。
• 如果你使用了 CSP 策略并且希望允许某些内联资源的执行，就需要为这些内联资源提供有效的 nonce。

如何使用 html.cspNonce

1. 启用 CSP 配置： 在 Vite 项目的配置文件中，你可以启用 html.cspNonce，并配置为一个随机生成的字符串，或者你可以通过某些插件自定义这个值。

2. 配置方法： html.cspNonce 可以在 vite.config.js 中配置，例如：

// vite.config.js
export default {
  plugins: [
    htmlPlugin({
      inject: {
        cspNonce: 'nonce-value-here'  // 这里可以为 nonce 设置自定义值
      }
    })
  ]
}

这将为生成的 HTML 页面中的 <script> 或 <style> 标签生成一个带有 nonce 属性的标签，例如：

<script nonce="nonce-value-here">
  // your script content
</script>

3、应用在 Content Security Policy（CSP）头部： 在你的 HTTP 头信息中，CSP 配置将允许带有正确 nonce 的内联脚本和样式。例如：

Content-Security-Policy: script-src 'nonce-nonce-value-here'; style-src 'nonce-nonce-value-here';

这告诉浏览器，只有那些带有 nonce-nonce-value-here 属性的内联脚本和样式才是可信的。

具体的使用场景

1. 防止 XSS 攻击： 通过为内联脚本和样式添加 nonce 值，确保只有经过授权的内联资源能够执行。即使攻击者能够注入恶意的脚本，它们也无法使用未授权的 nonce 值，因此无法执行。

2. 动态生成 nonce： 通常，nonce 会在每次请求时动态生成，这样可以确保每个页面加载的脚本都是唯一且受信任的。

3. 优化内容加载： 使用 Vite 的 html.cspNonce 可以使你的应用程序在启用严格的 CSP 策略时，依然能够允许某些内联脚本或样式的安全加载。