WebSSH远程管理Linux服务器、Web终端窗口自适应（二）

上一篇：Gin+Xterm.js实现WebSSH远程Kubernetes Pod

 

• 支持用户名密码认证

• 支持SSH密钥认证

• 支持Web终端窗口自适应

• 支持录屏审计

Go SSH

golang.org/x/crypto/ssh 是 Go 语言的一个库，它提供了 SSH（Secure Shell）协议的实现，可以用来构建 SSH 客户端和服务器。

• 安装

go get golang.org/x/crypto/ssh

• SSH基本示例

在创建SSH客户端之前，首先需要创建一个ClientConfig对象，其中包含了进行SSH通信所必须的配置信息。

config := &ssh.ClientConfig{     User: "username",     Auth: []ssh.AuthMethod{         ssh.Password("password"),     },     HostKeyCallback: ssh.InsecureIgnoreHostKey(), }

在上述代码中，我们设置了用户名（User）、认证方式（Auth）和主机密钥回调（HostKeyCallback）。请注意，为了安全起见，在生产环境中不应使用InsecureIgnoreHostKey，而应使用更严格的主机密钥检查方式。

然后可以使用 ssh.Dial 函数来创建一个 SSH 客户端连接：

client, err := ssh.Dial("tcp", "localhost:22", config) if err != nil {     log.Fatal("Failed to dial: ", err) }

创建了 SSH 客户端连接之后，我们就可以使用它来执行远程命令。例如：

session, err := client.NewSession() if err != nil {     log.Fatal("Failed to create session: ", err) } defer session.Close()  out, err := session.CombinedOutput("ls") if err != nil {     log.Fatal("Failed to run command: ", err) }  fmt.Println(string(out))

在这里，我们首先使用 client.NewSession 方法创建了一个新的 SSH 会话。然后，我们使用 session.CombinedOutput 方法来执行远程命令并获取其输出。

使用Gin、x/crypto/ssh 实现SSH

package main  import (  "encoding/json"  "fmt"  "github.com/gin-gonic/gin"  "github.com/gorilla/websocket"  "golang.org/x/crypto/ssh"  "log"  "net/http"  "os" )  const (  // 输入消息  messageTypeInput = "input"  // 调整窗口大小消息  messageTypeResize = "resize"  // 密钥认证方式  authTypeKey = "key"  // 密码认证方式  authTypePwd = "pwd" )  // websocket 连接升级 var upgrader = websocket.Upgrader{  CheckOrigin: func(r *http.Request) bool {   return true  }, }  // WSClient WebSocket客户端访问对象，包含WebSocket连接对象和SSH会话对象 type WSClient struct {  // WebSocket 连接对象  ws         *websocket.Conn  sshSession *ssh.Session }  // Message 用于解析从websocket接收到的json消息 type Message struct {  Type string `json:"type"`  Cols int    `json:"cols"`  Rows int    `json:"rows"`  Text string `json:"text"` }  // WSClient 的 Read 方法，实现了 io.Reader 接口，从 websocket 中读取数据。 func (c *WSClient) Read(p []byte) (n int, err error) {  // 从 WebSocket 中读取消息  _, message, err := c.ws.ReadMessage()  if err != nil {   return 0, err  }  msg := &Message{}  if err := json.Unmarshal(message, msg); err != nil {   return 0, err  }   switch msg.Type {  case messageTypeInput:   // 如果是输入消息   return copy(p, msg.Text), err  case messageTypeResize:   // 如果是窗口调整消息、调整窗口大小   return 0, c.WindowChange(msg.Rows, msg.Cols)  default:   return 0, fmt.Errorf("invalid message type")  } }  // WindowChange 改变SSH Session窗口大小 func (c *WSClient) WindowChange(rows, cols int) error {  return c.sshSession.WindowChange(rows, cols) }  // WSClient 的 Write 方法，实现了 io.Writer 接口，将数据写入 websocket。 func (c *WSClient) Write(p []byte) (n int, err error) {  // 将数据作为文本消息写入 WebSocket  err = c.ws.WriteMessage(websocket.TextMessage, p)  return len(p), err }  // 建立SSH Client func sshDial(user, password, ip, authType string, port int) (*ssh.Client, error) {  var authMethods []ssh.AuthMethod  // 根据认证类型选择密钥或密码认证  switch authType {  case authTypeKey:   privateKeyByte, err := os.ReadFile("./id_rsa")   if err != nil {    return nil, err   }   privateKey, err := ssh.ParsePrivateKey(privateKeyByte)   if err != nil {    return nil, err   }   authMethods = append(authMethods, ssh.PublicKeys(privateKey))   case authTypePwd:   authMethods = append(authMethods, ssh.Password(password))  }  // SSH client配置  config := &ssh.ClientConfig{   User:            user,   Auth:            authMethods,   HostKeyCallback: ssh.InsecureIgnoreHostKey(),  }  // 创建SSH client  return ssh.Dial("tcp", fmt.Sprintf("%s:%d", ip, port), config) }  // SSHHandler 处理SSH会话 func SSHHandler(wsClient *WSClient, user, password, ip, authType, command string, port int) {  // 创建SSH client  sshClient, err := sshDial(user, password, ip, authType, port)  if err != nil {   log.Fatal(err)  }  defer sshClient.Close()   // 创建SSH session  session, err := sshClient.NewSession()  if err != nil {   log.Fatal(err)  }  defer session.Close()   wsClient.sshSession = session  // 设置终端类型及大小  terminalModes := ssh.TerminalModes{   ssh.ECHO:          1,   ssh.TTY_OP_ISPEED: 14400,   ssh.TTY_OP_OSPEED: 14400,  }  if err := session.RequestPty("xterm", 24, 80, terminalModes); err != nil {   log.Fatal(err)  }  // 关联对应输入、输出流  session.Stderr = wsClient  session.Stdout = wsClient  session.Stdin = wsClient  // 在远程执行命令  if err := session.Run(command); err != nil {   log.Fatal(err)  }  }  // Query 查询参数 type Query struct {  UserName string `form:"username" binding:"required"`  Password string `form:"password"`  IP       string `form:"ip" binding:"required"`  Port     int    `form:"port" binding:"required"`  AuthType string `form:"auth_type" binding:"required,oneof=key pwd"`  Command  string `form:"command" binding:"required,oneof=sh bash"` }  func main() {  router := gin.Default()  router.GET("/ssh", func(ctx *gin.Context) {   var r Query   // 绑定并校验请求参数   if err := ctx.ShouldBindQuery(&r); err != nil {    ctx.JSON(http.StatusBadRequest, gin.H{     "err": err.Error(),    })    return   }   // 将 HTTP 连接升级为 websocket 连接   ws, err := upgrader.Upgrade(ctx.Writer, ctx.Request, nil)   if err != nil {    log.Printf("Failed to upgrade connection: %v", err)    return   }   // 开始处理 SSH 会话   SSHHandler(&WSClient{    ws: ws,   }, r.UserName, r.Password, r.IP, r.AuthType, r.Command, r.Port,   )  })   router.Run(":9191") }

后端项目完整代码：https://gitee.com/KubeSec/webssh/tree/master/go-ssh

使用vue-admin-template和Xterm.js实现Web终端

https://github.com/PanJiaChen/vue-admin-template

https://github.com/xtermjs/xterm.js

• 下载vue-admin-template项目

https://github.com/PanJiaChen/vue-admin-template.git

• 安装xterm.js及插件

npm install npm install xterm npm install --save xterm-addon-web-links npm install --save xterm-addon-fit npm install -S xterm-style

• 打开vue-admin-template项目，在src/views目录下新建目录ssh，在ssh目录下新建index.vue代码如下

<template>   <div class="app-container">     <!-- 使用 Element UI 的表单组件创建一个带有标签和输入框的表单 -->     <el-form ref="form" :model="form" :inline="true" label-width="120px">       <el-form-item label="用户名"> <!-- namespace 输入框 -->         <el-input v-model="form.username" />       </el-form-item>       <el-form-item label="密码"> <!-- pod 名称输入框 -->         <el-input v-model="form.password" />       </el-form-item>       <el-form-item label="IP"> <!-- pod 名称输入框 -->         <el-input v-model="form.ip" />       </el-form-item>       <el-form-item label="端口"> <!-- pod 名称输入框 -->         <el-input v-model="form.port" />       </el-form-item>       <el-form-item label="认证类型"> <!-- 容器名称输入框 -->         <el-select v-model="form.auth_type" placeholder="认证类型">           <el-option label="密钥" value="key" />           <el-option label="密码" value="pwd" />         </el-select>       </el-form-item>       <el-form-item label="Command"> <!-- 命令选择框 -->         <el-select v-model="form.command" placeholder="bash">           <el-option label="bash" value="bash" />           <el-option label="sh" value="sh" />         </el-select>       </el-form-item>       <el-form-item> <!-- 提交按钮 -->         <el-button type="primary" @click="onSubmit">SSH</el-button>       </el-form-item>       <div id="terminal" /> <!-- 终端视图容器 -->     </el-form>   </div> </template>  <script> import { Terminal } from 'xterm' // 导入 xterm 包，用于创建和操作终端对象 import { common as xtermTheme } from 'xterm-style' // 导入 xterm 样式主题 import 'xterm/css/xterm.css' // 导入 xterm CSS 样式 import { FitAddon } from 'xterm-addon-fit' // 导入 xterm fit 插件，用于调整终端大小 import { WebLinksAddon } from 'xterm-addon-web-links' // 导入 xterm web-links 插件，可以捕获 URL 并将其转换为可点击链接 import 'xterm/lib/xterm.js' // 导入 xterm 库  export default {   data() {     return {       form: {         username: 'root', // 默认命名空间为 "default"         password: '123', // 默认 shell 命令为 "bash"         command: 'bash', // 默认 shell 命令为 "bash"         auth_type: 'pwd', // 默认容器名称为 "nginx"         ip: '192.168.26.133',         port: 22       }     }   },   methods: {     onSubmit() {       // 创建一个新的 Terminal 对象       const xterm = new Terminal({         theme: xtermTheme,         rendererType: 'canvas',         convertEol: true,         cursorBlink: true       })        // 创建并加载 FitAddon 和 WebLinksAddon       const fitAddon = new FitAddon()       xterm.loadAddon(fitAddon)       xterm.loadAddon(new WebLinksAddon())        // 打开这个终端，并附加到 HTML 元素上       xterm.open(document.getElementById('terminal'))        // 调整终端的大小以适应其父元素       fitAddon.fit()        // 创建一个新的 WebSocket 连接，并通过 URL 参数传递 pod, namespace, container 和 command 信息       const ws = new WebSocket('ws://127.0.0.1:9191/ssh?username=' + this.form.username + '&password=' + this.form.password + '&auth_type=' + this.form.auth_type + '&ip=' + this.form.ip + '&port=' + this.form.port + '&command=' + this.form.command)        // 当 WebSocket 连接打开时，发送一个 resize 消息给服务器，告诉它终端的尺寸       ws.onopen = function() {         ws.send(JSON.stringify({           type: 'resize',           rows: xterm.rows,           cols: xterm.cols         }))       }        // 当从服务器收到消息时，写入终端显示       ws.onmessage = function(evt) {         xterm.write(evt.data)       }        // 当发生错误时，也写入终端显示       ws.onerror = function(evt) {         xterm.write(evt.data)       }        // 当窗口尺寸变化时，重新调整终端的尺寸，并发送一个新的 resize 消息给服务器       window.addEventListener('resize', function() {         fitAddon.fit()         ws.send(JSON.stringify({           type: 'resize',           rows: xterm.rows,           cols: xterm.cols         }))       })        // 当在终端中键入字符时，发送一个 input 消息给服务器       xterm.onData((b) => {         ws.send(JSON.stringify({           type: 'input',           text: b         }))       })     }   } } </script>  <style scoped> .line{   text-align: center; } </style>

• 在src/router/index.js文件中增加路由

{     path: '/ssh',     component: Layout,     children: [       {         path: 'ssh',         name: 'SSH',         component: () => import('@/views/ssh/index'),         meta: { title: 'SSH', icon: 'form' }       }     ]   },

• 启动项目

npm install npm run dev

• 前端全部代码

https://gitee.com/KubeSec/webssh/tree/master/webssh

测试

• 生成SSH密码

ssh-keygen -t rsa cd /root/.ssh/ cp id_rsa.pub authorized_keys

访问http://localhost:9528/#/ssh/ssh

• 选择密钥连接

• 用户名密码连接