loading...
Cover image for Protect your dev server

Protect your dev server

igoradamenko profile image Igor Adamenko ・3 min read

These days remote life is de-facto standard for the developers around the world. Some of them work from home, another work from cafés and coworkings. There's free WiFi in every nook and corner of modern cities. And that's the reason why you should be more careful about running the dev server while being connected to untrusted network.

Problem

Most of the time when we start a new project we choose webpack & webpack-dev-server. The config for webpack looks like this:

module.exports = {
  mode: 'development',
  entry: {
    app: './src/app.js',
  },
  output: {
    path: './public',
    publicPath: '/',
  },
  devtool: 'eval',
  devServer: {
    port: 8080,
    contentBase: './public',
    historyApiFallback: true,
  },
};

Then the development goes, and some day we decide to check the result on the different device. E.g. smartphone or tablet. To do this we may use simulation mode in our browser, but it is not handy and precise enough. So we decide to connect to the dev server over WiFi.

Here where the obscure things come.

If you google for “get access to webpack dev server over wifi” you will find “the solution” — 0.0.0.0 as host setting. You change it and — voilà! — it works:

module.exports = {
  // ...
  devServer: {
    host: '0.0.0.0', // <-- 
    port: 8080,
    contentBase: './public',
    historyApiFallback: true,
  },
};

Usually after that we decide to leave the option set, because it makes the things easier. There are a lot of code like this on GitHub. Everybody does it.

What we may miss here, is the fact that our server is available to everyone in the same network. When you start it in McDonalds or Starbucks next time, it will be visible for everyone there. Hotels, airports, coworkings, cafés, even subway may be the place where somebody will be able to peek at your work.

Sometimes things go even worse and a developer may have public IP and port forwarding on their router, which makes the server visible over the whole Internet!

You may think that it's not a big deal, because there will be compiled code, but wait... dev servers serve source maps too! It means that your own or your company project may be stolen in a sec and you won't even notice it.

(By the way, if you've set up proxy to your backend using webpack-dev-server, such server's publicity might lead to much worse data leak.)

Solution

Of course there's a solution — prohibit developers to bind servers on 0.0.0.0. But how to be sure that none of them will do it? And what about new developers who don't know all the policies and rules and just want to get the work done?

In FunBox we found out this problem a year ago. We have a distributed frontend team and we start new project every week or two. So we wanted to be sure that everything is all right and no one can accidentally stumble and make a fatal mistake.

To solve the problem we've created a small firewall for webpack-dev-server! It intercepts all the incoming requests, checks their hosts' IPs against the list of allowed ones, and passes them through or denies.

It's pretty simple but strong solution. Yeah, it won't save you from directional hacking, but surely prevent any script kiddies' attempts.

Usage

Here's how it works.

First, you need to install the package:

npm install --save-dev @funboxteam/webpack-dev-server-firewall

Then add it into your webpack configuration as before hook in devServer object:

const firewall = require('@funboxteam/webpack-dev-server-firewall');

module.exports = {
  // ...
  devServer: {
    before: firewall, // <-- 
    host: '0.0.0.0',
    port: 8080,
    contentBase: './public',
    historyApiFallback: true,
  },
};

And start the server. From now the firewall will check every connection that comes from IPs other than 127.0.0.1. When such requests appear, you will see the notification:

192.168.1.46 is trying to get access to the server. Allow? [yes / no]: 

If you approve the connection, IP will be added into the list of known hosts, and all the next connections will be allowed automatically. But if you deny, the connection will be closed with 403 HTTP status code.

Simple yet effective. Now you control all the connections to your server and may be sure that nobody will steal your work or sensitive data.

Feel free to use it in your next and current projects, and let us know if you find it useful!

There are more details about implementation and design in the repo:

GitHub logo funbox / webpack-dev-server-firewall

Prevents access to dev server from unknown IPs

Posted on by:

Discussion

markdown guide
 

Interesting. although personally I believe you should block all traffic to your machine if you are on a *public and unsecured network. Whilst this is good as a "I have no other choice" I would advocate that my team members simply didn't open up their system to other devices on an unsecure network as the risk is far greater than simply stealing some JS!

A slightly more overkill (and obviously not free) solution if you plan on working remote and on unsecure networks would be to have one of those pocket sized USB powered routers to operate your own small network, or make use of your own VPN.

Just my 2c