ブラウザでSSHを接続する webssh

ブラウザのHTMLでSSHする

webssh を使うと、ブラウザの中でSSH接続ができる。

ブラウザの中でSSHをサービスとして提供できるようになる。

使用例

f:id:takuya_1st:20220408161035p:plain

接続概要

ブラウザはWebSocketを喋る。

ブラウザ--[websocket]-->webssh

リモートのサーバからは、SSHで出ていく。

webssh -- [ssh] -- > ssh server

接続の概要を見たらわかる通り、Linuxサーバーを踏み台にしてSSHするのと同等である。

インストール

pipenv を使ってインストールすることにする。

mkdir webssh
pipenv 
pipenv shell 
pip install webssh 
webssh

起動

ポート指定・アドレスしてリッスンする。

## または 全部指定
wssh 
## 指定
wssh --port=5571 --address=127.0.0.1

使い所

SSHクライアントのインストールが制限されているような環境でも接続が可能になる。

ただ、この目的であれば、Chromeの拡張機能で直接SSHを喋るのでChromeの拡張機能が望ましいと思う。

踏み台を用意するのがめんどくさい、SSLで抜けてSSHを接続したいときに使えそうですよね。

nginx にインストール

ssl はnginx で管理したほうが楽

nignx の設定例

server {

  listen 127.0.0.1:443 ;
  server_name _;
  server_tokens off;
  location / {
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Real-PORT $remote_port;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header Host $http_host;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_connect_timeout 300;
    # Default is HTTP/1, keepalive is only enabled in HTTP/1.1
    proxy_http_version 1.1;
    proxy_set_header Connection "";
    chunked_transfer_encoding off;
    proxy_pass http://127.0.0.1:5571/;
  }

}

nginx のサブディレクトリ

複数の接続を切り替えて使うなら、サブディレクトリを使うほうが楽だと思う。

location / { を location /terminal/ { に切り替える。

server {

  listen 127.0.0.1:443 ;
  server_name _;
  server_tokens off;


  location /terminal/ {
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Real-PORT $remote_port;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header Host $http_host;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_connect_timeout 300;
    # Default is HTTP/1, keepalive is only enabled in HTTP/1.1
    proxy_http_version 1.1;
    proxy_set_header Connection "";
    chunked_transfer_encoding off;
    proxy_pass http://127.0.0.1:5571/;
  }

}

プロキシ先にも注意

proxy_pass http://127.0.0.1:5571/; にすることがポイント

proxy_pass http://127.0.0.1:5571; だとディレクトリも含めてバックエンドに送られる。

開いた瞬間に接続

開いた瞬間に接続させることもできる。

https://127.0.0.1/terminal/?hostname=192.168.1.1&username=takuya&password=XXX

参考資料

https://github.com/huashengdun/webssh

それマグで！

知識はカップより、マグでゆっくり頂きます。　takuya_1stのブログ