xterm.js + Express.js + ssh2.js：构建安全的WebSSH应用

2024-02-06 10:28:52

引言

WebSSH是一种允许用户通过Web浏览器访问远程服务器的终端仿真技术。它提供了一种安全便捷的方式来管理和控制服务器，而无需使用传统的SSH客户端。本文将指导您如何使用Express.js、xterm.js和ssh2.js构建一个功能强大且安全的WebSSH应用程序。

服务端配置

安装依赖包

npm install express xterm ssh2

创建服务器

const express = require('express');
const xterm = require('xterm');
const ssh2 = require('ssh2');

const app = express();

app.use(express.static('public'));

app.get('/', (req, res) => {
  res.sendFile('index.html');
});

app.post('/ssh', (req, res) => {
  const { username, password, host, port } = req.body;

  const client = new ssh2.Client();

  client.on('ready', () => {
    const term = new xterm.Terminal();
    term.open(document.getElementById('terminal'));

    client.shell((err, stream) => {
      if (err) {
        res.status(500).send(err);
      }

      stream.on('data', (data) => {
        term.write(data.toString());
      });

      term.on('data', (data) => {
        stream.write(data);
      });

      term.on('resize', (size) => {
        stream.setWindow(size.cols, size.rows);
      });
    });
  });

  client.connect({
    host,
    port,
    username,
    password
  });
});

app.listen(3000);

客户端配置

创建HTML页面

<!DOCTYPE html>
<html>
<head>
  
  <script src="https://unpkg.com/xterm@4.20.1/dist/xterm.min.js"></script>
  <script src="main.js"></script>
</head>
<body>
  <div id="terminal"></div>
</body>
</html>

创建JavaScript文件

const term = new xterm.Terminal();
term.open(document.getElementById('terminal'));

const client = new ssh2.Client();

client.on('ready', () => {
  const username = prompt('Username:');
  const password = prompt('Password:');
  const host = prompt('Host:');
  const port = prompt('Port:');

  client.connect({
    host,
    port,
    username,
    password
  });
});

client.on('error', (err) => {
  alert(err.message);
});

client.on('shell', (err, stream) => {
  if (err) {
    alert(err.message);
  }

  stream.on('data', (data) => {
    term.write(data.toString());
  });

  term.on('data', (data) => {
    stream.write(data);
  });

  term.on('resize', (size) => {
    stream.setWindow(size.cols, size.rows);
  });
});