为破坏“不安全评估”的第 3 方代码添加随机数到脚本标签答案

【问题标题】：adding nonce to script tag for 3rd party code that breaks 'unsafe-eval'为破坏“不安全评估”的第 3 方代码添加随机数到脚本标签
【发布时间】：2021-12-02 14:43:52
【问题描述】：

我们正在使用 netlify-cms，但不幸的是，它发出的代码会破坏 CONTENT-SECURITY-POLICY 'unsafe-eval'。

我尝试使用 nginx sub_filter 将nonce 属性添加到所有脚本标签：

server {
  listen       80;
  set_secure_random_alphanum $cspNonce 32;
  sub_filter_once off;
  sub_filter_types *;
  sub_filter *CSP_NONCE* $cspNonce;
  sub_filter '<script' '<script nonce=\'$cspNonce\' ';
  sub_filter '<link' '<link nonce="$cspNonce" ';

然后我将随机数添加到标题中

add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'nonce-$cspNonce' 'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=' petstore.swagger.io;connect-src 'self' petstore.swagger.io";

我可以看到脚本标签中的随机数和标题都匹配：

<script nonce='72UTQMpuXxfwcevvTydWt8XvOSzKhhjM' >

标题

Content-Security-Policy default-src 'self'; script-src 'self' 'nonce-77Fdz6e1aBiGr5b8qcReeUgkO2NtJnSm'

但我仍然收到错误消息：

EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not a allowed source of script in the following Content Security Policy directive: "script-src 'self' 'nonce-77Fdz6e1aBiGr5b8qcReeUgkO2NtJnSm'

【问题讨论】：

标签： javascript nginx webpack content-security-policy

【解决方案1】：

通过使用'nonce-value'，您只能删除'unsafe-inline'，但不能删除'unsafe-eval'。

Netlify 中的'unsafe-eval' 需要将 JSON 编译为 JS 代码，但您也可以去掉 'unsafe-eval'。只需更新 ajv-json-loader 以使用 AJV 7 和独立模式并配置 webpack 配置以使用更新的加载器。见细节here。

【讨论】：

感谢您的回答。你的意思是nonce-value 只对unsafe-inline 有用吗？
是的，'nonce-value'（和'hash-value'）适用于内联脚本和外部脚本/样式。所以它们可以用来摆脱scrips-src和style-src中的'unsafe-inline'。而'unsafe-eval' 涵盖了使用eval() / new Function() / setTimeout('string', ) / setInterval('string', ) 从字符串创建函数。 'unsafe-eval' 充当全局页面标志，因此无法选择性应用。