Sử dụng góc 2 trong Chrome ứng dụng đóng gói

Question

Tôi đang cố gắng để tạo ra một ứng dụng đóng gói chrome sử dụng góc 2. Nhưng tôi nhận được lỗi sau khi tôi cố gắng chạy ứng dụng của tôi:

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

Nội dung boot.js là:

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

tôi biết AngularJS (góc 1) đã có một ng-csp chỉ để sửa lỗi này Content Security Policy. Có một cái gì đó similair cho Angular 2?

Có cách nào để chạy Angular 2 trong ứng dụng đóng gói không?

Answer 1

đóng gói trong một tệp ứng dụng bằng SystemJS Build https://github.com/systemjs/builder.

Sau đó thêm nó vào index.html, vì vậy

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

Bạn có thể cố định

EvalError: Từ chối để đánh giá một chuỗi như JavaScript vì 'không an toàn-eval' không phải là một nguồn cho phép của kịch bản trong nội dung chỉ thị sau Security Policy: "mặc định-src 'tự' blob: hệ thống tập tin: chrome-mở rộng tài nguyên

sử dụng sandbox trong manifest.json https://developer.chrome.com/apps/manifest/sandbox

Answer 2

Bạn có thể thấy vấn đề lỗi này ở góc 2

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

Answer 3

Dưới đây là câu trả lời ngắn để giải quyết vấn đề này.

Thêm phần sau đây để bạn mở rộng Chrome hoặc App manifest.json

"content_security_policy": "kịch bản-src 'tự' 'không an toàn-eval'; đối tượng src 'tự'"

tldr;

Chrome Developer - Gia hạn Chính sách bảo mật nội dung (CSP) https://developer.chrome.com/extensions/contentSecurityPolicy

Dưới đây là câu trả lời từ GitHub

CSP trong ứng dụng chrome với góc 2 # 5956 https://github.com/angular/angular/issues/5956#issuecomment-180135425

Đây là vấn đề mô tả trong AngularJS https://docs.angularjs.org/api/ng/directive/ngCsp

Answer 4

Vì vậy, thông báo lỗi của bạn cho thấy rằng eval là vấn đề. Bạn đang sử dụng trình biên dịch Just-in-Time cho ứng dụng Angular 2 của bạn?Tôi nhận ra đây là một câu hỏi cũ, nhưng nếu bạn sử dụng AOT (Ahead-of-Time) biên soạn, nó sẽ không cần phải sử dụng eval cho mẫu của bạn:

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.

Một lựa chọn khác là sử dụng <webview> để lưu trữ ứng dụng Angular 2 của bạn: https://developer.chrome.com/apps/tags/webview

Với nội dung này, nội dung trang của bạn sẽ không bị sandbox và yêu cầu CSP của ứng dụng Chrome sẽ không được áp dụng. Tuy nhiên, bạn sẽ không thể truy cập API ứng dụng Chrome trực tiếp từ ứng dụng Góc của bạn. Giải pháp cho điều này là sử dụng tính năng chuyển tin nhắn giữa ứng dụng Góc của bạn và Ứng dụng Chrome đang lưu trữ nó. Ứng dụng góc gửi một thông điệp để lưu trữ và máy chủ gọi ứng dụng Chrome API và gửi kết quả trở lại góc trang ứng dụng:

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