Utilizzando angolare 2 in Chrome app confezionato

Question

Sto cercando di creare un'applicazione confezionato Chrome utilizzando angolare 2. Ma io sto ottenendo il seguente errore quando provo a fare funzionare il mio 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

Il contenuto di boot.js è:

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

so AngularJS (angolari 1) ha avuto una direttiva ng-csp per correggere questo errore Content Security Policy. C'è qualcosa di simile per Angular 2?

C'è un modo per eseguire Angular 2 in un'app in pacchetto?

Answer 1

effettuare il packing in un file dell'applicazione utilizzando SystemJS Build https://github.com/systemjs/builder.

Poi aggiungerlo alla index.html, quindi

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

È possibile fisso

EvalError: Rifiutato di valutare una stringa come JavaScript perche 'non sicuro-eval' non è una fonte permesso di scrittura nel seguente contenuto direttiva politica di sicurezza: "default-src 'sé' blob: filesystem: cromo-extension-risorsa

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

Answer 2

si può vedere questo problemi di insetti in angolare 2

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

Answer 3

Ecco la breve risposta per risolvere il problema.

Aggiungere il seguente a voi Chrome Extension o App manifest.json

"content_security_policy": "script src 'sé' 'non sicuro-eval'; oggetto-src 'sé'"

TLDR;

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

Ecco la risposta da GitHub

CSP in cromo app con angolare 2 # 5956 https://github.com/angular/angular/issues/5956#issuecomment-180135425

Ecco il problema descrivere in AngularJS https://docs.angularjs.org/api/ng/directive/ngCsp

Answer 4

Così il vostro messaggio di errore indica che eval è il problema. Stai usando la compilazione Just-in-Time per la tua app Angular 2?Mi rendo conto che è una vecchia questione, ma se si utilizza AOT (Ahead-of-Time) la compilazione, non sarà necessario utilizzare eval per i modelli:

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.

Un'altra opzione è quella di utilizzare <webview> per ospitare il vostro angolare 2 app: https://developer.chrome.com/apps/tags/webview

Con questo, il contenuto della pagina non sarà tenuta stagna e non applicare i requisiti CSP di un app Chrome. Tuttavia, non potrai accedere alle API dell'app Chrome direttamente dalla tua app Angular. La soluzione a questo è utilizzare il passaggio dei messaggi tra l'app Angular e l'app Chrome che lo ospita. L'applicazione angolare invia un messaggio per ospitare, e ospite invoca Chrome App API e invia risultati al angolare pagina di app:

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