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.

score 2 · Accepted Answer · edited Jun 18 '20 at 02:13

2

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.

edited Jun 18 '20 at 02:13

Splaktar

5,506
5
43
74

answered Oct 17 '17 at 12:16

Sandman

94
9

This works but does not yet add a nonce attribute for this style tag I saw was added by angularjs: `` – Christiaan Westerbeek Sep 03 '19 at 15:53

How can I use angular-material with CSP?

1 Answers1