ssh画面をwebサイトに組み込んだ

teratailにてssh画面をwebサイトに組み込みたい。という質問があり、

確かgithubにあったよなぁ〜と思いやってみました。

githubにてssh webで検索すると色々でてきます。

node.jsやpythonなど各種言語でいいものがあります。


今回はWebSSHを使ってみました。

https://github.com/huashengdun/webssh/

僕のMacではPython2.xがダメだったんで、

pip3 install websshでインストール

wsshで起動

ブラウザで127.0.0.1:8888へアクセス

ログイン画面が表示されました。

Hostname:IP:借りているVPSのIPアドレスを入れました。

Username:ユーザー名を入れました。

Password:Password認証はやっていないので何も入れません

Port:ポート番号を入力

Private Key:借りているVPSに登録してた公開鍵とペアの秘密鍵


秘密鍵は僕のMacの~/.sshにあるのでブラウザからはセレクトできなかったのでコピーして

ドットを外してリネームし、ドットファイルにしないで可視化しました。


ブラウザからログインできました。

SSHのターミナルAppと同じ表示、同じ使い心地です。


topコマンドを打って表示させました。


WebSSHの作者さんのwebに実際に動くデモがあるので試してみたい方はこちら

https://webssh.huashengdun.org/



teratailの質問者さんのように各ユーザーに利用してもらいたい場合は

webサーバのnginxの設定を


でドメインの設定も書き足しておけば、普通にドメインでアクセスできます。


しかし、セキュリティを考えるとユーザー認証画面を挟んだり

特定のIP以外は弾く設定をサーバサイドでしたほうがより安全だと思います。


各ユーザーをアクセス可能にさせるにはGithubなどへ公開鍵を登録してもらい

VPSの ~/.ssh/authorized_keysへ追加すれば、各ユーザーの所持している秘密鍵でアクセス可能です。


$ curl https://github.com/ユーザー名.keys >> ~/.ssh/authorized_keys


参考:

GitHubにssh接続できるようにする

GitHubに登録してある公開鍵をauthorized_keysに追加するコマンド



二要素認証Appで有名なauthyにSSHで二要素認証可能なauthy-sshといものがあるので

通常のSSHからauthy-sshに切り替える、またはVPN経由のみでアクセス可能にするなど

セキュリティをより強固にする方法もあります。