Skip to content

Allowing different HOST headers to be used in ng serve #6349

Closed
Closed
Allowing different HOST headers to be used in ng serve#6349
Labels
freq1: lowOnly reported by a handful of users who observe it rarelytype: bug/fix

Description

@Tommyf
Tommyf
opened on May 17, 2017

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?

Activity

  1. Tommyf commented on May 17, 2017

    @Tommyf
    Tommyf
    on May 17, 2017
    Author

    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?

  2. lighter commented on May 17, 2017

    @lighter
    lighter
    on May 17, 2017

    I have same problem.

  3. ryanper commented on May 17, 2017

    @ryanper
    ryanper
    on May 17, 2017

    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.

  4. Tommyf commented on May 17, 2017

    @Tommyf
    Tommyf
    on May 17, 2017
    Author

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

  5. ryanper commented on May 17, 2017

    @ryanper
    ryanper
    on May 17, 2017

    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.

  6. Tommyf commented on May 17, 2017

    @Tommyf
    Tommyf
    on May 17, 2017
    Author

    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.

  7. sumitarora
    self-assigned this
    on May 17, 2017
  8. sumitarora
    added
    freq1: lowOnly reported by a handful of users who observe it rarely
    type: bug/fix
    on May 17, 2017

  9. clydin commented on May 18, 2017

    @clydin
    clydin
    on May 18, 2017
    Member

    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.

  10. Tommyf commented on May 18, 2017

    @Tommyf
    Tommyf
    on May 18, 2017
    Author

    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?

  11. ryanper commented on May 18, 2017

    @ryanper
    ryanper
    on May 18, 2017

    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.

  12. Tommyf commented on May 18, 2017

    @Tommyf
    Tommyf
    on May 18, 2017
    Author

    @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 :)

  13. mikkoh85 commented on May 18, 2017

    @mikkoh85
    mikkoh85
    on May 18, 2017

    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

  14. clydin commented on May 18, 2017

    @clydin
    clydin
    on May 18, 2017
    Member

    @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.

  15. 8 remaining items

  16. JSMike commented on Jul 28, 2017

    @JSMike
    JSMike
    on Jul 28, 2017
    Contributor

    this already exists: #6173

    This issue should be closed.

  17. haydenk commented on Aug 1, 2017

    @haydenk
    haydenk
    on Aug 1, 2017

    I can see how this would be useful in development...

    Configure reverse proxy (Apache/Nginx/HAProxy etc)

    but I hope you're not running ng serve in production.

  18. glebmachine commented on Aug 1, 2017

    @glebmachine
    glebmachine
    on Aug 1, 2017 via email

  19. briansanchez commented on Aug 29, 2017

    @briansanchez
    briansanchez
    on Aug 29, 2017

    this works like a charm:
    ng serve --host 207.68.230.134 --disable-host-check

  20. ankon
    added a commit that references this issue on Sep 8, 2017

    Disable the 'host' header check

    8bca955

  21. andela-andrewmakenzi commented on Nov 2, 2017

    @andela-andrewmakenzi
    andela-andrewmakenzi
    on Nov 2, 2017

    There are two ways of doing this :

    1. Do and ng eject and add disableHostCheck=true to devServer settings in the webpack.config.js file then run ng s to serve that app, hostChecking will be disabled OR
    2. Run this on your command line ng serve --host 0.0.0.0 -port 4200 --disable-host-check
      It is important to note that if you disable host checking, your server is susceptible to DNS rebinding attacks, which might not matter depending on what you are trying to do.
  22. clydin
    closed this as completedon Jan 5, 2018
  23. clydin
    unassigned
    sumitarora
    on Jan 5, 2018

  24. haydenk commented on Jan 7, 2018

    @haydenk
    haydenk
    on Jan 7, 2018

    Why is this doing a host check at all? Wouldn't, nay shouldn't, this only be used during local development of the web application?

  25. glebmachine commented on Jan 7, 2018

    @glebmachine
    glebmachine
    on Jan 7, 2018 via email

  26. dineshmaths1 commented on Sep 17, 2018

    @dineshmaths1
    dineshmaths1
    on Sep 17, 2018

    Am using Angular CLI: 6.2.2 , Node: 8.11.1 and OS: darwin x64 This is my etc hosts 127.0.0.1 dinesh.mysocialapi.com

    This is my comment node_modules/@angular/cli/bin/ng serve --host 0.0.0.0 --disableHostCheck true

    am getting this error how to fix ? Loading failed for the with source “http://dinesh.mysocialapi.com/vendor.js”. dinesh.mysocialapi.com:34

  27. leventguney commented on Jan 27, 2019

    @leventguney
    leventguney
    on Jan 27, 2019

    I have edited the serve block under architect block in angular.json file to define publicHost property and it works. I can use ng serve directly and it works with my host name without complaining invalid host header

    "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
    "browserTarget": "my-app:build",
    "publicHost":"myapp.com"
    },
    "configurations": {
    "production": {
    "browserTarget": "my-app:build:production"
    }
    }
    },

  28. clydin commented on Sep 6, 2019

    @clydin
    clydin
    on Sep 6, 2019
    Member

    Please note that a DNS Rebinding attack allows a malicious website to access resources within the local network including localhost. So it is not a matter of trusting localhost but rather trusting every website visited from the computer.

  29. angular-automatic-lock-bot commented on Oct 10, 2019

    @angular-automatic-lock-bot
    angular-automatic-lock-botbot
    on Oct 10, 2019

    This issue has been automatically locked due to inactivity.
    Please file a new issue if you are encountering a similar or related problem.

    Read more about our automatic conversation locking policy.

    This action has been performed automatically by a bot.

  30. angular-automatic-lock-bot
    locked and limited conversation to collaborators on Oct 10, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    freq1: lowOnly reported by a handful of users who observe it rarelytype: bug/fix

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions