fix(cdk/layout): avoid CSS injection attacks in media matcher

The media matcher needs to create a dummy stylesheet to work around some browser quirks. These changes ensure we don't accidentally inject malicious CSS into the page.

(cherry picked from commit 231f94f)

Author: crisbeto

src/cdk/layout/media-matcher.ts

@@ -73,7 +73,12 @@ function createEmptyStyleRule(query: string, nonce: string | undefined | null) {
     }
 
     if (mediaQueryStyleNode.sheet) {
-      mediaQueryStyleNode.sheet.insertRule(`@media ${query} {body{ }}`, 0);
+      mediaQueryStyleNode.sheet.insertRule(
+        // Drop the curly braces to avoid injection attacks. Curly braces aren't
+        // valid media query syntax so this should be a no-op in valid cases.
+        `@media ${query.replace(/[{}]/g, '')} {body{ }}`,
+        0,
+      );
       mediaQueriesForWebkitCompatibility.add(query);
     }
   } catch (e) {