devサーバを保護する

最近のリモートの生活は、世界中の開発者のための事実上の標準です.彼らのうちのいくつかは家から働きます、もう一つの仕事はcafのsと協力から働きます.すべての隅と近代都市の隅に無料の無線LANがあります.そして、それはあなたが信頼できないネットワークに接続している間、devサーバを走らせることについてより慎重でなければならない理由です.

問題

私たちが新しいプロジェクトを始める時の大部分はWebpack & Webpack dev serverを選びます.webpackの設定は次のようになります.

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

それから、開発は行きます、そして、ある日、我々は異なる装置で結果をチェックすることに決めます.スマートフォンやタブレットなど.これを行うには我々のブラウザでシミュレーションモードを使用することがありますが、それは十分ではないと正確な正確です.それで、我々はWiFi経由でdevサーバーに接続することにします.
ここで不明瞭なことが来る.
“get access to webpack dev server over wifi”の場合は、“ソリューション”を見つける0.0.0.0設定としてhost.あなたはそれを変更してください- Vil il -!動作します.

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

通常、私たちはオプションを設定することを決定します.このようなコードは多い.誰でもそれをする.
我々がここで見逃すかもしれないことは、我々のサーバーが同じネットワークの皆に利用可能であるという事実です.ときにマクドナルドやスターバックス次の時間でそれを起動すると、そこに誰のために表示されます.ホテル、空港、coworkings、cafのs、地下鉄さえ、誰かがあなたの仕事を覗くことができる場所であるかもしれません.
時々、事態はさらに悪くなります、そして、開発者は彼らのルータで公共のIPとポート推進を持っているかもしれません.そして、それはサーバーを全体のインターネットの上に見えさせます!
コンパイルされたコードがあるのですが、待ちます.devのサーバーにもソースマップを提供!それは、あなた自身またはあなたの会社プロジェクトがSECで盗まれるかもしれないということを意味します、そして、あなたはそれさえ気づかないでしょう.
(つまり、WebPack devサーバを使用してバックエンドにプロキシを設定した場合、そのようなサーバの宣伝は、より多くのデータリークを引き起こす可能性があります).

ギタブについて 解決策

もちろん、解決策があります.開発者が0.0.0.0にサーバーをバインドするのを禁止します.しかし、どのようにそれらのどれもそれを行うことを確認するには?そして、どのようなすべてのポリシーやルールを知っていないだけで作業を行うには、新しい開発者についてはどうですか?
年に我々は1年前にこの問題を発見した.分散フロントエンドチームがあり、毎週新しいプロジェクトをスタートします.それで、我々はすべてが正しくて、誰も偶然につまずくことができて、致命的な間違いをすることができないことを確信したかったです.
問題を解決するために、我々はWebPack devサーバのためにFunBoxをつくりました!これは、すべての着信リクエストを傍受し、許可されたもののリストに対して自分のホストのIPアドレスをチェックし、それらを通過または拒否する.
それはかなり簡単ですが、強力なソリューションです.はい、それは方向ハッキングからあなたを救うことはありませんが、確実に任意のスクリプトKiddiesの試みを防ぐ.

小さなファイアウォール 用途

ここでどのように動作します.
まず、パッケージをインストールする必要があります.

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

次に、それをbeforeオブジェクトのdevServerフックとしてあなたのwebpack設定に追加します.

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

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

でサーバを起動します.今から、ファイアウォールは127.0.0.1以外のIPSから来るすべての接続をチェックします.このような要求が出ると、通知が表示されます.

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

接続を承認するなら、IPは既知のホストのリストに加えられます、そして、すべての次の接続は自動的に許されます.しかし、あなたが否定するならば、接続は403 HTTPステータスコードで閉じられます.
シンプルで効果的.今すぐあなたのサーバーにすべての接続を制御し、誰もあなたの仕事や機密データを盗むことを確認することがあります.
お気軽にあなたの次の、現在のプロジェクトでは、それを使用して、私たちはあなたが役に立つことをお知らせください!
REPOの実装とデザインについての詳細は以下の通りです.

/ ファンクボックス

未知のIPからのdevサーバへのアクセスを防ぐ