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

问题描述

我无法使基本的Angular2(最终版)应用程序与以下限制性CSP一起使用.

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'

lang.js 中出现一个不安全评估错误和 zone.js 中的两个.您能提供一个解决方案吗?

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

我已经创建了 GitHub存储库.您还可以按照以下说明进行操作.

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

使用带有webpack 6.0.8的最新Angular CLI以及根据以下说明创建的新应用程序.

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

ng new csp-test

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

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

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

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

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

推荐答案

使用最新的Angular CLI版本(从1.0.0-beta.17开始)已解决了该问题.以下命令可为正在运行的应用程序提供服务，因为它包含了提前编译.

The problem has been solved using last Angular CLI version (starting with 1.0.0-beta.17). The following command serves a working application because it includes a-head-of-time compilation.

ng serve --prod

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