Vite构建单页React应用部署SaaS服务器遇Nonce注入语法错误

错误的核心原因是SaaS服务器的CSP自动nonce注入逻辑错误地修改了内联脚本中的字符串内容：
React生产构建生成的内联脚本里有类似e.innerHTML = "<script></script>"的代码，服务器为了满足CSP要求，会自动给页面中所有<script>标签添加nonce属性——但它错误地把内联脚本字符串里的<script>也当成了真实的DOM标签，修改后变成：

e.innerHTML = "<script nonce="随机nonce字符串"></script>"

此时字符串中的"随机nonce字符串"的引号和外层包裹字符串的引号冲突，导致JavaScript解析时把nonce字符串当成未定义的标识符，抛出Uncaught SyntaxError: Unexpected identifier错误。

以下是几种可行的解决办法，按优先级排序：

1. 让SaaS服务器跳过内联脚本字符串的nonce注入 #

如果你的SaaS托管平台支持配置CSP注入规则，添加规则让服务器只给真实的DOM <script>标签添加nonce，忽略内联脚本代码中的<script>字符串内容。这是最彻底的解决方式。

2. 拆分内联脚本中的<script>字符串 #

修改React代码中生成<script>字符串的逻辑，将字符串拆分成片段，避免被服务器的注入工具识别：

// 原代码
e.innerHTML = "<script></script>"
// 修改后
e.innerHTML = "<scr" + "ipt></scr" + "ipt>"

或者使用字符转义：

e.innerHTML = "\x3Cscript\x3E\x3C/script\x3E"

这样服务器的注入工具不会识别出完整的<script>标签，也就不会错误添加nonce属性。

3. 调整Vite构建配置，避免生成含<script>的内联脚本 #

如果是Vite或React的构建插件自动生成了这段内联脚本，可以在vite.config.js中调整相关配置：

• 检查是否使用了自动注入脚本的插件，禁用不必要的脚本注入逻辑；
• 开启HTML压缩时，确保不会导致字符串转义错误：

// vite.config.js
export default {
  build: {
    minify: 'terser',
    terserOptions: {
      compress: {
        collapse_vars: false
      }
    }
  },
  html: {
    minify: {
      preserveLineBreaks: true
    }
  }
}

4. 自定义CSP头，改用哈希替代nonce #

如果SaaS允许自定义HTTP响应头，关闭服务器的自动nonce注入，改用CSP的哈希规则允许内联脚本：

1. 计算内联脚本的SHA-256哈希值；
2. 在CSP头中添加：script-src 'sha256-你的哈希值'，同时移除nonce相关规则。
   这样服务器不会自动注入nonce，也就不会破坏内联脚本中的字符串。

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