本地启动vfat.tools报错：CSP策略拒绝执行内联脚本如何解决？

符合安全规范的三种解决方案（无需配置unsafe-inline） #

方案1：添加错误提示的哈希值到CSP规则 #

错误信息中已经给出了对应内联脚本的唯一哈希值sha256-ACotEtBlkqjCUAsddlA/3p2h7Q0iHuDXxk577uNsXwA=，只需将该哈希值添加到CSP规则的script-src指令中即可，不需要修改现有脚本逻辑。

• 如果CSP配置写在HTML的meta标签中，修改示例：

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

• 如果是Browsersync dev服务返回的响应头携带CSP，修改项目中的Browsersync配置文件（一般为bs-config.js）的headers字段即可：

module.exports = {
  // 其他原有配置保留
  headers: {
    "Content-Security-Policy": "default-src 'self'; script-src 'self' 'sha256-ACotEtBlkqjCUAsddlA/3p2h7Q0iHuDXxk577uNsXwA='"
  }
}

方案2：抽取内联脚本为外部JS文件（最推荐） #

这是完全符合安全最佳实践的根解方案，无需修改任何CSP配置。找到HTML文件中的内联<script>标签，把标签内的所有代码单独提取为一个独立的.js文件（比如命名为init.js，存放在静态资源目录下），再在原位置用外部引入的方式加载该脚本即可：

<!-- 替换原有的内联script标签 -->
<script src="./init.js"></script>

该方式天然适配default-src 'self'的CSP规则，没有额外安全风险。

方案3：使用动态nonce配置（适合服务端渲染场景） #

如果你的项目是服务端动态渲染页面，可以为每次请求生成一个随机唯一的nonce值，同时将该值同步配置到CSP的script-src指令和所有内联script标签的nonce属性中：

1. CSP配置新增nonce规则：script-src 'self' 'nonce-本次请求生成的随机唯一值'
2. 内联script标签添加对应属性：

<script nonce="本次请求生成的随机唯一值">
// 原有内联脚本内容
</script>

注意nonce必须每次请求重新生成，不能固定写死，否则会失去安全防护效果。

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