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 🙏

© 2026 – Pkg Stats / Ryan Hefner

@necrobox/webpack-dev-server-firewall

v4.0.0

Published

Firewall for webpack-dev-server

Readme

@necrobox/webpack-dev-server-firewall

npm

Пакет предотвращает неконтролируемый доступ к серверу разработки, запрашивая подтверждение при подключении с незнакомого IP.

Установка

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

Использование

Для того чтобы пакет начал работать, необходимо подключить его в конфиге Вебпака, в разделе devServer.setupMiddlewares:

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

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

С более старыми версиями webpack-dev-server нужно использовать:

  • devServer.onBeforeSetupMiddleware для <4.7.0;
  • devServer.before для <4.0.0;
  • devServer.setup для <2.9.0.

Функция firewall ожидает Express application в качестве аргумента.

Важно подключать firewall до всех остальных обработчиков.

Механизм работы

По умолчанию пакет пропускает только запросы с 127.0.0.1. Если возникает запрос с иного IP, обработчик запрашивает подтверждение в терминале, где запущен webpack-dev-server:

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

Если пользователь соглашается на подключение, IP добавляется в список разрешённых, и все последующие подключения с него будут разрешены:

192.168.1.46 has been added to known hosts.

Если пользователь запрещает подключение, клиент, с которого пришёл запрос, получает ответ с кодом 403.

Важные детали

  1. Пакет не работает как фильтр нежелательных соединений.

    Если пользователь запретил соединение однажды, это не значит, что оно будет игнорироваться и дальше. При повторном подключении с этого IP пакет снова выдаст предупреждение и запросит подтверждение.

    Это сделано затем, чтобы разработчик был в курсе всех подозрительных попыток доступа к серверу.

  2. Пакет не гарантирует полную защиту от злоумышленников.

    Поскольку он никак не проверяет, что IP, с которого приходит новый запрос, принадлежит той же машине, с которой когда-то пришёл подтверждённый запрос, из этого следует, что при изменении настроек DHCP (или легче: при подключении к другой сети) правила, по которым выдавались IP-адреса в локальной сети могут измениться, из-за чего ранее подтвеждённый адрес может достаться новой машине, с которой и будут совершены запросы злоумышленником.

    Для пущей безопасности можно очищать список разрешённых IP при каждом запуске сервера. См. раздел «Дополнительные функции».

  3. Список разрешённых адресов хранится в ~/.necrobox_webpack_known_hosts.

    Если необходимо удалить оттуда какой-то конкретный адрес, можно сделать это вручную.

    Помимо прочего это означает, что список разрешённых IP один на все проекты, запускаемые на конкретной машине.

  4. Во избежание ошибок пакет ожидает в качестве подтверждения чёткий ответ yes.

    Короткий ответ вроде y недопустим. Любой ответ кроме yes приравнивается к no.

Дополнительные функции

CLI

У пакета есть небольшой консольный интерфейс, который позволяет очистить список разрешённых IP:

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

Важно заметить, что при запуске сервера список разрешённых IP выгружается из файла и хранится в оперативной памяти. Потому выполнять эту команду нужно после остановки сервера, так как иначе файл может быть перезаписан инстансом фаерволла.

Методы

Помимо onBeforeSetupMiddleware-хука пакет также экспортирует метод forgetKnownHosts для вызова функции очистки списка разрешённых IP из JS-скрипта.

Например, при таком описании конфига для Вебпака список IP будет очищаться при каждом запуске сервера:

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

firewall.forgetKnownHosts();

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

Мотивация

Когда разработчики запускают webpack-dev-server на локальной машине, им порой нужно проверить результат работы с каких-то ещё устройств (например, со смартфонов или планшетов). По умолчанию это сложно сделать, потому что сервер поднят на 127.0.0.1 и недоступен для соединения с других компьютеров.

Чаще всего для решения этой проблемы разработчики переподнимают сервер на 0.0.0.0 (устанавливая опцию host в конфиге Вебпака), тем самым делая доступным сервер в локальной сети для других устройств. Но в то же время это позволяет любому пользователю из той же сети получить доступ к серверу, увидеть проект и украсть код. А поскольку чаще всего дев-сервера раздают ещё и соурс-мапы, то кто угодно может увидеть весь исходный код.

Подобная настройка сервера может сыграть злую шутку даже с пет-проектами, если в их коде есть какие-то конфиденциальные данные.

Этот фаерволл предотвращает несогласованный доступ к серверу. Он перехватывает все входящие соединения, сверяет их IP со списком разрешённых и пропускает или отклоняет запросы, в зависимости от результата проверки.