"Invalid Host/Origin Header" warning

[ravshansbox]

PLEASE READ

We are working on this problem. It is regression problem after fixing security error. Security issues are always high priority and we would not want to revert it, but it is require some changes in sockjs/sockjs-node#247, we have workaround for this problem #1608, but need some feedback. Feel free to feedback.

Fast workaround (put it in your devServer property in config):

disableHostCheck: true

We apologize for the situation. Thanks for helping us do webpack better. ⭐ ⭐ ⭐

---

• Operating System: macos 10.14.2
• Node Version: 11.5.0
• NPM Version: 6.4.1
• webpack Version: 4.28.1
• webpack-dev-server Version: 3.1.11

• This is a bug

Code

  // webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: [
    './src/main.css',
    './src/main.js'
  ],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/main.html'
    }),
    new MiniCssExtractPlugin({
      filename: 'index.css'
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  },
  stats: {
    children: false,
    modules: false
  },
  devServer: {
    proxy: {
      '/api': 'http://localhost:3000'
    },
    stats: {
      children: false,
      modules: false
    }
  }
};

Expected Behavior

No warnings

Actual Behavior

Getting "Invalid Host/Origin Header" warning in browser console

For Bugs; How can we reproduce the behavior?

install webpack-dev-server@3.1.11 and run (v3.1.10 working as expected).

[alexander-akait]

@ravshansbox it is security fix, looks you origin than you use in config, you can use disableHostCheck: true in you case, anyway can you create minimum reproducible test repo?

[ravshansbox]

@evilebottnawi yes, sure, here you are: https://github.com/ravshansbox/webpack-dev-server-sample

[ravshansbox]

with disableHostCheck: true there is no warning.

[alexander-akait]

@ravshansbox thanks, i will look in near future, but if original is not same it is normal have this error

[pkk82]

I have the same issue. Problem here is that browser does not send origin header at all. Here my debug of connection object

SockJSConnection { _session: Session { session_id: undefined, heartbeat_delay: 25000, disconnect_delay: 5000, prefix: '/sockjs-node', send_buffer: [], is_closing: false, readyState: 1, timeout_cb: [Function], to_tref: Timeout { _called: false, _idleTimeout: 25000, _idlePrev: [Object], _idleNext: [Object], _idleStart: 1740, _onTimeout: [Function], _timerArgs: undefined, _repeat: null, _destroyed: false, [Symbol(asyncId)]: 6686, [Symbol(triggerAsyncId)]: 6679 }, connection: [Circular], emit_open: null, recv: WebSocketReceiver { ws: [Object], connection: [Object], heartbeat_cb: [Function], thingy: [Object], thingy_end_cb: [Function], session: [Circular] } }, id: 'da07ccdf-4d74-4fed-a48b-6d76247e97af', headers: { host: 'localhost:8080', 'user-agent': 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36', 'accept-language': 'pl,en;q=0.9,en-US;q=0.8,fr;q=0.7' }, prefix: '/sockjs-node', remoteAddress: '127.0.0.1', remotePort: 37412, address: { address: '127.0.0.1', family: 'IPv4', port: 8080 }, url: '/sockjs-node/599/ngnhxajl/websocket', pathname: '/sockjs-node/599/ngnhxajl/websocket', protocol: 'websocket' }
`

[bwigs]

I am seeing this issue as well with 3.1.11. Rolling back to 3.1.10 fixes it.

[rpang77]

Also, got this issue after upgrading to 3.1.11

[lambcode]

I also am getting this error in Firefox 64.0 with version 3.1.11. Reverting to 3.1.10 fixes it.

[Akiyamka]

I confirm, the same problem.
Manjaro linux (4.19.8-2-MANJARO)
Firefox DE 65.0b2
Node LTS (10.14.2)

[juank11memphis]

Same problem here

[alexander-akait]

Please read #1604 (comment)

[alexander-akait]

Please try https://github.com/webpack/webpack-dev-server/releases/tag/v3.1.12

[ravshansbox]

I can confirm that the issue still exists.

[davidpelayo]

I can also confirm that the issue still exists

[alexander-akait]

Please don't spam Same problem here or issue still exists, better create minimum reproducible test repo, it is allow to fix all edge cases, thanks!

[3846masa]

I checked request sent to dev-server via Chrome in localhost, request doesn't have Origin header.

{ host: 'localhost:8080',
  'user-agent':
   'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36',
  'accept-language': 'ja-JP,ja;q=0.9,en-US;q=0.8,en;q=0.7' }

checkHeader will return false when value is empty, so this issue still exists, I think.

webpack-dev-server/lib/Server.js

Lines 644 to 646 in e614308

	if (!hostHeader) {
	return false;
	}

[3846masa]

Sockjs will remove Origin header.
Ref. sockjs/sockjs-node#247

[3846masa]

In my opinion, it is better to revert #1603 until sockjs/sockjs-node#247 is merged.

[alexander-akait]

@3846masa let's wait some time and revert it, maybe we can implement workaround on our side, need investigate, feel free to do it, thanks

[neverblued]

Even with disableHostCheck now after updating I can not get rid of these errors.

[gander]

Are there any chances to solve this problem soon?

[simeyla]

If you're using @angular-builders/custom-webpack try this:

// custom-webpack.config.js
module.exports = {

  devServer: {
    disableHostCheck: true
  },

   plugins: []
};

[variable]

I am running 3.11.0 webpack-dev-server and still having this problem after specifying disableHostCheck: true

[Logopher]

I see this message consistently when I run my project via Fiddler at localhost.fiddler:4200 and not when I use localhost:4200.

[testacode]

This is happening now on webpack 5 and disableHostCheck is not part of the api anymore. Any thoughts?

[kevinmu17]

Using webpack-dev-server 4.0.0 disableHostCheck: true is not available anymore.

headers: {
        'Access-Control-Allow-Origin': '*'
},

This is also not working

[snitin315]

@kevinmu17 the disableHostCheck: true option was removed in favor of allowedHosts: "all", for more information please refer to our migration guide - https://github.com/webpack/webpack-dev-server/blob/master/migration-v4.md

[kevinmu17]

@kevinmu17 the disableHostCheck: true option was removed in favor of allowedHosts: "all", for more information please refer to our migration guide - https://github.com/webpack/webpack-dev-server/blob/master/migration-v4.md

This link should be available on https://webpack.js.org/configuration/dev-server/ This was a live saver, I was banging my head, the information is very well explained and it took me a few hours to migrate. Thank you very much for pointing this out!