Repository: angular/angular-cli
File: packages/angular/build/src/tools/vite/middlewares/host-check-middleware.ts (TypeScript)

Code before:
function isLocalHost(name: string | undefined): boolean {
  if (!name) return false;
  return name === 'localhost' || name === '127.0.0.1' || name === '[::1]' || name === '::1';
}

function html403(hostname: string): string {
  return `<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Blocked request</title>
    <style>
      body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;line-height:1.4;margin:2rem;color:#1f2937}
      code{background:#f3f4f6;padding:.15rem .35rem;border-radius:.25rem}
      .box{max-width:760px;margin:0 auto}
      h1{font-size:1.5rem;margin-bottom:.75rem}
      p{margin:.5rem 0}
      .muted{color:#6b7280}
      pre{background:#f9fafb;border:1px solid #e5e7eb;padding:.75rem;border-radius:.5rem;overflow:auto}
    </style>
  </head>
  <body>
    <div class="box">
      <h1>Blocked request. This host ("${hostname}") is not allowed.</h1>
      <p>The Angular development server only responds to local hosts by default.</p>
      <p>To allow this host, add it to <code>allowedHosts</code> under the <code>serve</code> target in <code>angular.json</code>.</p>
      <pre><code>{
  "serve": {
    "options": {
      "allowedHosts": ["${hostname}"]
    }
  }
}</code></pre>
    </div>
  </body>
  </html>`;
}

/**
 * Middleware that enforces host checking using Angular CLI's `allowedHosts` option.
 *
 * Vite's own host check is disabled in the server configuration so that we can
 * present an Angular-specific guidance page when blocked.
 */
export function createAngularHostCheckMiddleware(
  _server: ViteDevServer,
  allowedHosts: true | string[] | undefined,
  devHost: string,
): Connect.NextHandleFunction {
  // Normalize configured allowed hosts

Review comment (suggestion):
This is not actually fully true, as you can get a response via the external IP address.

```suggestion
```


Code after:
    next: (err?: unknown) => void,
  ) {
    originalHandle(
      req,
      {
        writeHead: (code) => {
          res.writeHead(code, { 'content-type': 'text/html' });
        },
        end: () => {
          const hostname = req.headers.host?.toLowerCase().split(':')[0] ?? '';
          res.end(html403(hostname));
        },
      } as ServerResponse,
      next,
    );
  };
}

function html403(hostname: string): string {
  return `<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Blocked request</title>
    <style>
      body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
      line-height:1.4;margin:2rem;color:#1f2937}
      code{background:#f3f4f6;padding:.15rem .35rem;border-radius:.25rem}
      main{max-width:760px;margin:0 auto}
      h1{font-size:1.5rem;margin-bottom:.75rem}
      p{margin:.5rem 0}
      pre{background:#f9fafb;border:1px solid #e5e7eb;padding:.75rem;border-radius:.5rem;overflow:auto}
    </style>
  </head>
  <body>
    <main>
      <h1>Blocked request. This host ("${hostname}") is not allowed.</h1>
      <p>To allow this host, add it to <code>allowedHosts</code> under the <code>serve</code> target in <code>angular.json</code>.</p>
      <pre><code>{
  "serve": {
    "options": {
      "allowedHosts": ["${hostname}"]
    }
  }
}</code></pre>
    </main>
  </body>
  </html>`;
}