breaks angular nonce based content-security-policy

[yogeshgadge]

Bug Report

<style></style> elements are inserted without honoring CSP_NONCE or ngCspNonce.

It inserted following style tag but missing nonce attribute.

<style type="text/css">
/*
  @ngbracket/ngx-layout - workaround for possible browser quirk with mediaQuery listeners
  see http://bit.ly/2sd4HMP
*/
@media screen and (min-width: 600px), screen and (min-width: 960px), screen and (min-width: 1280px), screen and (min-width: 1920px), screen and (min-width: 1920px) and (max-width: 4999.98px), screen and (max-width: 1919.98px), screen and (min-width: 1280px) and (max-width: 1919.98px), screen and (max-width: 1279.98px), screen and (min-width: 960px) and (max-width: 1279.98px), screen and (max-width: 959.98px), screen and (min-width: 600px) and (max-width: 959.98px), screen and (max-width: 599.98px), screen and (min-width: 0px) and (max-width: 599.98px), print {.fx-query-test{ }}
</style>

What is the expected behaviour?

Inserts nonce attribute for styles that it inserts just like other angular platform.

What is the current behaviour?

No nonce attribute.

What are the steps to reproduce?

Follow any of the 2 strategies to prepare app with nonce from https://angular.io/guide/security#content-security-policy when bootstraping or in index.html (ngCspNonce)

Try this
https://stackblitz.com/edit/rng372?file=src%2Fmain.ts

Inspect elements /head/styles/ - the style inserted by this package does not have nonce attribute.

Notice 3 <style> tags. The first 3 are from ngx-flexlayout. The 4th one behaves correctly is from @angular/material inserted.

What is the use case or motivation for changing an existing behaviour?

Stay secure/ CSP secure and be able to use this package that is now finally transferred here.

Which versions of Angular, Material, OS, TypeScript, and browsers are affected?

x16

Is there anything else we should know?

1. code point

   ngx-layout/projects/libs/flex-layout/core/match-media/match-media.ts

   Line 187 in 7e48745

   styleEl.setAttribute('type', 'text/css');

could add the nonce here but not sure how to get that value.

2. if we don't use media observer or responsive directives e.g. fxLayout.lt-md then I don;t see that happening. But then whats the point.