ssh-keygenをブラウザだけでローカルで安全に鍵生成するWebアプリ

なぜWeb上でssh-keygenしたいか？

GitHub ActionsでpushするためにはDeploy keyを登録するのが一番手軽そう。

例えばGitHub PagesへのデプロイがGitHub Actionsからできるactions-gh-pagesでもDeploy keyをssh-keygenコマンドを使った方法できるようになっている。

このssh-keygenコマンドで生成される公開鍵と秘密鍵は一度GitHubの設定で登録すれば捨てて良いもの。だからファイルに保存されずに生成されると手軽さが増すと思った。またssh-keygenコマンドがないと思われるモバイル端末上や、個人的にコマンドがあまり詳しくないWindows環境などでも常に生成されると嬉しい。そこでWebブラウザのローカルで安全に鍵生成できるWebアプリがほしくなった。

もちろんWebサーバー上でssh-keygenコマンドを叩いてそれを受け取る実装はセキュリティ的に避けたいためWeb Cryptoを使った方法を探した。

先駆者

色々と探し回ってみると、自分のやりたいことが実現されているリポジトリを見つけた。

https://gh-card.dev/repos/PatrickRoumanoff/js-keygen.svg https://github.com/PatrickRoumanoff/js-keygen

上記のリポジトリのLive demoで生成した鍵を実際にactions-gh-pagesでもDeploy keyで使ってみてちゃんと動くことも確認できた。

（厳密には鍵長とハッシュのアルゴリズムを変更する必要があった。そうでないとinvalid format errorが出る。）

とても素晴らしいリポジトリだったのだが、npmパッケージ化されてなく再利用が難しかった点と鍵長とハッシュ計算のアルゴリズムを変更するUI部分だけがまだできていなかった。プルリクエストを送りたかったが2年前から更新がなくなっていたので、上記のソースコードをベースにTypeScriptに書き換えnpmのパッケージとして公開することにした。

公開したパッケージ

上記のリポジトリをベースにしてTypeScriptに書き換えたものが以下。

https://gh-card.dev/repos/nwtgck/web-ssh-keygen.svg https://github.com/nwtgck/web-ssh-keygen

HTMLなどのUI部分を取り除き鍵生成ロジックだけにしている。また、もともとブラウザを開かないとテストされない仕組みだったため、Karmaを使いCircle CI上でテストできるようにした。とはいっても嬉しいことに上記のリポジトリでもしっかりとテストがあったためKarmaで使えるように書き換えることで実現可能だった。ChromeHeadlessとFirefoxHeadlessで動くことをテストしている。

Webアプリ

以下が上記のパッケージを使って作ったWebアプリ。

https://gyazo.com/51db43d3258b72c58e5a8d59ee441709

Vue + Vuetify + TypeScriptの最近よく利用しているWebアプリの構成で出来ている。

GitHubリポジトリ: