LoginSignup
4
4

More than 5 years have passed since last update.

[Node.js]ちょっとしたフロントエンドの実験でhttpsが突如必要になった時に超絶簡単にデバッグ環境を用意できるパッケージを作った

Last updated at Posted at 2016-10-03

動機

最近、フロントエンドで一部のAPIがhttpsである状態じゃないとアクセスできなかったりする。
MediaStreamなどを使う場合などだ。少しWebRTCの実験したいだけなのに、自己署名証明書作成したり、それを既存のサーバーの設定に組み込んだりすごくめんどくさい。

理想的には、既に普段のデバッグ用のhttpサーバーが立っているので、全てのhttpsリクエストをそこに投げて、そのまま返してくれればいいはずだ。(つまり、ただのプロキシ)

作った

すごく簡単なhttpsのリクエストを既存の別のポートで開いているhttpサーバーに投げるだけのnpmパッケージを作った。
面倒な自己署名証明書の作成もいらない、自動的にインストール時に作成される。

注) インストール前にopensslがお使いの環境にインストールされているか確認してください
(Macだと出荷時に含まれている。。?)

$ npm install hss -g

これでインストールは完了。使う準備はできました。

もし、80番ポートにhttpサーバーが開いていて、https://localhost:9000でアクセスしたいとすると、以下のようなコマンドで実行すると可能。

$ hss -p 9000 -t 80

受け取るパラメーターはたったの二つ。

  • port(エイリアスp)・・・httpsサーバーがどこのポートを監視するか。
  • targetPort(エイリアスt)・・・httpサーバーがどこに開かれているか。

信頼

もちろん、勝手に証明書作っているので実際にはこの証明書を信頼しないと、正当なhttpsとして動作しない。
その際は、hssのフォルダ内のkeysフォルダにserver_crt.pemが含まれているのでこれをキーチェーンアクセスに登録する。(Windowsは頑張ってください)

$ where hss

と実行すれば、おそらくhssのフォルダがわかるはず。

/Users/XXX/.nvm/versions/node/v.YYY/bin/hss

のようなファイルパスで表示されるので、必要な証明書の位置は

/Users/XXX/.nvm/versions/node/v.YYY/lib/node_modules/hss/keys/server_crt.pem

になります。

僕の環境はnvmで行なっているのでファイルパスが上記の通りですが、類似の方法で、大体の場所はわかるはずです。

これをKeychain accessに登録すれば、ブラウザからこの証明書が信頼されます。

Mac環境でのSSL証明書の信頼に関しては以下の記事を参考にすると分かりやすそうです。
http://qiita.com/suin/items/be87a7a581f30b38c5f7

仕組み

証明書の生成

package.json内にscriptの中にpostinstallを設置、同梱したシェルスクリプトを実行するようにした。
最初は、そもそもパッケージにする時に、何か自己署名証明書を入れればいいと思っていたが、それを信頼すると見ず知らずのうちによくわからない脆弱性を抱えかねないのでこれはやめた。

本体の部分

単にhttpsできたリクエストをそのままhttpに書き換えて送っているだけ。ほぼどこかのページに載ってたスクリプトのまま。

疑問

hss & hs

とすれば、同時にサーバーが立つようになるはずだったが(hsはhttp-serverをnpmで入れれば使える)、Ctrl + Cでプロセスを終了すると、片方が実行されたままになってしまう。どうにかいい方法はないだろうか。。。

4
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
4