Sencha生产构建移除microloader的nonce致CSP错误，如何阻止？

刚好之前帮朋友处理过类似的Sencha Cmd CSP兼容问题，给你几个靠谱的解决办法，按优先级推荐：

方法1：通过app.json配置直接指定microloader属性 #

这是最官方的做法，直接让Sencha Cmd在生成脚本标签时带上nonce，不会被移除：

• 打开项目根目录的app.json，找到builds里的production配置段（如果没有就新建），添加microloader的属性配置：

  "builds": {
    "production": {
      "microloader": {
        "attributes": {
          "nonce": "random"
        }
      }
    }
  }
  

  这里的"random"替换成你实际要用的nonce值就行，后续构建时Sencha Cmd会自动把这个属性加到microloader脚本标签上，不会再移除它。

方法2：用自定义index.html模板绕过自动生成 #

如果你的项目本来就用自定义模板，直接固定脚本标签就行：

1. 先在app.json里指定自定义模板路径：

   "indexHtmlPath": "resources/templates/index.html"
   

2. 在自定义模板里保留你写好的完整脚本标签：

   <script id="microloader" nonce="random" data-app="random-app" type="text/javascript" src="bootstrap.js"></script>
   

3. 最后在builds.production里禁用Sencha Cmd的自动microloader生成：

   "builds": {
     "production": {
       "microloader": {
         "enable": false
       }
     }
   }
   

   这种方式适合需要服务器动态注入nonce的场景，直接让服务器渲染模板时替换"random"为真实的nonce值就行。

方法3：用构建钩子手动补回nonce #

如果前两种方法都不适用，就用钩子脚本在构建完成后修改index.html：

1. 在项目根目录新建hooks/post-build.js文件，内容如下：

   module.exports = function (cmd) {
     const fs = require('fs');
     const path = require('path');
     const indexPath = path.join(cmd.build.outDir, 'index.html');
     let content = fs.readFileSync(indexPath, 'utf8');
     // 匹配microloader标签并插入nonce属性
     content = content.replace(/<script id="microloader"/, '<script id="microloader" nonce="random"');
     fs.writeFileSync(indexPath, content, 'utf8');
   };
   

2. 在app.json的production构建配置里添加钩子引用：

   "builds": {
     "production": {
       "hooks": {
         "post-build": "hooks/post-build.js"
       }
     }
   }
   

   构建完成后，脚本会自动帮你把nonce加回去。

注意事项 #

• 记得把所有示例里的"random"替换成你实际使用的nonce值，如果是服务器动态生成的，优先用方法2配合服务器模板渲染。
• 测试前先执行sencha app clean清理旧构建缓存，避免缓存文件影响结果。

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