Angular2 Throws Security Exceptions under the CSP (Content Security Policy)

I build and evangelize building mobile Chrome Apps using CCA. I do this extensively with Angular 1.x today but right now Angular 2 causes me some problems. It does not seem to support a “CSP mode” like angular 1x.

This code runs just fine when I include the library locally, but it throws a security error when I put any variables into my templates.

function AppComponent() {
  this.name = "testing";
}

AppComponent.annotations = [
  new angular.Component({
    selector: 'my-app'
  }),
  new angular.View({
    template: '<h1>My first Angular 2 App</h1>'
  })
];

document.addEventListener('DOMContentLoaded', function() {
  angular.bootstrap(AppComponent);
});

This works just fine under the CSP, but when I add the variable to the template:

function AppComponent() {
  this.name = "testing";
}

AppComponent.annotations = [
  new angular.Component({
    selector: 'my-app'
  }),
  new angular.View({
    template: '<h1>My first Angular 2 {{name}} App</h1>'
  })
];

document.addEventListener('DOMContentLoaded', function() {
  angular.bootstrap(AppComponent);
});

I get the following error:

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.

[natizlp]

Can anyone provide a working example for working in CSP mode? @IgorMinar / @vsavkin / @wardbell - Would you care to comment?

[goleary]

@hjliang while your example does work, I’ve been unable to get my much more complex app to run in a CSP environment. Help would be appreciated @IgorMinar @mhevery @vsavkin @wardbell