npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@funboxteam/webpack-dev-server-firewall

v3.0.0

Published

Firewall for webpack-dev-server

Downloads

727

Readme

@funboxteam/webpack-dev-server-firewall

npm

The package prevents uncontrollable access to dev server by asking manual approve from the developer when someone connects to the server from unknown IP.

По-русски

Rationale

When frontend developers run webpack-dev-server on localhost they sometimes want to check the result on the different devices (e.g. smartphones, tablets). By default it's hard to do, because the server is bound on 127.0.0.1 and isn't allowed to receive connections from other computers.

So, most of the time developers rebind server to 0.0.0.0 (by setting host option in webpack config) to make it available over the local network. But at the same time it grants anyone from the same network a permission to connect to the server, see the project and steal the code. Usually dev servers also serve source maps, which makes the source code fully visible too.

Such dev server setup may harm even pet-projects if there are any sensitive credentials in the source code.

This firewall prevents unwanted connection to the server. It intercepts all the incoming requests, checks their hosts' IPs against the list of allowed ones, and passes them through or denies.

Installation

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

Usage

To use the package add it into your project's webpack config in devServer.setupMiddlewares:

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

or

import { firewall } from '@funboxteam/webpack-dev-server-firewall';

module.exports = {
  // ...
  devServer: {
    // ...
    setupMiddlewares: (middlewares, devServer) => {
      firewall(devServer);
      // ...
      return middlewares;
    },
  },
};

For older webpack-dev-server versions use:

  • devServer.onBeforeSetupMiddleware for <4.7.0;
  • devServer.before for <4.0.0;
  • devServer.setup for <2.9.0.

firewall function expects an Express application as an argument.

It's important to run firewall before others hooks.

How it works

By default the package allows requests from 127.0.0.1 only. When the request from other IP appears the package asks for developer's approve in the terminal where webpack-dev-server is running:

Child serviceworker-plugin:
     1 asset
    Entrypoint undefined = sw.js
    [./src/app/sw.js] 2.82 KiB {0} [built]
ℹ 「wdm」: Compiled with warnings.
# ↑ webpack log
192.168.1.46 is trying to get access to the server. Allow? [yes / no]:

If the developer approves the connection, IP is added into the list of known hosts, and all the next connections will be allowed automatically.

192.168.1.46 has been added to known hosts.

If the developer denies the connection, the client using that IP will get response with 403 HTTP code.

Important details

  1. The package does not work as a filter of unwanted connections.

    If the developer denies the connection once, it doesn't mean that it will be ignored in the future. In case of reconnection from the suspicious IP, the package will ask for developer's approval again.

    It works this way to be sure that the developer will be notified about all the suspicious incoming connections.

  2. The package does not guarantee complete protection against intruders.

    The package doesn't check in any ways that the client IP belongs to the same computer that it did when the IP was allowed. It means that when the DHCP settings are changed (or much easier: when the developer connects to the different network) the rules of addresses distribution will be changed too, and the earlier allowed address may be allocated to the new computer, which may be used by the intruder.

    To improve the security level clear the list of allowed IPs every time you run the server. Check out “Additional” section for details.

  3. List of known IP addresses is stored in ~/.funbox_webpack_known_hosts.

    If you want to remove any IP from the known hosts, you can make it manually.

    Among other things, this means that the list of allowed IPs is the same for all projects running on the machine.

  4. To avoid confusion the package expects a clear yes as request confirmation.

    Short answer such as y is not allowed. Any other answer except yes means no.

Additional

CLI

The package has small CLI which allows to clear the list of allowed IPs:

webpack-dev-server-firewall forget-known-hosts

It's important to note that when the firewall starts the list of allowed IPs is loaded from the file and stored in RAM. So, one should use the described above CLI command when the server is stopped. Otherwise the file may be overwritten by the firewall instance.

Methods

Besides the onBeforeSetupMiddleware hook the packages exports forgetKnownHosts method that can be used for clearing the list of allowed IPs from JS script.

E.g. the code below clears the list on every server start:

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

firewall.forgetKnownHosts();

module.exports = {
  // ...
  devServer: {
    // ...
    onBeforeSetupMiddleware: firewall,
  },
};

Resources

Sponsored by FunBox