webpack-dev-server: --host 0.0.0.0 Not working

behind proxy you can use the disableHostCheck: true flag.

https://github.com/webpack/webpack-dev-server/releases/tag/v2.4.3

best add --public your-host:8080 to fix it.

Set this in a devServer config in a webpack.config.js for those who come across this issue: Beware of the security risks when doing this!

module.exports = {
  // Earlier configuration etc...
  devServer: {
    host: '0.0.0.0',
    disableHostCheck: true
  }
}

btw. it’s intended to not work when just using --host 0.0.0.0. This is a security risk.

@sokra I understand the security fix and am grateful as always for all the work done on webpack but I would like to know why this was included in a patch and not a major version. Presumably this security risk has been present for quite some time and as such I don’t see the urgency.

I assume that webpack tries to follow semver which is pretty clear that almost any breaking change should be a major version bump, especially if what you’re versioning has a huge audience, which certainly webpack does. A major patch bump is also much better for communicating to users that there are breaking changes which would have saved at least a few people on this thread and presumably more elsewhere hours of lost work. As it is, I’m still trying to figure out how to make this change work with my team’s somewhat unique configuration (that’s actually somewhat similar to @bdwain’s). My guess is that I’ll end up rolling back the version but that certainly can’t be a permanent solution.

While we could have avoided this by locking down the versions in our package.json we are still in the development and as such haven’t done that yet but if packages followed semver it shouldn’t be too much of a problem.

As a followup to the post by @phairoh.

I understand this was considered a security flaw, however this should have been handled more gracefully.

There are entirely valid cases where developers will want to use multiple hostnames. My own example being we have multiple companies that have different logos based on the host.

A more graceful way of handling this would have been one of the following options:

Option 1

Default disableHostCheck to true. Then once webpack-dev-server is ready for a major version bump default disableHostCheck to false.

This has a few benefits:

1. This prevents us from breaking users via a minor version bump
2. Users who actually care about the feature can set it to false
3. You eventually get it to your ideal default value which is to prevent the security flaw by default

Option 2

Wait for a major version bump, then add the security fix / feature.

This option is less than ideal because the user has to wait for a major version bump for his fix to be available.

Obviously this is a fairly simple fix, but it concerns me because rather then following semver webpack-dev-server is allowing breaking changes in minor version bumps.

@sokra How to use disableHostCheck option from webpack-dev-server cli?

Is it too much to ask that the webpack devs stop breaking api and CLI commands?

btw, this should be a priority ONE feature imo, considering most people are not using the “dev-server” as a production environment therefore minimizing the need to block requests as per security concerns.

Is it too much to ask that the webpack devs stop breaking api and CLI commands?

I’d highly recommend taking a less aggressive stance with regard to open source projects that are fueled solely by time donated by maintainers and enthusiasts. Those working on this are doing their best to appease an insanely diverse set of requirements and use cases over an insanely diverse user base, all the while trying to keep security and stability in mind. I get that you’re frustrated, but take a step back and have a breath before taking to the comments.

Security concerns are still paramount, as was demonstrated by the rebinding flaw attack vectors and the ssl attack vector issues that arose this year.

https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a https://medium.com/@mikenorth/webpack-preact-cli-vulnerability-961572624c54

Those were/are very real threats to people, even if they couldn’t personally affect [you], they’re still very real and have the possibility to do real damage. For this reason we clearly disagree that user/dev convenience trumps secrity - quite the contrary. We’ll always do our best to try to keep security fixes from interfering with users’ dev experience, but now and then an uncomfortable change is necessary.

Also bear in mind that everyone has the ability to fork and bypass features/code that are there to enforce security. Especially considering that webpack-dev-server is intended to be used in a dev environment, it’s therefore not an anti-pattern nor bad practice to link your devDep for webpack-dev-server to a github repo (your stripped fork).

@sokra How to use disableHostCheck option from webpack-dev-server cli? In my case, the IP always change, so i can’t pass it to npm scripts like: "start": "webpack-dev-server --host 0.0.0.0 --public x.y.z". Need disableHostCheck option in cli.

@nick-woodward yes in a perfect world you are right.

From my experience how many people update to the latest major version, I’ve chosen to release this as patch version. I know that this breaks some setups, but I took this risk for security reasons.

hi @sokra . Thanks for fixing the security issue. It seems like the disable host check option is not available on CLI. Is it possible to get that added? I’m happy to make a PR if that’s an ok change.

also, in general I think these changes could use more documentation. I’m pretty confused and not totally sure I need the disable option, but I haven’t found a good alternative yet from the release notes or the issues that are filed because I need to hit my local dev server from a tablet. Also, I have custom hosts in my etc/hosts which my app uses to determine things. like foo-local.com vs bar-local.com, both of which are aliased to 127.0.0.1

Either way, I think it’d be good to expose the disable option in the CLI for people who are using it.

Aren’t we talking about leaving our window cracked on the 10th story of an apartment building?

Would’ve been nice to make the response something like “Invalid Host Header (Explanation and link to release notes)” for this version (and remove in the next major), rather than just breaking peoples builds suddenly without explanation.

@edmorley i also have another use case that seems to have been broken by this. Not sure if the current implementation has a solution for this.

For development, i have a few aliases to 127.0.0.1 in my etc/hosts file. like

127.0.0.1 foo-local.com bar-local.com

and my app uses the url format to determine certain things about how it behaves. I noticed i could no longer hit foo-local.com:PORT after this change though.

Is it possible to set disableHostCheck via command line? Do we have to modify the webpack config for this?

It seems that many people who develop multi-tenant systems will use disableHostCheck or other hacks, turning all this security patch to void.

Why is it all or none option? It was much more useful if it did accept a regex or at least a list of allowed hosts, to serve multiple test domains in a controlled way that doesn’t compromise security.

Thanks, I got it working, deleted and reinstalled node_modules - sorry about that.

For the record this is how I’m starting the dev server (I had tried this before cleaning node_modules): webpack-dev-server -d --host 0.0.0.0 --public 10.0.1.4:8080 --history-api-fallback Where 10.0.1.4 is my computer’s IP address.

I am developing an app using the Angular CLI which in turn uses Webpack dev server that is served through the Vagrant environment using Nginx.

Of course, I use an Nginx setup where I just forward (proxy_pass) the hostname request (e.g. app.myapp.com) to the the default ng serve IP and port (http://localhost:4200), and then request it from a browser with a desired hostname.

The only solution for me was to also pass that hostname (app.myapp.com) to the ng serve and also change it in the nginx config file because now they have to match everywhere (in browser, in nginx and in webpack dev server).

Here’s an example:

server {
    listen 80;
    listen [::]:80 ipv6only=on;

    server_name app.myapp.com;
    root "/home/vagrant/projects/jb/Laravel/ng-jb/out";
    index index.html index.htm;

    client_max_body_size 10G;

    location / {
        proxy_pass http://app.myapp.com:4200;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_buffering off;
    } 

}

And then just serve it from the Webpack or NG CLI with the added parameters:

Angular CLI: ng serve --host app.myapp.com

or

Webpack webpack-dev-server --host app.myapp.com --port 4200

On the other hand, I wouldn’t recommend hacking in the optionsSchema.json file of the lib and changing the disableHostCheck. But if an option wasn’t there, you can then just change the line 402 in Server.js to always/immediately return true.

I ran in to “Invalid Host header” as well today after upgrading to webpack-dev-server 2.4.3. My specific instance involved some shenanigans behind nginx reverse proxy to a another ssh tunneled reverse proxy (handles my vhosts for any dev projects with out the man telling me I can’t serve up specific ports)… so after spending a short time actually looking over my config/headers, I just rolled ack to 2.4.2 and it fixed it right up with no other changes.

Doubt that is any news/that helpful, but thought I’d chime in that it seems isolated to 2.4.3/went away when I downgraded. Oh, and I also using 0.0.0.0 specifically for my host settings.

It took me a lot of combinations to figure this one out. So if you want to develop locally and test with a remote computer/cell phone, this seems to do the trick:

webpack-dev-server --host 0.0.0.0 --disable-host-check

confusing problem:

    host: 'my-local-ip',
    disableHostCheck: true,

it worked

    useLocalIp: true,
    disableHostCheck: true,

it doesn’t work, still ERR_CONNECTION_REFUSED

We actively welcome contributions from everyone. If you feel there’s something that can be made easier, please do considering forking and contributing.

It was much more useful if it did accept a regex or at least a list of allowed hosts

That’s what #899 implements.

127.0.0.1 foo-local.com bar-local.com

@bdwain That’s no problem, you just have to pass the public name of the dev-server via --public bar-local.com:8080.

For some reason this worked for me…

webpack-dev-server --host=0.0.0.0 --disable-host-check --useLocalIp

considering most people are not using the “dev-server” as a production environment therefore minimizing the need to block requests for security concerns.

RCE and information disclosure still affects local development too, so that statement isn’t accurate. See #887 for more info.

@sokra I have a common use case that I’m not sure how to implement safely with this breaking change. I use webpack-dev-server on my local wifi network with --host 0.0.0.0 so I can test on mobile and other devices. For example, my computer’s local ip address is 10.0.1.4 and my phone’s ip address is 10.0.1.5.

Previously I started the dev server like this (and on my phone would go to 10.0.1.4:8080): webpack-dev-server -d --inline --host 0.0.0.0 --history-api-fallback

How do I start the dev server now so I can access it from my phone? I tried adding various options with --public ... but couldn’t get it to work. Thanks.

So what do you do if you’re using webpack-dev-server from node script instead of CLI? --public is only available on CLI from what I gather?

EDIT: public is available from node as well. Example:

const server = new WebpackDevServer(compiler, {
	public: '<you public ip>'
});

I should have pulled my head out of my ass and read the v2.4.3 release. Right on, appreciate the attention to the potential vulnerability, and I dig the disableHostCheck ability being put right in even more. Thanks =)

solution for me: open node_modules/webpack-dev-server/lib server.js edit line 451 change false to true edit line 473 change false to true

I think this allows “public host name” of listening address and the allowedHost === hostname It appears that server must accept that public hostname and allowedHost are exactly ===

I am using ubuntu, angular/cli latest

So I can set up an nginx server that forwards all requests to my webpackDevServer? How would this fix the security issue?

Assuming

• the nginx server validates the Host header
• the server is only used for the webpack-dev-server and nginx server (not using the browser)
• the webpack-dev-server port is not accessible from local network.

What if we don’t use webpack-dev-server in production?

That’s good. webpack-dev-server should not be used in production. But you are still affected!

Does it make sense to have this option enabled on local servers?

yes.

I’m trying to understand the problem this patch fixes.

check the details here: https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a

I’m trying to understand the problem this patch fixes. Does it make sense to have this option enabled on local servers? What if we don’t use webpack-dev-server in production?

Semver concerns aside, there is an error in the implementation that is addressed by #888

@hooraygith I added it and released a new version. Try to update.