使 Angular 使用限制性内容安全策略 (CSP) [英] Make Angular working with restrictive Content Security Policy (CSP)

问题描述

我无法使基础 Angular2(最终版)应用程序与以下限制性 CSP 配合使用.

default-src 'none';脚本src'自我'；style-src '自我';font-src '自我';img-src 'self' 数据:;连接-src '自我'

lang.js

lang.js:335 Uncaught EvalError:拒绝将字符串评估为 JavaScript，因为在以下内容安全策略指令中，unsafe-eval"不是允许的脚本源:"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 未处理的承诺拒绝:拒绝将字符串评估为 JavaScript，因为在以下内容安全策略指令中unsafe-eval"不是允许的脚本源:"script-src 'self'".;区域:<根>;任务:Promise.then；值:EvalError:拒绝将字符串评估为 JavaScript，因为在以下内容安全策略指令中unsafe-eval"不是允许的脚本源:script-src 'self'".zone.js:346 错误:未捕获(承诺):EvalError:拒绝将字符串评估为 JavaScript，因为unsafe-eval"不是以下内容安全策略指令中允许的脚本源:script-src"self'".(…)

带有源代码.

343:if(拒绝){344:console.error('未处理的承诺拒绝:'，拒绝实例错误?拒绝.消息:拒绝，'；区域:'，e.zone.name，'；任务:'，e.task& e.task.source, '; Value:', 拒绝, 拒绝实例错误 ? 拒绝.堆栈: 未定义);345:}346:控制台错误(e)；

解决方案

使用提前编译解决了这个问题.以下命令可用于构建使用限制性 CSP 的应用程序.

ng build --prod

要在本地测试它，您可以使用

ng serve --prod

I cannot make base Angular2 (final) application works with the following restrictive CSP.

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

There are one unsafe-eval error in lang.js and two in zone.js. Could you provide a solution ?

Step to reproduce with Angular CLI

I have created a GitHub repository. You can also follow the instructions below.

Use the last Angular CLI with Webpack 6.0.8 and the new application created with the instructions below.

ng new csp-test

Insert in the index.html the meta tag defining the following restrictive Content Security Policy.

<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'">

Then serve the application.

ng serve

Access http://localhost:4200/, the page does not load since scripts are blocked by CSP.

Errors

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'".

with the source code.

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'".(…)

with the source code.

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);

解决方案

Using ahead-of-time compilation solves the problem. The following command can be used to build an application working with restrictive CSP.

ng build --prod

To test it locally you can use

ng serve --prod

这篇关于使 Angular 使用限制性内容安全策略 (CSP)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！