CSP not working by default (Chrome App)

[olalonde]

I'm using Angular 1.2.16 and I'm getting a bunch of the following error when launching my app as a chrome app:

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' chrome-extension-resource:". Note 
that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.

The Angular Chrome App documentation states that the ng-csp is no longer necessary:

However, if you're using an older version of Angular between v1.0.1 and v1.1.0, you'll need tell 
Angular to run in a "content security mode". This is done by including the ngCsp directive alongside 
ngApp:

I've tried setting the ng-csp directive in my HTML to see if it would help and it does fix those errors (but most of my ng-ifs and ng-shows are still broken 👎). That being said, I'd rather avoid ng-csp if it is not necessary (since it's slower I'd rather only use it on my chrome packaged app).

Any tips? Is this a known bug?

Update: I also tested with Angular 1.3, same bug

Update: I just fixed the ng-if/ng-show problem by manually including angular-csp.css: <link rel="stylesheet" href="bower_components/angular/angular-csp.css" />.

Adding ng-csp directive now fixed the obvious bugs. That being said, I'm a bit worried that this will degrade performance on the hosted version of my app. Is my worry justified? Is there any easy way to conditionally enable ng-csp/angular-csp.css without having to maintain 2 different index.html files?

[lgalfaso]

Hi,
Including angular-cap.css is a must when CSP is enabled. This is stated here https://docs.angularjs.org/api/ng/directive/ngCsp Adding the ng-csp should be optional as angular should be able to detect this automatically. If you include this css and do not add ng-csp do you still see these issues?

[olalonde]

If I include the CSS and do not add ng-csp almost everything is broken. If I had ng-csp, the page works fine.

How does Angular detect it needs to use the ng-csp directive?

[caitp]

http://w3c.github.io/webappsec/specs/content-security-policy/csp-specification.dev.html this is something which is changing on an ongoing basis. While some things have been more or less settled, not everything has, Chrome does not necessarily ship all of this perfectly (although two of the chrome/blink guys are editors of that draft, this doesn't actually mean that they ship everything in the specs immediately, they usually need interest from other vendors to ship stuff). Basically, the situation with living standards can be a bit problematic early on in their lives.

This is just my own opinion and does not necessarily reflect the opinions of anyone on the Chrome, Blink, or Angular teams, but you're probably better off /not/ ignoring ng-csp, in order to be sure that you get a workable Chrome app regardless of device. We should eventually be able to consistently detect CSP mode, but unfortunately that day is not today.

If you want to dig into the spec and browser implementations, you can help us fix problems with our CSP detection, too.

[olalonde]

Ok, thanks.

[mustaphakd]

thanks, so we have to include ng-csp directive, angular-cap.css and angular-cap.css!