fix(cdk/layout): resolve CSP errors

The `MediaMatcher` needs to insert a `style` tag in some cases. These changes use the new `CSP_NONCE` token to avoid these issues.

Author: crisbeto

src/cdk/layout/media-matcher.ts

@@ -5,7 +5,7 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import {Injectable} from '@angular/core';
+import {Injectable, CSP_NONCE, Optional, Inject} from '@angular/core';
 import {Platform} from '@angular/cdk/platform';
 
 /** Global registry for all dynamically-created, injected media queries. */
@@ -20,7 +20,10 @@ export class MediaMatcher {
   /** The internal matchMedia method to return back a MediaQueryList like object. */
   private _matchMedia: (query: string) => MediaQueryList;
 
-  constructor(private _platform: Platform) {
+  constructor(
+    private _platform: Platform,
+    @Optional() @Inject(CSP_NONCE) private _nonce?: string | null,
+  ) {
     this._matchMedia =
       this._platform.isBrowser && window.matchMedia
         ? // matchMedia is bound to the window scope intentionally as it is an illegal invocation to
@@ -37,7 +40,7 @@ export class MediaMatcher {
    */
   matchMedia(query: string): MediaQueryList {
     if (this._platform.WEBKIT || this._platform.BLINK) {
-      createEmptyStyleRule(query);
+      createEmptyStyleRule(query, this._nonce);
     }
     return this._matchMedia(query);
   }
@@ -52,14 +55,19 @@ export class MediaMatcher {
  * inside the `@media` match existing elements on the page. We work around it by having one rule
  * targeting the `body`. See https://github.com/angular/components/issues/23546.
  */
-function createEmptyStyleRule(query: string) {
+function createEmptyStyleRule(query: string, nonce: string | undefined | null) {
   if (mediaQueriesForWebkitCompatibility.has(query)) {
     return;
   }
 
   try {
     if (!mediaQueryStyleNode) {
       mediaQueryStyleNode = document.createElement('style');
+
+      if (nonce) {
+        mediaQueryStyleNode.nonce = nonce;
+      }
+
       mediaQueryStyleNode.setAttribute('type', 'text/css');
       document.head!.appendChild(mediaQueryStyleNode);
     }

tools/public_api_guard/cdk/layout.md

@@ -60,10 +60,10 @@ export class LayoutModule {
 
 // @public
 export class MediaMatcher {
-    constructor(_platform: Platform);
+    constructor(_platform: Platform, _nonce?: string | null | undefined);
     matchMedia(query: string): MediaQueryList;
     // (undocumented)
-    static ɵfac: i0.ɵɵFactoryDeclaration<MediaMatcher, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MediaMatcher, [null, { optional: true; }]>;
     // (undocumented)
     static ɵprov: i0.ɵɵInjectableDeclaration<MediaMatcher>;
 }