Make Angular2 works with restrictive Content Security Policy (CSP)

[ghost]

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

We are working on a brand new project with restrict CSP(Content Security Policy) requirement. Here's our CSP requirement: X-Content-Security-Policy:default-src 'self'; style-src 'self' 'unsafe-inline'
This has been set through headers.
For our production setting, we've bundled all source files and templates (with system builder) during build process. While the app loading in CSP strict mode, we see the same issue as this one: https://stackoverflow.com/questions/38734708/make-angular2-works-with-restrictive-content-security-policy-csp

Searched all possible solutions, offline template compiler seems to be a way to solve the issue. However, we could not find a valid offline template compiler yet.

Things we've tried so far - (with the Angular 2 production release)
https://github.com/smmorneau/tour-of-heroes -- tested the build process, the output doesn't work in restrict CSP mode.

Angular cli tool: Does not support offline template compiler yet?

https://www.npmjs.com/package/angular2-template-compiler : This seems to be outdated. Got this: "Error: Cannot find module '@angular/compiler/src/html_parser' ..... at Object....."

compiler-cli (https://github.com/angular/angular/tree/master/modules/%40angular/compiler-cli): Could not get it to work. Is this one ready for production yet?

Also by search through the angular 2 core files, I see https://npmcdn.com/@angular/core@2.0.0/bundles/core.umd.js has 5 "new Function()" calls. This is outside template compiler. Even I can get the offline template compiler works, could this trigger the "unsafe-eval" from browser?
Expected behavior

Does the Angular 2 currently support restrictive Content Security Policy ? If yes, what should we do to make it work?
Reproduction of the problem

What is the motivation / use case for changing the behavior?

We really need to make our web app works in restrictive Content Security Policy mode, can be get a clear answer for this?
Please tell us about your environment:

We'are using the Angular 2 production release version.

• Angular version: 2.0.X

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

• Language: [all | TypeScript X.X | ES6/7 | ES5]

• Node (for AoT issues): node --version =

[vicb]

Can you clearly state what causes the issue ?
(Offline compiler works, check angular.io for docs, submit an issue there if docs could be improved. CLI support is coming soon)

[ghost]

Here's the console error that I'm getting:

zone.js:344 Unhandled Promise rejection: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'".
; Zone: ; Task: Promise.then ; Value: 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: "script-src 'self'".(…) 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: "script-src 'self'".

at evalExpression (http://localhost:4200/main.bundle.js:534:12)
at jitStatements (http://localhost:4200/main.bundle.js:50045:103)
at RuntimeCompiler._compileTemplate (http://localhost:4200/main.bundle.js:33601:119)
at http://localhost:4200/main.bundle.js:33501:83
at Set.forEach (native)
at compile (http://localhost:4200/main.bundle.js:33501:47)
at ZoneDelegate.invoke (http://localhost:4200/main.bundle.js:64739:28)
at Zone.run (http://localhost:4200/main.bundle.js:64632:43)
at http://localhost:4200/main.bundle.js:64998:57
at ZoneDelegate.invokeTask (http://localhost:4200/main.bundle.js:64772:37)consoleError @ zone.js:344

zone.js:346 Error: Uncaught (in promise): 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: "script-src 'self'".(…)consoleError @ zone.js:346

[ghost]

Also want to confirm this:
Does the latest Angular 2 support restrictive CSP mode? Or will be supported in future?

[manklu]

Have a look at the following issues: #6361, #5956 and #1744

[vicb]

@manklu thanks for the pointers. @xcao you'll find the answer to your question in the last issue.

[ghost]

@manklu and @vicb, thank you for your prompt reply. I was able to do a offline template compile based on instruction here:
https://angular.io/docs/ts/latest/cookbook/aot-compiler.html#!#sts=Prepare%20for%20offline%20compilation
Now I got this errors from console which is refer to (#6361)
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-NjVxv9AQfkNJLUZ04QSQUzDUuCIyKiETtAFrMxU9taw='), or a nonce ('nonce-...') is required to enable inline execution.

Looking forward for this issue (#6361) to be answered. We have to make our web app works in restrictive CSP mode.

[xnnkmd]

The issue is not only to make angular work with CSP but to make angular cli work with CSP as well. It would be wonderfull if angular + angular-cli could actually be used to create something secure.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}