fix(ng-dev): prevent RCE via argument injection in rollup template

apps/code-of-conduct/app/account/account.component.html

@@ -1,32 +1,55 @@
-<button *ngIf="account.isLoggedIn" (click)="open()" class="user-photo" referrerpolicy=“no-referrer” style.backgroundImage="url({{account.avatarUrl}})"></button>
+<button
+  *ngIf="account.isLoggedIn"
+  (click)="open()"
+  class="user-photo"
+  referrerpolicy="“no-referrer”"
+  style.backgroundImage="url({{ account.avatarUrl }})"
+></button>
 
 <ng-template #menuContent>
   <div class="account-menu-container mat-elevation-z8">
     <div class="user-photo">
-      <img referrerpolicy=“no-referrer” [src]="account.avatarUrl" alt="avatarUrl">
+      <img referrerpolicy="“no-referrer”" [src]="account.avatarUrl" alt="avatarUrl" />
     </div>
 
     <div class="title-row">
       <span class="title">{{ account.displayName || 'Welcome!' }}</span>
-      <button class="expand-button" mat-icon-button (click)="providerPanel.toggle()" *ngIf="account.isLoggedIn">
-        <mat-icon>{{providerPanel.expanded ? 'expand_less' : 'expand_more'}}</mat-icon>
+      <button
+        class="expand-button"
+        mat-icon-button
+        (click)="providerPanel.toggle()"
+        *ngIf="account.isLoggedIn"
+      >
+        <mat-icon>{{ providerPanel.expanded ? 'expand_less' : 'expand_more' }}</mat-icon>
       </button>
     </div>
     <ng-container cdkAccordionItem #providerPanel="cdkAccordionItem">
       <div *ngIf="providerPanel.expanded" class="provider-panel">
         <div class="provider-row">
-          <img class="provider-icon" src="http://google.com/favicon.ico" alt="google icon"/>
-          <span class="provider-email">{{ account.googleInfo?.email || "Unknown" }}</span>
+          <img class="provider-icon" src="http://google.com/favicon.ico" alt="google icon" />
+          <span class="provider-email">{{ account.googleInfo?.email || 'Unknown' }}</span>
         </div>
         <div class="provider-row">
-          <img class="provider-icon" src="http://github.com/favicon.ico" alt="github icon"/>
-          <span class="provider-email">{{ account.githubInfo?.email || "Account Not Linked" }}</span>
-          <button matTooltip ="Link Github account" *ngIf="account.githubInfo === null" mat-icon-button class="link-provider-account"
-            (click)="account.linkWithGithub()">
+          <img class="provider-icon" src="http://github.com/favicon.ico" alt="github icon" />
+          <span class="provider-email">{{
+            account.githubInfo?.email || 'Account Not Linked'
+          }}</span>
+          <button
+            matTooltip="Link Github account"
+            *ngIf="account.githubInfo === null"
+            mat-icon-button
+            class="link-provider-account"
+            (click)="account.linkWithGithub()"
+          >
             <mat-icon>add_link</mat-icon>
           </button>
-          <button matTooltip="Unlink Github account" *ngIf="account.githubInfo" mat-icon-button class="link-provider-account"
-            (click)="account.unlinkFromGithub()">
+          <button
+            matTooltip="Unlink Github account"
+            *ngIf="account.githubInfo"
+            mat-icon-button
+            class="link-provider-account"
+            (click)="account.unlinkFromGithub()"
+          >
             <mat-icon>link_off</mat-icon>
           </button>
         </div>
@@ -43,10 +66,22 @@
 
     <div class="bottom-row">
       <span class="spacer"></span>
-      <button *ngIf="!account.isLoggedIn" mat-stroked-button color="primary" (click)="account.signInWithGoogle()">Sign
-        In</button>
-      <button *ngIf="account.isLoggedIn" mat-stroked-button color="primary" (click)="account.signOut()">Sign
-        Out</button>
+      <button
+        *ngIf="!account.isLoggedIn"
+        mat-stroked-button
+        color="primary"
+        (click)="account.signInWithGoogle()"
+      >
+        Sign In
+      </button>
+      <button
+        *ngIf="account.isLoggedIn"
+        mat-stroked-button
+        color="primary"
+        (click)="account.signOut()"
+      >
+        Sign Out
+      </button>
     </div>
   </div>
-</ng-template>
+</ng-template>

apps/code-of-conduct/app/app.component.html

@@ -1,5 +1,5 @@
 <mat-toolbar class="app-header-bar" color="primary">
-  <a routerLink='/' class="title">Code of Conduct</a>
+  <a routerLink="/" class="title">Code of Conduct</a>
   <span class="spacer"></span>
   <account-menu-button></account-menu-button>
 </mat-toolbar>

apps/code-of-conduct/app/block-user/block-user.component.html

@@ -1,7 +1,6 @@
 <h1 class="mat-headline-3" mat-dialog-title>
-  {{ editMode ? 
-    'Update Blocked user information' :
-    'Block a User from Angular Github Organization'
+  {{
+    editMode ? 'Update Blocked user information' : 'Block a User from Angular Github Organization'
   }}
 </h1>
 <mat-dialog-content>
@@ -24,36 +23,36 @@ <h1 class="mat-headline-3" mat-dialog-title>
         <mat-form-field>
           <mat-label>Block Until</mat-label>
           <input
-            [style.display]="blockUserForm.controls.blockUntil.value !== false ? '': 'none'"
+            [style.display]="blockUserForm.controls.blockUntil.value !== false ? '' : 'none'"
             readonly
             required
             matInput
             [min]="tomorrow"
             [max]="fiveYearsFromToday"
             formControlName="blockUntil"
-            [matDatepicker]="picker">
-          <span class="block-until-indefinite" *ngIf="blockUserForm.controls.blockUntil.value === false">Blocked Indefinitely</span>
+            [matDatepicker]="picker"
+          />
+          <span
+            class="block-until-indefinite"
+            *ngIf="blockUserForm.controls.blockUntil.value === false"
+            >Blocked Indefinitely</span
+          >
           <mat-datepicker #picker></mat-datepicker>
-          <button #blockUntilMenuTrigger="matMenuTrigger" [matMenuTriggerFor]="blockUntilMenu" mat-icon-button matSuffix>
+          <button
+            #blockUntilMenuTrigger="matMenuTrigger"
+            [matMenuTriggerFor]="blockUntilMenu"
+            mat-icon-button
+            matSuffix
+          >
             <mat-icon>arrow_drop_down</mat-icon>
           </button>
         </mat-form-field>
         <mat-menu #blockUntilMenu="matMenu" yPosition="below" xPosition="before">
-          <button mat-menu-item (click)="picker.select(week)">
-            1 Week ({{ week | date }})
-          </button>
-          <button mat-menu-item (click)="picker.select(month)">
-            1 Month ({{ month | date }})
-          </button>
-          <button mat-menu-item (click)="picker.select(year)">
-            1 Year ({{ year | date }})
-          </button>
-          <button mat-menu-item (click)="picker.open()">
-            Select a Date
-          </button>
-          <button mat-menu-item (click)="setBlockUntilAsIndefinite();">
-            Indefinite
-          </button>
+          <button mat-menu-item (click)="picker.select(week)">1 Week ({{ week | date }})</button>
+          <button mat-menu-item (click)="picker.select(month)">1 Month ({{ month | date }})</button>
+          <button mat-menu-item (click)="picker.select(year)">1 Year ({{ year | date }})</button>
+          <button mat-menu-item (click)="picker.open()">Select a Date</button>
+          <button mat-menu-item (click)="setBlockUntilAsIndefinite()">Indefinite</button>
         </mat-menu>
       </span>
     </div>
@@ -86,53 +85,41 @@ <h1 class="mat-headline-3" mat-dialog-title>
       <span>
         <mat-form-field>
           <mat-label>Blocked By</mat-label>
-          <input
-          formControlName="blockedBy"
-          matInput
-          type="text"/>
+          <input formControlName="blockedBy" matInput type="text" />
         </mat-form-field>
       </span>
       <span>
         <mat-form-field>
-          <input
-            readonly
-            matInput
-            formControlName="blockedOn"
-            [matDatepicker]="blockedOnPicker">
-            <mat-datepicker #blockedOnPicker></mat-datepicker>
+          <input readonly matInput formControlName="blockedOn" [matDatepicker]="blockedOnPicker" />
+          <mat-datepicker #blockedOnPicker></mat-datepicker>
           <mat-label>Blocked On</mat-label>
         </mat-form-field>
       </span>
     </div>
   </form>
 </mat-dialog-content>
 <mat-dialog-actions align="end">
-    <button
-      [disabled]="blockUserForm.disabled"
-      mat-stroked-button
-      matDialogClose>
-      Cancel
-    </button>
-    <button
-      *ngIf="!editMode"
-      [disabled]="blockUserForm.invalid || blockUserForm.disabled"
-      mat-raised-button
-      color="primary"
-      (click)="blockUser()"
-      class="block-user-button"
-    >
-      <span>Block User</span>
-      <mat-spinner *ngIf="blockUserForm.disabled" diameter="24"></mat-spinner>
+  <button [disabled]="blockUserForm.disabled" mat-stroked-button matDialogClose>Cancel</button>
+  <button
+    *ngIf="!editMode"
+    [disabled]="blockUserForm.invalid || blockUserForm.disabled"
+    mat-raised-button
+    color="primary"
+    (click)="blockUser()"
+    class="block-user-button"
+  >
+    <span>Block User</span>
+    <mat-spinner *ngIf="blockUserForm.disabled" diameter="24"></mat-spinner>
   </button>
   <button
-      *ngIf="editMode"
-      [disabled]="blockUserForm.invalid || blockUserForm.disabled"
-      mat-raised-button
-      color="primary"
-      (click)="updateUser()"
-      class="block-user-button"
-    >
-      <span>Update User</span>
-      <mat-spinner *ngIf="blockUserForm.disabled" diameter="24"></mat-spinner>
+    *ngIf="editMode"
+    [disabled]="blockUserForm.invalid || blockUserForm.disabled"
+    mat-raised-button
+    color="primary"
+    (click)="updateUser()"
+    class="block-user-button"
+  >
+    <span>Update User</span>
+    <mat-spinner *ngIf="blockUserForm.disabled" diameter="24"></mat-spinner>
   </button>
 </mat-dialog-actions>

apps/code-of-conduct/app/block-user/block-user.component.scss

@@ -44,8 +44,7 @@
   vertical-align: middle;
 }
 
-
 .block-until-indefinite {
   color: rgba(0, 0, 0, 0.87);
   pointer-events: none;
-}
+}

apps/code-of-conduct/app/login/login.component.html

@@ -1,10 +1,11 @@
 <mat-card>
   <mat-card-content>
     <span class="content">
-      Welcome, help to moderate users for the Angular Github organization. Please login with your google.com account.
+      Welcome, help to moderate users for the Angular Github organization. Please login with your
+      google.com account.
     </span>
   </mat-card-content>
   <mat-card-actions align="end">
     <button mat-raised-button color="primary" (click)="signIn()">Sign In</button>
   </mat-card-actions>
-</mat-card>
+</mat-card>

apps/code-of-conduct/app/login/login.component.scss

@@ -6,4 +6,4 @@ mat-card {
     display: block;
     margin: 24px 0;
   }
-}
+}

apps/code-of-conduct/app/main/main.component.html

@@ -1,3 +1,5 @@
 <user-table></user-table>
 
-<button class="add-button" (click)="openBlockDialog()" color="primary" mat-fab><mat-icon>add</mat-icon></button>
+<button class="add-button" (click)="openBlockDialog()" color="primary" mat-fab>
+  <mat-icon>add</mat-icon>
+</button>

apps/code-of-conduct/app/main/main.component.scss

@@ -12,4 +12,4 @@
   position: fixed;
   bottom: 30px;
   right: 30px;
-}
+}

apps/code-of-conduct/app/user-table/user-table.component.scss

@@ -20,4 +20,4 @@
 .cdk-column-actions {
   width: 110px;
   flex: unset;
-}
+}

apps/code-of-conduct/index.html

@@ -1,18 +1,21 @@
 <!doctype html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>Code of Conduct Manager</title>
-  <base href="/">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <link rel="preconnect" href="https://fonts.gstatic.com">
-  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-  <link href="/styles.css" rel="stylesheet">
-</head>
-<body class="mat-typography">
-  <app-root></app-root>
-</body>
-<script src="/bundle/main.js"></script>
+  <head>
+    <meta charset="utf-8" />
+    <title>Code of Conduct Manager</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"
+      rel="stylesheet"
+    />
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
+    <link href="/styles.css" rel="stylesheet" />
+  </head>
+  <body class="mat-typography">
+    <app-root></app-root>
+  </body>
+  <script src="/bundle/main.js"></script>
 </html>

bazel/http-server/test/index.html

@@ -1,13 +1,13 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Test</title>
-</head>
-<body>
-  Works
-</body>
-<script type="module" src="./main.js"></script>
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Test</title>
+  </head>
+  <body>
+    Works
+  </body>
+  <script type="module" src="./main.js"></script>
 </html>