私と私の猫の他は誰でも隠し事を持っている

野良プログラマ発、日々のアウトプット

Chrome 拡張機能 ModHeader で HTTP ヘッダを自在に書き換える

ウェブ開発も最近は Node.js 一辺倒になってしまった在宅野良ブログラマ Mariyudu です。プログラム内で URL のオリジンを参照してごにょごにょしたりすることがたまにあるんですが、curl -H "Host: my-web-develop.net" http://localhost:3000/ 的なことを Chrome にさせたいと思ったら意外に情報が無かったので、今回使ってみた ModHeader の話を。

ModHeader は HTTP ヘッダの内容を操作する Chrome 拡張機能です。つまり、上記ユースケースのように http://localhost:3000/ へのリクエストの際に任意の値をセットした Host ヘッダを付与できるということです。以下、今回行った手順です。

  1. Chrome ウェブストアから ModHeader をインストール。
  2. デフォルトだと他のウィンドウ・タブでも Host ヘッダが書き換えられてしまい嬉しくないので、設定から「サイトへのアクセス」を「クリックされた場合のみ」にしておく。>
    f:id:mariyudu:20210409154149p:plain
    ModHeader 設定
  3. URL バーの ModHeader アイコンをクリックして、本ユースケース用のプロファイルを作成。といっても下図のようにプロファイル名とリクエストヘッダの Host をセットしておくだけ。>
    f:id:mariyudu:20210409160632p:plain
    プロファイル作成
  4. 開発中のウェブプログラムを起動しておいて、Chrome にて新しいウィンドウ(またはタブ)を開いて、URL に http://localhost:3000/ を入力してアクセスします。この時点では未だ Host ヘッダ設定は効いていません。
  5. そのウィンドウで、URL バーの ModHeader アイコンをクリックするとページをリロードしちゃいなよユー、って言っているので言う通りにすると、設定した Host ヘッダが適用されるようになります。それ以降はそのウィンドウからのアクセスでは、Host ヘッダ書き換えが適用され続けます。>
    f:id:mariyudu:20210409154334p:plain
    プロファイルを適用させる

便利です。これで Vue.js や Express でのローカル開発はもちろん、リモートホスト開発での hosts を書き換えてテストしてたような案件もラクラクだにゃー。