在 Chrome 打包应用中使用 Angular 2

Question

我试图使用 Angular 2 创建一个 Chrome 打包应用程序，但在运行我的应用程序时出现以下错误：

``` 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: "default-src 'self' blob: filesystem: chrome-extension-resource -> Evaluating chrome-extension://aabbecghjjmmpbagelfmhllgaidcbnmn/app/boot.js ```

`boot.js` 的内容如下：

System.config({ packages: { app: { format: 'register', defaultExtension: 'js', "defaultJSExtensions": true, } } });
System.import('app/boot').then(null, console.error.bind(console));

我知道AngularJS（Angular 1）有一个ng-csp指令来解决这个内容安全策略错误。 Angular 2是否有类似的东西？

是否有一种方法在打包的应用程序中运行Angular 2？

- Vivendi

---

请参阅 https://github.com/angular/angular/issues/1744 和 https://github.com/angular/angular/issues/5956。 - Eric Martinez

@EricMartinez 我之前看过这两个Github主题。第一个提供了一种可能通过使用bind(ChangeDetector)...来修复此问题的方法，但是自那以后情况已经发生了变化。我不确定如何在beta8版本中实现它。第二个链接让我想到Angular 2还没有准备好支持Chrome打包应用？ - Vivendi

Answer 1

以下是解决问题的简短答案。

将以下内容添加到您的Chrome扩展或应用程序Manifest.json中：

"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'" tldr;

Chrome开发者-扩展 内容安全策略（CSP） https://developer.chrome.com/extensions/contentSecurityPolicy

这是来自GitHub的答案

在带有Angular 2的Chrome应用程序中使用CSP #5956 https://github.com/angular/angular/issues/5956#issuecomment-180135425

这是在AngularJS中描述的问题 https://docs.angularjs.org/api/ng/directive/ngCsp

- Mike Barlow - BarDev

---

不，这只适用于Chrome扩展程序，问题是关于打包应用程序的。 - syonip

Answer 2

你的错误信息显示eval是问题所在。你是否正在使用Angular 2应用程序的即时编译？我知道这是一个老问题，但如果你使用AOT（Ahead-of-Time）编译，它将不需要为你的模板使用eval。

https://angular.io/guide/aot-compiler

更好的安全性

AOT将HTML模板和组件编译成JavaScript文件，长时间在服务端处理后再发送给客户端。因为没有需要读取的模板和危险的客户端HTML或JavaScript评估，注入攻击的机会更少。

另一个选项是使用<webview>来托管你的Angular 2应用程序： https://developer.chrome.com/apps/tags/webview

这样，您的页面内容将不会被沙箱化，并且Chrome应用程序的CSP要求也不适用。但是，您将无法直接从Angular应用程序访问Chrome应用程序API。解决方法是在Angular应用程序和托管它的Chrome应用程序之间使用消息传递。Angular应用程序向主机发送消息，主机调用Chrome应用程序API并将结果发送回Angular应用程序页面：

https://developer.chrome.com/apps/app_external#postMessage

- Tom Dunn

Answer 3

使用 SystemJS Build https://github.com/systemjs/builder 将打包生成一个应用程序文件。

然后将其添加到 index.html 中，以便...

<script src="angular2-polyfills.js"></script> 
<script src="app.min.js" ></script>

你可以修复

EvalError: 拒绝将字符串作为JavaScript进行评估，因为在以下内容安全策略指令中，'unsafe-eval'不是脚本允许的来源："default-src 'self' blob: filesystem: chrome-extension-resource

使用manifest.json中的沙盒https://developer.chrome.com/apps/manifest/sandbox

- Nick

---

你真的能够在no-eval模式下运行Angular应用程序吗？我尝试了许多不同的方法，但除非你之前成功过，否则我不想走系统构建者的路线。 - Gabe O'Leary

Answer 4

你可以在Angular 2中看到这个bug问题

https://github.com/angular/angular/issues/5956

- Nick

---

这应该是一条注释，而不是一个答案。 - Peter Badida