替换unsafe-inline为nonce后出现JavaScript URL执行拒绝错误求助

问题原因 #

你遇到的错误核心是：javascript: URL属于CSP定义的「inline脚本执行」范畴，即使给iframe添加nonce也无效——因为nonce仅适用于<script>标签内的脚本，对javascript:这种导航式的inline脚本不生效。而你的CSP规则里没有允许这种执行方式的配置，所以浏览器拦截了该操作。

解决方案 #

方案1：用about:blank替代javascript:false（推荐） #

about:blank是浏览器原生的空白页面URL，不会触发任何脚本执行，完全符合CSP规则，和javascript:false的效果一致（iframe初始为空白状态）。修改代码如下：

init : function() {
   if (!this.iframe) {
       this.iframe = document.createElement("iframe");
       this.iframe.src = "about:blank"; // 替换原javascript:false
       document.body.appendChild(this.iframe);
   }
}

方案2：修改CSP规则（不推荐，仅在必须保留javascript:URL时使用） #

如果一定要保留javascript:false，需要调整CSP的script-src指令，添加'unsafe-hashes'和对应脚本内容的哈希值：

1. 计算javascript:false中脚本内容（即false）的SHA256哈希：sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=
2. 更新CSP规则为：

script-src 'self' 'nonce-EDNnf03nceIOfn39fn3e9h3sdfa' 'unsafe-eval' 'unsafe-hashes' 'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=';

注意：添加'unsafe-hashes'会放宽CSP的安全限制，因此优先推荐方案1。

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