Subdomains not working in 1.0.0

[anomaly44]

Description

Since 1.0.0 we cannot visit subdomains on the dev server anymore. This is usfeful for devs who use subdomains to serve different data based on subdomains with CRA.

Expected behavior

Visiting the app on http://test.localhost:3000/ should display the app the same as the usual: http://localhost:3000/

Actual behavior

Instead of the app we get: Invalid Host header

Reproducible Demo

create a new react app and visit any subdomain.

Extra

• Would it be possible to add an option to the package json to use
  disableHostCheck: true
  in the webpackDevServer.config ?
• is it possible to add an option to open the browser on a subdomain?

[gaearon]

I am concerned about adding disableHostCheck: true, this kinda goes back against the point of fixing that security issue. I wonder if WebpackDevServer supports (or could support) a wildcard for this.

cc @SpaceK33z, we’ll probably need someone from Webpack side to help us understand implications of this.

[anomaly44]

Thanks for the fast reply.
I have a limited understanding of the security issue. But I guess the problem is other websites accessing your dev server and stealing your assets? Since I find it weird that a dev server might pose some security risks, since it should not be used in production anyway, that is the only issue I can think of.

An option to add wildcards to the development environment would be a decent solution for most people using subdomains I guess. As long as everything can stay dynamic in production, since it would not be an option to add a new wildcard every time a user creates or changes a new subdomain entity.

[gaearon]

Since I find it weird that a dev server might pose some security risks, since it should not be used in production anyway, that is the only issue I can think of.

It's more of a security risk if you use the proxy feature since you could potentially proxy to a process like Werkzeug that lets you run arbitrary code in its debugger.

[anomaly44]

I see, thanks for clarifying.

[Timer]

We will need webpack/webpack-dev-server#899 to make this happen. 😄

A separate PR just to add .localhost support (or making this the default behavior) might also be warranted.

[gaearon]

Seems like this is blocked on WDS then. I don't want to relax the check completely.

[mbaumbach]

I'm sure there's a few ways to hit this, but one way we hit this was trying to expose our local server via ngrok. So it may be useful to find a way to resolve this for non .localhost domains too.

[ArnaudD]

Here is a quick and dirty workaround if you need to run your dev app on domains other than localhost :

1. Install concurrently and http-proxy

   yarn add concurrently http-proxy || npm install --save-dev concurrently http-proxy
   

2. Add proxy-server.js

   var http = require('http');
   var httpProxy = require('http-proxy');
   
   httpProxy.createServer({
     changeOrigin: true,
     hostRewrite: true,
     autoRewrite: true,
     ws: true,
     target: 'http://localhost:3000'
   }).listen(process.env.PORT || 8080);

3. Replace the start script in your package.json by this

   {
     // ...
     "scripts": {
       "start": "concurrently \"node proxy-server.js\" \"PORT=3000 react-scripts start\"",
       // ...

[gaearon]

Hmm. I wonder if the proxy feature would just work for this?

[mbaumbach]

Our setup is using the built-in proxy feature (in the package.json) for an external API server and ngrok to expose the site outside of localhost and we hit the invalid host header. I tried without proxy to make sure that wasn't the culprit.

I may have to try out @ArnaudD suggestion, though we aren't hurting to upgrade react-scripts, I'm just an early adopter by nature. :)

[gaearon]

I have a proposed solution here: #2288.
What do you think?