让Angular使用限制性内容安全策略(CSP)

default-src 'none';
script-src 'self';
style-src 'self';
font-src 'self';
img-src 'self' data:;
connect-src 'self'

lang.js中有一个不安全评估错误，zone.js中有两个错误。您能提供解决方案吗？

步骤使用Angular CLI重现

我创建了一个GitHub repository.您也可以按照以下说明操作。

将最后一个Angular CLI与webpack 6.0.8一起使用，并使用下面的说明创建新应用程序。

ng new csp-test

在index.html中插入定义以下限制性内容安全策略的元标记。

<meta 
  http-equiv="Content-Security-Policy" 
  content="default-src 'none';script-src 'self';style-src 'self';font-src 'self';img-src 'self' data:;connect-src 'self'">

然后提供申请。

ng serve

访问http://localhost:4200/，由于脚本被CSP阻止，因此页面无法加载。

错误

lang.js

lang.js:335 Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'".

与源代码。

335: return new (Function.bind.apply(Function,[void 0].concat(fnArgNames.concat(fnBody))))().apply(void 0,fnArgValues);

zone.js

zone.js:344 Unhandled Promise rejection: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'".
 ; Zone: <root> ; Task: Promise.then ; Value: EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'".

zone.js:346 Error: Uncaught (in promise): EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'".(…)

与源代码。

343: if (rejection) {
344:     console.error('Unhandled Promise rejection:',rejection instanceof Error ? rejection.message : rejection,'; Zone:',e.zone.name,'; Task:',e.task && e.task.source,'; Value:',rejection,rejection instanceof Error ? rejection.stack : undefined);
345: }
346: console.error(e);