Korzystanie kątowa 2 w Chrome zapakowanego aplikacji

Question

Próbuję utworzyć aplikację przy użyciu pakietu Chrome kątowe 2. Ale ja otrzymuję następujący błąd, gdy próbuję uruchomić mój 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

Zawartość boot.js jest:

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

wiem angularjs (kąt 1) miał dyrektywę ng-csp aby rozwiązać ten Content Security Policy błąd. Czy dla Angular 2 jest coś w rodzaju similair?

Czy istnieje sposób na uruchomienie Angular 2 w pakiecie aplikacji?

Answer 1

dokonać pakowania w jednym pliku aplikacji przy użyciu SystemJS Build https://github.com/systemjs/builder.

Następnie dodaj go do index.html, więc

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

Można stałe

EvalError: Odmowa ocenić ciąg jako JavaScript ponieważ „niebezpieczny-eval” nie jest dozwolony źródło skryptu w następującej treści dyrektywy Polityki Bezpieczeństwa: „default-src 'ja' blob: System plików: chrom-extension-zasobów

wykorzystaniem piaskownicy w manifest.json https://developer.chrome.com/apps/manifest/sandbox

Answer 2

Można zobaczyć ten błąd problemy w Kątowymi 2

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

Answer 3

Oto krótka odpowiedź do rozwiązywania problemu.

Dodaj następujące wam Chrome Extension lub App manifest.json

"content_security_policy": "script-src 'ja' 'niebezpieczne-eval'; object-src 'ja'"

tldr;

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

Oto odpowiedź od GitHub

CSP w Chrome App z kątowym 2 # 5956 https://github.com/angular/angular/issues/5956#issuecomment-180135425

Oto kwestia opisać w angularjs https://docs.angularjs.org/api/ng/directive/ngCsp

Answer 4

Więc komunikat o błędzie wskazuje, że eval jest problem. Czy korzystasz z kompilacji Just-in-Time dla swojej aplikacji Angular 2?Zdaję sobie sprawę, że jest to stare pytanie, ale jeśli używasz AOT (Ahead-of-Time) kompilacji, to nie będzie trzeba użyć eval dla szablonów:

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.

Inną opcją jest użycie <webview> udostępnić swoje kątowa 2 app: https://developer.chrome.com/apps/tags/webview

z tym, zawartość strony nie będą piaskownicy i wymagania CSP o aplikacji Chrome nie będą miały zastosowania. Jednak nie będziesz mieć dostępu do interfejsów API aplikacji Chrome bezpośrednio z aplikacji Angular. Rozwiązaniem tego problemu jest wykorzystanie przekazu między aplikacją Angular a aplikacją Chrome, która go hostuje. Kątowej aplikacja wysyła komunikat do gospodarza, a gospodarz wywołuje Chrome App API i wysyła wyniki z powrotem do Kątowymi app stronie:

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