如何添加'unsafe-inline'关键字以允许运行内联JavaScript

报错来自Electron默认模板配置的内容安全策略（CSP），初始规则script-src 'self'仅允许加载和页面同来源的外部脚本文件，直接写在HTML内部的内联<script>代码会被默认拦截。

你可以根据自己的使用场景选以下任意一种方案：

• 方案1：添加unsafe-inline放行所有内联脚本（本地学习测试推荐，配置最简单）
  直接修改index.html头部的CSP meta标签，在script-src的规则值末尾追加'unsafe-inline'即可，修改后的标签代码如下：

  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline'">
  

  注意：该方案会放开所有内联脚本的执行权限，存在XSS安全风险，不建议在生产环境使用。

• 方案2：添加哈希值仅放行指定内联脚本（安全性中等）
  控制台报错里已经自动生成了你当前这段内联脚本对应的SHA256哈希值，把这个哈希值加到script-src规则中，就可以只放行这一段内联脚本，其他未知内联脚本依然会被拦截。修改后的CSP标签代码如下：

  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'sha256-m/hGOmrcpR2CLf5ZFUFQux1kBtD2znXvM4R5xVpagmI='">
  

  注意：如果你修改了这段内联脚本里的代码，对应的哈希值会变化，需要从新的控制台报错里复制新的哈希值替换。

• 方案3：拆分外部脚本文件（官方推荐，安全性最高，生产环境首选）
  不需要修改任何CSP规则，只要把内联的JS代码抽离到单独的JS文件中引入即可，操作步骤：

  1. 在index.html同目录下新建renderer.js文件，把内联写的JS代码全部挪到这个文件里：

     // renderer.js
     console.log("Hello World");
     // 其余渲染进程逻辑都可以写在这里
     

  2. 删除index.html里原来的内联<script>标签，替换为外部文件引入标签：

     <script src="./renderer.js"></script>
     

  改完重启项目即可正常运行，完全符合默认CSP的安全要求。

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