@funboxteam/webpack-dev-server-firewall
v3.0.0
Published
Firewall for webpack-dev-server
Downloads
647
Readme
@funboxteam/webpack-dev-server-firewall
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
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.
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.
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.
To avoid confusion the package expects a clear
yes
as request confirmation.Short answer such as
y
is not allowed. Any other answer exceptyes
meansno
.
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,
},
};