feat(@angular-devkit/build-angular): support custom headers in dev-server

Make it possible to configure dev-server to send custom HTTP headers on
every client request. These headers can be specified as a key-value map
under the new "headers" property of the dev-server builder in
angular.json. These headers are then passed on to the webpack devserver.

An example use case for this is to enable various security features,
such as CSP and Trusted Types, both in local application development and
in integration tests, by setting appropriate HTTP headers.

This is part of an effort to add support for Trusted Types in Angular.
The ability to enforce Trusted Types during development and integration
tests is essential, as this can help detect Trusted Types violations
that might otherwise break applications when they're pushed to
production where such security features may be enforced.

Author: bjarkler

packages/angular_devkit/build_angular/src/dev-server/index.ts

@@ -397,10 +397,13 @@ export function buildServerConfig(
   const servePath = buildServePath(serverOptions, browserOptions, logger);
   const { styles, scripts } = normalizeOptimization(browserOptions.optimization);
 
-  const config: WebpackDevServer.Configuration & { logLevel: string } = {
+  const config: WebpackDevServer.Configuration&{logLevel: string} = {
     host: serverOptions.host,
     port: serverOptions.port,
-    headers: { 'Access-Control-Allow-Origin': '*' },
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+      ...serverOptions.headers,
+    },
     historyApiFallback: !!browserOptions.index && {
       index: `${servePath}/${getIndexOutputFile(browserOptions)}`,
       disableDotRule: true,

packages/angular_devkit/build_angular/src/dev-server/schema.json

@@ -36,6 +36,16 @@
       "type": "string",
       "description": "SSL certificate to use for serving HTTPS."
     },
+    "headers": {
+      "type": "object",
+      "description": "Custom HTTP headers to serve.",
+      "propertyNames": {
+        "pattern": "^[-_A-Za-z0-9]+$"
+      },
+      "additionalProperties": {
+        "type": "string"
+      }
+    },
     "open": {
       "type": "boolean",
       "description": "Opens the url in default browser.",

packages/angular_devkit/build_angular/src/dev-server/works_spec.ts

@@ -102,4 +102,14 @@ describe('Dev Server Builder', () => {
     expect(hasSourceMaps).toBe(false, `Expected emitted files not to contain '.map' files.`);
   });
 
+  it('serves custom headers', async () => {
+    const run = await architect.scheduleTarget(
+        target, {headers: {'X-Header': 'Hello World'}});
+    runs.push(run);
+    const output = await run.result as DevServerBuilderOutput;
+    expect(output.success).toBe(true);
+    const response = await fetch('http://localhost:4200/index.html');
+    expect(response.headers.get('X-Header')).toBe('Hello World');
+  }, 30000);
+
 });