Allowing different HOST headers to be used in ng serve

[Tommyf]

Bug Report or Feature Request (mark with an x)

- [   ] bug report -> please search issues before submitting
- [ x ] feature request

Allow ng serve to accept requests with host headers that are different to the --host setting. This is needed when accessing the server via a reverse proxy.

Versions.

@angular/cli: 1.0.3
node: 6.10.1
os: linux x64
@angular/common: 4.1.2
@angular/compiler: 4.1.2
@angular/core: 4.1.2
@angular/forms: 4.1.2
@angular/http: 4.1.2
@angular/platform-browser: 4.1.2
@angular/platform-browser-dynamic: 4.1.2
@angular/router: 4.1.2
@angular/cli: 1.0.3
@angular/compiler-cli: 4.1.2

Linux Ubuntu 16.04.2 LTS

Repro steps.

ng new my-dream-app
cd my-dream-app/
ng serve

Configure reverse proxy (Apache/Nginx/HAProxy etc)
e.g. http://myapp.example.com reverse proxies to http://localhost:4200

Browse to http://myapp.example.com

Resulting page displays:
Invalid Host Header

The log given by the failure.

No error log is produced

Desired functionality.

I would like to see a command-line option that specifies a list of allowed HOST: header values.

Mention any other details that might be useful.

It is possible to work around this problem by editing the hosts file on your OS so that myapp.example.com points to an IP address that the server is listening on. This way, the 'expected' HOST: header is correct and ng serve is listening on the correct IP address.
However this is not an ideal solution as it requires editing the system-wide hosts file. This may not always be possible or desirable. It is common to allow for different HOST: headers to be used in server applications (e.g. Apache, Nginx etc) for virtual hosting.
I understand that ng serve is not meant for production purposes, so virtual hosting does not need to be a consideration, but sometimes developers also need to use a reverse proxy when working remotely rather than on their local machine (e.g. local machine is Windows and you don't want to run node locally).

After researching this issue more, I found that --host 0.0.0.0 was a common solution to this problem but no longer works due to a regression introduced in 1.0.1. due to stricter host name checking in WebPack. I see other issues related to it ( #6070 ), but they talk about disabling host checking (bad) or configuring public hosts (Using --public in webpack-dev-server or --piblic-host in angular-cli v1.1.0.beta.1 or newer.)

I tried installing Angular-cli 1.1.0-rc.0 and using --public-host http://public.host.com and --host 0.0.0.0 or --host <local IP Addr> but it still returns the Invalid Host header error when I browse to http://public.host.com

In one of the many threads I have read on this in the last few days, someone mentioned that Django has a configuration to allow multiple hosts and indeed it does. But it's done as a part of the configuration of the app by definign an array of allowed hosts. Can something like this be done?

[Tommyf]

So I was looking around more. There is a veritable spiders web of issues pertaining to problems since the host checking was implemented in webpack-dev-server.

And I just noticed this webpack/webpack-dev-server#899 which allows for passing in a list of allowed hosts in webpack-dev-server.

Can angular-cli somehow implement a similar list of allowed hosts and pass this on to webpack?

[lighter]

I have same problem.

[ryanper]

I have a similar issue, I am also using service workers so using ng serve with ssl so will need to check how this will work. I am no expert but happy to look at this with some guidance.

[Tommyf]

I too am happy to work on this (with guidance).

[ryanper]

Looks like some work has already been done on this in v1.1.0-beta.1, will install and try this out.

Yep, this seems to work for me though using it with ssl may be an issue, or related to something else.

[Tommyf]

I mentioned using v1.1.0-rc.0 which includes that commit.

What I am asking for is different. In that commit, one needs to --disable-host-check which is bad as it just circumvents the security measures that were put in place in webpack-dev-server.
Also in that commit is the --public-host option. Although this is tecnically an 'allowed host' it's not as flexible as having a configuration setting with an array of allowed hosts. There are multiple use cases where only allowing a single 'public' host may not be sufficient, for example, branding based on URL, or needing to used different reverse proxies for different locations.

As an aside, the --public-host was not working for me in v1.1.0.rc.0. I still need to use my hosts file or use --disable-host-check. I will double check though.

[clydin]

The --public-host option expects a hostname. The use of a URL was most likely the cause of the issue observed.
Until webpack-dev-server adds support for configuring multiple hosts, there's not much that can done on that front, unfortunately.
Realistically, ng serve is meant to be a basic development server. If a development setup requires a more exotic configuration, a custom server used in combination with ng build --watch may be more appropriate.
Also, there's nothing inherently bad about --disable-host-check. It's a tool that can be quite useful if used appropriately. Regardless of the use of the option, ng serve is not intended to be publicly accessible.

[Tommyf]

If I use a hostname instead of a URL for --public-host, I get the following error:

'live-reload-client' must be a full URL.

I agree that this cannot be done until the multiple hosts is added to a webpack-dev-server release. It looks like it's being added in webpack/webpack-dev-server#899 , but i'm not sure if/when that will be released.

Can this be revisited once the above is indeed released in webpack-dev-server?

[ryanper]

Opps sorry @Tommyf you did mention v1.1.0-rc.0 my bad.

With regard to the full url, these combination of parameters worked for me
a) "ng serve --host host-ip-address --public-host http://host-ip-address" ( had to add http:// )
b) "ng serve --host 0.0.0.0 --disable-host-check",

I am happy with the --disable-host-check flag for local development, but I can appreciate the need to secure it in larger development teams where a proper web server would most likely be used as clydin suggested.

[Tommyf]

@ryanper in that example, you have the same IP address used for --host and --public-host? If that's the case, then this is not the scenario I am talking about.

The scenario I am talking about is this:

ng serve --host local-ip-address --public-host http://public-ip-address-or-dns

Where local-ip-address is on a private network and not accessibly directly from the web and you have a reverse proxy that maps the public ip to the local one. In the above instance, you only get Invalid Host header unless you add --disable-host-check also.

In this scenario, running the following

ng serve --host 0.0.0.0 --disable-host-check

will load the page, but the websocket for live updates will not connect as it tries to use http://localhost:4200 which is obviously not accessible from the net :)

[mikkoh85]

Can you tell me what is this about?

When I run
ng serve --host 0.0.0.0 --disable-host-check

The option '--disable-host-check' is not registered with the serve command. Run `ng serve --help` for a list of supported options. appears. And it gives that same Invalid Host header. I tried to update package.json from 4.1.1 everything to 4.1.2 and hit npm i and the same "is not registered" comes just like before.

I have these installed globally:

/usr/lib
├── @angular/cli@1.0.3
├── http-server@0.10.0
├── loopback-cli@2.5.0
├── npm@4.2.0
├── pm2@2.4.6
└── typings@2.1.1

[clydin]

@Tommyf the scenario you're describing is really not recommended. 'ng serve' is not a production ready or security hardened server; and is not intended to be.
The settings being discussed are intended to enable the creation of internal production representative development environments. Docker is quite popular for this.

@mikkoh85 the option will be available in version 1.1 of the CLI. A release candidate is available currently.