在 Chrome 打包应用程序中使用 Angular 2

Question

我正在尝试使用 Angular 2 创建一个 chrome 打包的应用程序。但是当我尝试运行我的应用程序时出现以下错误：

EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not a allowed source of script in the following Content Security Policy directive: "default-src 'self' blob: filesystem: chrome-extension-resource

-> 评估 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 指令来修复这个 Content Security Policy 错误。 Angular 2 有什么相似之处吗？

有没有办法在打包的应用程序中运行 Angular 2？

Answer 1

这是解决问题的简短答案。

将以下内容添加到您的 Chrome 扩展程序或 App Manifest.json

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

tldr;

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

这是来自 GitHub 的答案

chrome 应用程序中的 CSP 与 Angular 2 #5956 https://github.com/angular/angular/issues/5956#issuecomment-180135425

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

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

Answer 3

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

然后将其添加到index.html中，这样

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

你可以修复

EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not a allowed source of script in the following Content Security Policy directive: "default-src 'self' blob: filesystem: chrome-extension-resource

在 manifest.json 中使用沙箱 https://developer.chrome.com/apps/manifest/sandbox

Answer 4

您可以在 Angular 2 中看到这个错误问题

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