How can I use angular-material with CSP?

Question

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.

Answer 1

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.