fixup! fix(@angular/ssr): validate host headers to prevent header-based SSRF

Author: alan-agius4

packages/angular/build/src/utils/server-rendering/prerender.ts

@@ -225,6 +225,9 @@ async function renderPages(
       hasSsrEntry: !!outputFilesForWorker['server.mjs'],
     } as RenderWorkerData,
     execArgv: workerExecArgv,
+    env: {
+      'NG_ALLOWED_HOSTS': 'localhost',
+    },
   });
 
   try {
@@ -337,6 +340,9 @@ async function getAllRoutes(
       hasSsrEntry: !!outputFilesForWorker['server.mjs'],
     } as RoutesExtractorWorkerData,
     execArgv: workerExecArgv,
+    env: {
+      'NG_ALLOWED_HOSTS': 'localhost',
+    },
   });
 
   try {

packages/angular/ssr/node/src/app-engine.ts

@@ -10,6 +10,7 @@ import { AngularAppEngine } from '@angular/ssr';
 import type { IncomingMessage } from 'node:http';
 import type { Http2ServerRequest } from 'node:http2';
 import { AngularAppEngineOptions } from '../../src/app-engine';
+import { getAllowedHostsFromEnv } from './environment-options';
 import { attachNodeGlobalErrorHandlers } from './errors';
 import { createWebRequestFromNodeRequest } from './request';
 
@@ -34,7 +35,10 @@ export class AngularNodeAppEngine {
    * @param options Options for the Angular Node.js server application engine.
    */
   constructor(options?: AngularNodeAppEngineOptions) {
-    this.angularAppEngine = new AngularAppEngine(this.resolveAppEngineOptions(options));
+    this.angularAppEngine = new AngularAppEngine({
+      ...options,
+      allowedHosts: [...getAllowedHostsFromEnv(), ...(options?.allowedHosts ?? [])],
+    });
 
     attachNodeGlobalErrorHandlers();
   }
@@ -52,20 +56,20 @@ export class AngularNodeAppEngine {
    *
    * @remarks A request to `https://www.example.com/page/index.html` will serve or render the Angular route
    * corresponding to `https://www.example.com/page`.
-   * 
+   *
    * @remarks
-* To prevent potential Server-Side Request Forgery (SSRF), this function verifies the hostname 
-* of the `request.url` against a list of authorized hosts. 
-* If the hostname is not recognized, a Client-Side Rendered (CSR) version of the page is returned.
-
-* Resolution:
-* Authorize your hostname by configuring `allowedHosts` in `angular.json` in:
-* `projects.[project-name].architect.build.options.security.allowedHosts`. 
-* Alternatively, you can define the allowed hostname via environment variables 
-* (`process.env['HOSTNAME']` or `process.env['NG_ALLOWED_HOSTS']`) or pass it directly 
-* through the configuration options of `AngularNodeAppEngine`.
-* 
-* For more information see: https://angular.dev/best-practices/security#preventing-server-side-request-forgery-ssrf
+   * To prevent potential Server-Side Request Forgery (SSRF), this function verifies the hostname
+   * of the `request.url` against a list of authorized hosts.
+   * If the hostname is not recognized and `allowedHosts` is not empty, a Client-Side Rendered (CSR) version of the
+   * page is returned otherwise a 400 Bad Request is returned.
+   *
+   * Resolution:
+   * Authorize your hostname by configuring `allowedHosts` in `angular.json` in:
+   * `projects.[project-name].architect.build.options.security.allowedHosts`.
+   * Alternatively, you can define the allowed hostname via the environment variable `process.env['NG_ALLOWED_HOSTS']`
+   * or pass it directly through the configuration options of `AngularNodeAppEngine`.
+   *
+   * For more information see: https://angular.dev/best-practices/security#preventing-server-side-request-forgery-ssrf
    */
   async handle(
     request: IncomingMessage | Http2ServerRequest | Request,
@@ -76,37 +80,4 @@ export class AngularNodeAppEngine {
 
     return this.angularAppEngine.handle(webRequest, requestContext);
   }
-
-  /**
-   * Resolves the Angular server application engine options.
-   * @param options Options for the Angular server application engine.
-   * @returns Resolved options for the Angular server application engine.
-   */
-  private resolveAppEngineOptions(
-    options: AngularNodeAppEngineOptions | undefined,
-  ): AngularAppEngineOptions {
-    const allowedHosts = options?.allowedHosts ? [...options.allowedHosts] : [];
-    const processEnv = process.env;
-
-    const envNgAllowedHosts = processEnv['NG_ALLOWED_HOSTS'];
-    if (envNgAllowedHosts) {
-      const hosts = envNgAllowedHosts.split(',');
-      for (const host of hosts) {
-        const hostTrimmed = host.trim();
-        if (hostTrimmed) {
-          allowedHosts.push(hostTrimmed);
-        }
-      }
-    }
-
-    const envHostName = processEnv['HOSTNAME']?.trim();
-    if (envHostName) {
-      allowedHosts.push(envHostName);
-    }
-
-    return {
-      ...options,
-      allowedHosts,
-    };
-  }
 }

packages/angular/ssr/node/src/common-engine/common-engine.ts

@@ -13,6 +13,7 @@ import * as fs from 'node:fs';
 import { dirname, join, normalize, resolve } from 'node:path';
 import { URL } from 'node:url';
 import { validateUrl } from '../../../src/utils/validation';
+import { getAllowedHostsFromEnv } from '../environment-options';
 import { attachNodeGlobalErrorHandlers } from '../errors';
 import { CommonEngineInlineCriticalCssProcessor } from './inline-css-processor';
 import {
@@ -71,7 +72,10 @@ export class CommonEngine {
   private readonly allowedHosts: ReadonlySet<string>;
 
   constructor(private options?: CommonEngineOptions) {
-    this.allowedHosts = this.resolveAllowedHosts(options);
+    this.allowedHosts = new Set([
+      ...getAllowedHostsFromEnv(),
+      ...(this.options?.allowedHosts ?? []),
+    ]);
 
     attachNodeGlobalErrorHandlers();
   }
@@ -94,8 +98,9 @@ export class CommonEngine {
         }
         // eslint-disable-next-line no-console
         console.error(
-          `ERROR: Host ${urlObj.hostname} is not allowed. Please provide a list of allowed hosts in the "allowedHosts" option.`,
-          'Fallbacking to client side rendering. This will become a 400 Bad Request in a future major version.\n',
+          `ERROR: Host ${urlObj.hostname} is not allowed. ` +
+            'Please provide a list of allowed hosts in the "allowedHosts" option in the "CommonEngine" constructor.',
+          `Falling back to client side rendering for ${urlObj.href}. This will become a 400 Bad Request in a future major version.\n`,
         );
       }
     }
@@ -212,34 +217,6 @@ export class CommonEngine {
 
     return doc;
   }
-
-  /**
-   * Resolves the allowed hosts from the provided options and environment variables.
-   * @param options Options for the common engine.
-   * @returns A set of allowed hosts.
-   */
-  private resolveAllowedHosts(options: CommonEngineOptions | undefined): ReadonlySet<string> {
-    const allowedHosts = new Set(options?.allowedHosts ?? []);
-    const processEnv = process.env;
-
-    const envNgAllowedHosts = processEnv['NG_ALLOWED_HOSTS'];
-    if (envNgAllowedHosts) {
-      const hosts = envNgAllowedHosts.split(',');
-      for (const host of hosts) {
-        const hostTrimmed = host.trim();
-        if (hostTrimmed) {
-          allowedHosts.add(hostTrimmed);
-        }
-      }
-    }
-
-    const envHostName = processEnv['HOSTNAME']?.trim();
-    if (envHostName) {
-      allowedHosts.add(envHostName);
-    }
-
-    return allowedHosts;
-  }
 }
 
 async function exists(path: fs.PathLike): Promise<boolean> {

packages/angular/ssr/node/src/environment-options.ts

@@ -0,0 +1,29 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+/**
+ * Retrieves the list of allowed hosts from the environment variable `NG_ALLOWED_HOSTS`.
+ * @returns An array of allowed hosts.
+ */
+export function getAllowedHostsFromEnv(): string[] {
+  const allowedHosts: string[] = [];
+  const envNgAllowedHosts = process.env['NG_ALLOWED_HOSTS'];
+  if (!envNgAllowedHosts) {
+    return allowedHosts;
+  }
+
+  const hosts = envNgAllowedHosts.split(',');
+  for (const host of hosts) {
+    const trimmed = host.trim();
+    if (trimmed.length > 0) {
+      allowedHosts.push(trimmed);
+    }
+  }
+
+  return allowedHosts;
+}

packages/angular/ssr/src/app-engine.ts

@@ -11,7 +11,7 @@ import { Hooks } from './hooks';
 import { getPotentialLocaleIdFromUrl, getPreferredLocale } from './i18n';
 import { EntryPointExports, getAngularAppEngineManifest } from './manifest';
 import { joinUrlParts } from './utils/url';
-import { secureRequest, validateRequest } from './utils/validation';
+import { cloneRequestWithPatchedHeaders, validateRequest } from './utils/validation';
 
 /**
  * Options for the Angular server application engine.
@@ -78,15 +78,7 @@ export class AngularAppEngine {
    * @param options Options for the Angular server application engine.
    */
   constructor(options?: AngularAppEngineOptions) {
-    const allowedHosts = new Set(this.manifest.allowedHosts);
-
-    if (options?.allowedHosts) {
-      for (const host of options.allowedHosts) {
-        allowedHosts.add(host);
-      }
-    }
-
-    this.allowedHosts = allowedHosts;
+    this.allowedHosts = new Set([...(options?.allowedHosts ?? []), ...this.manifest.allowedHosts]);
   }
 
   /**
@@ -100,44 +92,37 @@ export class AngularAppEngine {
    * @remarks A request to `https://www.example.com/page/index.html` will serve or render the Angular route
    * corresponding to `https://www.example.com/page`.
    *
-* @remarks
-* To prevent potential Server-Side Request Forgery (SSRF), this function verifies the hostname 
-* of the `request.url` against a list of authorized hosts. 
-* If the hostname is not recognized, a Client-Side Rendered (CSR) version of the page is returned.
-
-* Resolution:
-* Authorize your hostname by configuring `allowedHosts` in `angular.json` in:
-* `projects.[project-name].architect.build.options.security.allowedHosts`. 
-* Alternatively, you pass it directly through the configuration options of `AngularAppEngine`.
-* 
-* For more information see: https://angular.dev/best-practices/security#preventing-server-side-request-forgery-ssrf
-*/
+   * @remarks
+   * To prevent potential Server-Side Request Forgery (SSRF), this function verifies the hostname
+   * of the `request.url` against a list of authorized hosts.
+   * If the hostname is not recognized and `allowedHosts` is not empty, a Client-Side Rendered (CSR) version of the
+   * page is returned otherwise a 400 Bad Request is returned.
+   * Resolution:
+   * Authorize your hostname by configuring `allowedHosts` in `angular.json` in:
+   * `projects.[project-name].architect.build.options.security.allowedHosts`.
+   * Alternatively, you pass it directly through the configuration options of `AngularAppEngine`.
+   *
+   * For more information see: https://angular.dev/best-practices/security#preventing-server-side-request-forgery-ssrf
+   */
   async handle(request: Request, requestContext?: unknown): Promise<Response | null> {
     const allowedHost = this.allowedHosts;
-    request = secureRequest(request, this.allowedHosts);
 
     try {
       validateRequest(request, allowedHost);
     } catch (error) {
-      const msg = error instanceof Error ? error.message : error;
-
-      // eslint-disable-next-line no-console
-      console.error(
-        `ERROR: Bad Request ("${request.url}").\n` +
-          msg +
-          '\nFallbacking to client side rendering. This will become a 400 Bad Request in a future major version.',
-      );
-
-      // Fallback to CSR to avoid a breaking change.
-      // TODO(alanagius): Return a 400 and remove this fallback in the next major version (v22).
-      const serverApp = await this.getAngularServerAppForRequest(request);
-
-      return serverApp?.serveClientSidePage() ?? null;
+      return this.handleValidationError(error as Error, request);
     }
 
-    const serverApp = await this.getAngularServerAppForRequest(request);
+    // Clone request with patched headers to prevent unallowed host header access.
+    const { request: securedRequest, onError: onHeaderValidationError } =
+      cloneRequestWithPatchedHeaders(request, allowedHost);
+
+    const serverApp = await this.getAngularServerAppForRequest(securedRequest);
     if (serverApp) {
-      return serverApp.handle(request, requestContext);
+      return Promise.race([
+        onHeaderValidationError.then((error) => this.handleValidationError(error, securedRequest)),
+        serverApp.handle(securedRequest, requestContext),
+      ]);
     }
 
     if (this.supportedLocales.length > 1) {
@@ -266,4 +251,42 @@ export class AngularAppEngine {
 
     return this.getEntryPointExports(potentialLocale) ?? this.getEntryPointExports('');
   }
+
+  /**
+   * Handles validation errors by logging the error and returning an appropriate response.
+   *
+   * @param error - The validation error to handle.
+   * @param request - The HTTP request that caused the validation error.
+   * @returns A promise that resolves to a `Response` object with a 400 status code if allowed hosts are configured,
+   * or `null` if allowed hosts are not configured (in which case the request is served client-side).
+   */
+  private async handleValidationError(error: Error, request: Request): Promise<Response | null> {
+    const isAllowedHostConfigured = this.allowedHosts.size > 0;
+    const errorMessage = error.message;
+
+    // eslint-disable-next-line no-console
+    console.error(
+      `ERROR: Bad Request ("${request.url}").\n` +
+        errorMessage +
+        (isAllowedHostConfigured
+          ? ''
+          : '\nFallbacking to client side rendering. This will become a 400 Bad Request in a future major version.') +
+        '\n\nFor more information, see https://angular.dev/best-practices/security#preventing-server-side-request-forgery-ssrf',
+    );
+
+    if (isAllowedHostConfigured) {
+      // Allowed hosts has been configured incorrectly, thus we can return a 400 bad request.
+      return new Response(errorMessage, {
+        status: 400,
+        statusText: 'Bad Request',
+        headers: { 'Content-Type': 'text/plain' },
+      });
+    }
+
+    // Fallback to CSR to avoid a breaking change.
+    // TODO(alanagius): Return a 400 and remove this fallback in the next major version (v22).
+    const serverApp = await this.getAngularServerAppForRequest(request);
+
+    return serverApp?.serveClientSidePage() ?? null;
+  }
 }