Using Angular 2 in a Chrome App

Question

I am trying to create a chrome batch application using Angular 2. But I get the following error when trying to start my application:

EvalError: refuses to evaluate the string as JavaScript because "unsafe-eval" is not a valid script source in the following content security policy directive: "default-src" self 'blob: filesystem: chrome-extension- resource

-> Chrome extension evaluation: //aabbecghjjmmpbagelfmhllgaidcbnmn/app/boot.js

The contents of boot.js :

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

I know that AngularJS (angular 1) has the ng-csp to fix this Content Security Policy error. Is there anything for Angular 2?

Is there a way to run Angular 2 in a packaged application?

Answer 1

make packaging in a single application file using SystemJS Build https://github.com/systemjs/builder .

Then add it to index.html, so

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

You can set

EvalError: refuses to evaluate the string as JavaScript because "unsafe-eval" is not a valid script source in the following content security policy directive: "default-src" self 'blob: filesystem: chrome-extension- resource

using the sandbox in manifest.json https://developer.chrome.com/apps/manifest/sandbox

Answer 2

Here is a short answer to solving the problem.

Add the Chrome extension or the Manifest.json app to you

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

TL; DR;

Chrome Developer - Content Security Policy (CSP) extension https://developer.chrome.com/extensions/contentSecurityPolicy

Here is the answer from GitHub

CSP in chrome application with angular 2 # 5956 https://github.com/angular/angular/issues/5956#issuecomment-180135425

Here the problem is described in AngularJS https://docs.angularjs.org/api/ng/directive/ngCsp

Answer 3

So, your error message shows that the problem is with eval . Are you using Just-in-Time compilation for your Angular 2 application? I understand this is an old question, but if you use AOT (Ahead of the Time) compilation, you will not need to use eval for your templates:

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

Improved security

AOT compiles HTML templates and components into JavaScript files long before they are served by the client. Without templates for reading and without risky client-side HTML assessment or JavaScript assessment, there is less opportunity for injection attacks.

Another option is to use <webview> to host your Angular 2 application: https://developer.chrome.com/apps/tags/webview

However, the contents of your page will not be isolated, and the Chrome application CSP requirements will not apply. However, you won’t be able to access the Chrome APIs directly from your Angular application. The solution to this is to use messaging between your Angular app and the Chrome app that hosts it. An Angular application sends a message to the host, and the host calls the Chrome application API and sends the results to the Angular page:

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

Answer 4

You can see this error in Angular 2

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