CODEWITHSUNDEEP
angulargoogle-chrome-app
Vivendi
Vivendi

Reputation: 21007

Using Angular 2 in Chrome packaged app

I'm trying to create a chrome packaged app using Angular 2. But I'm getting the following error when I try to run my app:

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

The content of boot.js is:

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

I know AngularJS (angular 1) had an ng-csp directive to fix this Content Security Policy error. Is there something similair for Angular 2?

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

Upvotes: 7

Views: 2266

Answers (4)

Tom Dunn
Tom Dunn

Reputation: 2455

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

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

Better security

AOT compiles HTML templates and components into JavaScript files long before they are served to the client. With no templates to read and no risky client-side HTML or JavaScript evaluation, there are fewer opportunities for injection attacks.

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

With this, the content of your page will not be sandboxed and the CSP requirements of a Chrome App will not apply. However, you will not be able to access the Chrome App APIs directly from your Angular app. The solution to this is to use message passing between your Angular app and the Chrome App that is hosting it. The Angular app sends a message to host, and host invokes Chrome App API and sends results back to Angular app page:

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

Upvotes: 1

Mike Barlow - BarDev
Mike Barlow - BarDev

Reputation: 11267

Here is the short answer to solving the issue.

Add the following to you Chrome Extension or App Manifest.json

"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'" <code>enter image description here</code>

tldr;

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

enter image description here

Here's the answer from GitHub

CSP in chrome app with angular 2 #5956 https://github.com/angular/angular/issues/5956#issuecomment-180135425 enter image description here

Here's the issue describe in AngularJS https://docs.angularjs.org/api/ng/directive/ngCsp enter image description here

Upvotes: 1

Nick
Nick

Reputation: 1

You can see this bug issues in Angular 2

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

Upvotes: -1

Nick
Nick

Reputation: 1

make packing in one application file using SystemJS Build https://github.com/systemjs/builder.

Then add it to the index.html, so 

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

You can fixed

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

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

Upvotes: 0

Related Questions