feat: add ngSanitize. set up security headers and CSP

- use a nonce for AngularJS Material theme styles
- apply `ng-csp` directive to document
- set better cache headers
- add script for local Firebase Hosting emulation

Author: Splaktar

.firebaserc

@@ -1,4 +1,7 @@
 {
+  "projects": {
+    "default": "material-hybrid"
+  },
   "targets": {
     "material-hybrid": {
       "hosting": {
@@ -8,4 +11,4 @@
       }
     }
   }
-}
+}

.gitignore

@@ -37,7 +37,7 @@ speed-measure-plugin.json
 /connect.lock
 /coverage
 /libpeerconnection.log
-.log
+*.log
 yarn-error.log
 testem.log
 /typings

angular.json

@@ -25,6 +25,7 @@
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
             "aot": true,
+            "extractCss": true,
             "outputPath": "dist/",
             "index": "src/index.html",
             "main": "src/main.ts",

firebase.json

@@ -5,12 +5,69 @@
       "public": "dist/",
       "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
       "appAssociation": "AUTO",
+      "cleanUrls": true,
       "rewrites": [
         {
-          "source": "**",
+          "source": "/**/!(*.@(js|ts|html|css|json|svg|png|jpg|jpeg|webp|gif|ico|woff2|woff|ttf|webmanifest))",
           "destination": "/index.html"
         }
-      ]
+      ],
+      "headers": [
+        {
+          "source": "/**(*.@(css|js|json|html|svg))",
+          "headers": [
+            {
+              "key": "X-Content-Type-Options",
+              "value": "nosniff"
+            }
+          ]
+        },
+        {
+          "source": "/**",
+          "headers": [
+            {
+              "key": "X-XSS-Protection",
+              "value": "1"
+            },
+            {
+              "key": "X-Frame-Options",
+              "value": "DENY"
+            },
+            {
+              "key": "Content-Security-Policy",
+              "value": "upgrade-insecure-requests; default-src 'self'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src *; media-src 'self'; script-src 'self' 'unsafe-inline' https://*.googleapis.com https://apis.google.com; child-src 'self' blob:; connect-src 'self' https://*.googleapis.com https://fonts.gstatic.com https://apis.google.com;"
+            }
+          ]
+        },
+        {
+          "source": "/assets/**",
+          "headers": [
+            {
+              "key": "Cache-Control",
+              "value": "public, max-age=604800, s-maxage=1209600"
+            }
+          ]
+        },
+        {
+          "source": "/*.@(webmanifest|ico)",
+          "headers": [
+            {
+              "key": "Cache-Control",
+              "value": "public, max-age=604800, s-maxage=1209600"
+            }
+          ]
+        },
+        {
+          "source": "/*.@(js|css)",
+          "headers": [
+            {
+              "key": "Cache-Control",
+              "value": "public, max-age=31536000"
+            }
+          ]
+        }
+      ],
+      "trailingSlash": false
     }
   ]
 }

package-lock.json

@@ -5,9 +5,11 @@
   "scripts": {
     "ng": "ng",
     "start": "npm run build:templates && ng serve",
+    "start:static": "firebase serve --only hosting:app",
     "build:templates": "gulp templates",
     "watch:templates": "gulp watch",
     "build": "npm run build:templates && ng build",
+    "build:prod": "npm run build:templates && ng build --prod",
     "test": "ng test",
     "prettier": "prettier --write \"**/*.{js,json,css,scss,less,md,ts,html,component.html}\"",
     "lint": "ng lint",
@@ -36,6 +38,7 @@
     "angular-aria": "^1.8.0",
     "angular-material": "^1.1.22",
     "angular-messages": "^1.8.0",
+    "angular-sanitize": "^1.8.0",
     "firebase": "^7.15.0",
     "rxjs": "^6.5.5",
     "tslib": "^1.11.2",

package.json

@@ -3,8 +3,10 @@ import 'angular-animate';
 import 'angular-aria';
 import 'angular-messages';
 import 'angular-material';
+import 'angular-sanitize';
 import './templates/index';
 import { downgradeComponent, downgradeModule } from '@angular/upgrade/static';
+import { environment } from '../../environments/environment';
 import { AppComponent } from '../angular/app.component';
 import { appAngularJSComponent } from './app-angularjs.component';
 import { versionStampComponent } from './version-stamp.component';
@@ -19,12 +21,13 @@ const configFunction = ($mdThemingProvider, $mdGestureProvider) => {
     .primaryPalette('indigo')
     .accentPalette('green', { default: '500' })
     .backgroundPalette('grey', { default: 'A100' });
+  $mdThemingProvider.setNonce(`${btoa(environment.version)}`);
   $mdGestureProvider.skipClickHijack();
 };
 configFunction.$inject = ['$mdThemingProvider', '$mdGestureProvider'];
 
 export const appAngularjsModule = angular
-  .module('AngularJSApp', ['ngMaterial', 'ngMessages', 'templates', downgradedModule])
+  .module('AngularJSApp', ['ngMaterial', 'ngMessages', 'ngSanitize', 'templates', downgradedModule])
   .config(configFunction)
   .component(appAngularJSComponent.selector, appAngularJSComponent)
   .component(versionStampComponent.selector, versionStampComponent)

src/app/angularjs/app-angularjs.module.ts

@@ -1,3 +1,6 @@
+import { version } from '../../package.json';
+
 export const environment = {
   production: true,
+  version,
 };

src/environments/environment.prod.ts

@@ -1,9 +1,12 @@
+import { version } from '../../package.json';
+
 // This file can be replaced during build by using the `fileReplacements` array.
 // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
   production: false,
+  version,
 };
 
 /*

src/environments/environment.ts

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en-US">
+<html lang="en-US" ng-csp>
   <head>
     <meta charset="utf-8" />
     <title>AngularJS/Angular Material Hybrid</title>
@@ -17,8 +17,8 @@
     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet" />
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
 
-    <link rel="dns-prefetch" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" />
   </head>
   <body class="mat-typography">
     <app-angularjs>Loading...</app-angularjs>

src/index.html

@@ -12,6 +12,7 @@
     "importHelpers": true,
     "target": "es2015",
     "typeRoots": ["node_modules/@types"],
-    "lib": ["es2018", "dom"]
+    "lib": ["es2018", "dom"],
+    "resolveJsonModule": true
   }
 }