angularjscontent-security-policyangularjs-material

How can I use angular-material with CSP?

Our Content Security Policy does not allow unsafe-inline for styles.

When I try to use angular-material in our application, it won't work right (missing styles) and I get a lot of errors logged in the DevTools. From what I can tell, this is due to dynamically generated CSS being injected into the page.

I'm already including ngCsp, but it has no noticeably effect on this issue.

Solution

  • According to the documentation at AngularJS Material the solution must be:

    angular
.module("app", ['ngMaterial'])
.config(['$mdThemingProvider', function (themeProv) {
    themeProv.setNonce('randomString')
}])

    The nonce to be added as an attribute to the theme style tags. Setting a value allows the use of CSP policy without using the unsafe-inline directive.