使Angular2与限制性内容安全策略(CSP)配合使用

前端之家收集整理的这篇文章主要介绍了使Angular2与限制性内容安全策略(CSP)配合使用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我不能使基本的Angular2(final)应用程序与限制性CSP一起使用。 lang.js有一个不安全的eval错误zone.js有两个错误。你能提供一个解决方案吗?

使用Angular CLI进行复制

我创建了一个GitHub repository.你也可以按照下面的说明。

使用最后的Angular CLI与webpack 1.0.0-beta.15和新的应用程序创建与下面的说明。

ng new csp-test

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

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

可以使用以下命令。

cd csp-test/src
sed -i $'s/<base href="\/">/<base href="\/"><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\'">/' index.html

然后服务于应用程序。

cd ..
ng serve

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

猜你在找的Angularjs相关文章