Webpackの "Invalid Host Header "を解決する。

https://tonghuashuo.github.io/blog/webpack-dev-server-invalid-host-header.html

Webpack を使ってコードをパッケージングしていますが、webpack-devserver を Hot Module Replacement として使うことで、無関係なトリビアに気を取られることなく、プログラムのロジックに集中することができて、とても気分がいいです。しかし、ついさっきまで......。

突然の質問

同僚と技術的な問題について話し合っていて、リンクを送るためのデモを書いたのですが、同僚は、"Invalid Host Header"を報告して開かなかったと言いましたが、私のローカルマシンは問題なく動いていました。他のデバイスも試してみましたが、こちらも開けなかったので、問題は本当に存在するのだと思います。このマシンでは動作しているので、問題はコードにあるのではなく、ネットワークにあるはずです。 ifconfig  IPアドレスを確認したら正しいし、リンクアドレスも再確認したらスペルミスではないので、どこかに設定の問題があるようです。

StackOverflowにディスカッションがないので、Githubでissueを探したのですが、ないようなので、何が問題なのかわかりません。

<ブロッククオート 2017-06-03: angular-cliを使っていたらまたこの問題にぶつかり、この頃にはすでに関連する問題が出ていたのですが、先に最初にぶつかったのでしばらくは出ていませんでした。

閃き

ふと、2日前に更新された npm パッケージの中に webpack と webpack-dev-server があったのですが、メインのバージョン番号が変わっていなかったので、理論的には Breaking Change がある可能性は低いので、試してみるつもりで Releases を見てみたら、嬉しい誤算がありました。

webpack-dev-server は2週間ほど前に 2.4.3 と 1.16.4 にアップデートされており、通常の BugFix や Features に加えて、特定の Security Fix があり、これは Breaking Change である可能性が高いと判断したが、アーキテクチャや大きな機能など、影響があるものではなかったため セキュリティパッチとしてパッチ版を更新した。

今回の更新では、不正なアクセスをブロックするために、ホストヘッダ（現在私が体験しているもの）の正しさのテストを追加することに重点を置いています。開発者は webpack-dev-server コマンドを実行する際に、これを手動で追加する必要があります。  --公開  オプションで webpack-dev-server コマンドを実行する際に、値を認可されたホストにしてください。そうしないと、レスポンスが問題を示し、 "Invalid Host Header" と表示されることになります。

解決方法

2つの公式な解決策を提供します。

• webpack-dev-server コマンド実行時に手動で追加する。  --公開  オプションで認可されたホストを指定します。これは、セキュリティ上の理由から公式に推奨されている方法です。
• webpack-dev-serverの設定項目を設定します。  disableHostCheck  を true に設定すると、この検出を無効にします。開発者がプロキシを使用していたり、開発環境においてセキュリティの問題を気にしていない場合、この検出を利用して直接セキュリティの問題を根絶することができます。

例外

もちろん、もしかしたらこの問題に遭遇していないかもしれません(待てよ、もしこの問題に遭遇していないのなら、どういう理由でこの記事をここで見たのでしょうか？) なぜなら、パッチの影響を受けない公式の例外シナリオが、考え抜かれて設定されているからです。

• localhost または 127.0.0.1 のホストはブロックされません。
• webpack-dev-server または webpack-dev-middleware を使用しているときのみ確認されます。webpack とパッケージ化されたコードはこの影響を受けません。

エクストラ

また、今回影響を受けるのは、angular-cli などの webpack-dev-server ベースのモジュールで、これらのモジュールでは  ngサーブ  コマンドは webpack-dev-server の実装に基づいており、1.0.1 へのアップグレード後に関与していました。この問題はバージョン 1.0.0-beta.1 で公式に修正され、webpack-dev-server コマンドが追加されました。 -disable-host-check（ホストチェックの無効化 というオプションがあり、アップデート後に利用できるようになります。何らかの理由でアップデートに抵抗がある場合は、一時的な解決策として、プロセスを逆にして1.0.0にダウングレードすることもできます。

該当する問題点は以下の通りです。

• 問題の議論。1.0.1へのアップデート後に無効なHostヘッダが表示される
• 解決策： feat(@angular/cli): NGサーブにホストチェックフラグを追加する

最後に書く

今号を終えて、いくつかの小さなポイントがまとまりましたので、ご紹介します。

• スタートアップはまだ新しい技術に対して受容的であり、それは良いことでもあり悪いことでもある。
• • 利点：より多くの最先端技術にアクセスできることは、個人のエンパワーメントにとって素晴らしいことである。
  • 悪い点：ポットホールが多く、過去の経験がなくまだ新しいものが多く、関連情報が少ない。
• ドキュメンテーションは重要です。問題がなければChange Logが頼りになる。
• Dodo、Google、SOで解決できない場合は、Githubを試してみると、不思議とうまくいくかもしれません。
コミュニティの力は本当にtm強力です。