【webssh】网页上的SSH终端

【webssh】

　　——记两天来比较痛苦的历程

　　广义上来讲，webssh泛指一种技术能够在网页上实现一个SSH终端。从而无需Xshell之类的模拟终端工具进行SSH链接，将SSH这一比较低层的操做也从C/S架构扭成了B/S架构。

　　能实现webssh的组件有好几种，但归根结底都是创建在客户端和服务端的即时通讯上，有一些webssh只停留在这一层，代表客户端接入的ssh界面只是服务端自己的后台；另外一种稍微高级一点的，将webssh作成一个通用的服务，网页上的ssh界面其实就和XShell同样，能够链接任何服务器能够连通的机器。因为通常服务器都会安装有ssh客户端软件，因此二者之间硬要说有很明显的区别其实也没有。

　　下面来讲一说个人需求吧，我作的一个资源管理系统中重要的一部分就是服务器。同时系统中也维护了各个服务器的用户和密码，那么若是在页面上按一个键，就能打开一个webssh，而且 自动登陆 ，这样就能很方便地管理各个服务器了。

　　基于这样一种需求的想法，我出发去找了一些项目，下面来讲说几个找到的可能有用的：

■　　GateOne

　　项目地址： https://github.com/liftoff/GateOne

　　详细的安装教程能够参考这篇：http://www.laozuo.org/10703.html

　　这个东西被不少人称赞，使用了下也发现确实很牛。它是一个基于HTML5的webssh工程，不须要任何浏览器的任何插件就能无障碍运行。我感受gateone最厉害的地方在于其强大的webssh界面。不只仅是一块黑屏，它还支持多终端建立和切换，支持在终端中显示图片等内容，支持操做回放，日志审计等等功能。简直能够说比putty，XShell之类的桌面软件都要强大不少。可是その分，这个工程很大，须要的依赖不少。

　　gateone的开发框架是tornado，恰好是python的，因此我看了它很长时间。。在保证有了tornado，paramiko等一系列依赖以后，下载来项目，能够考虑用python setup.py install来将gateone做为一个软件安装在服务器上，我采用的方法是python gateone.py这样的比较low的办法启动服务的。默认端口等等配置能够在gateone.py同目录下的server.conf中修改。哦对了，gateone默认使用了https协议，因此在访问的时候记得不要搞错了。

　　部署完成以后，访问相关地址，能够看到gateone的界面。简单用了一下，界面的边上还有一连串工具栏，没有仔细研究，不过确实能够说是和桌面级软件通常的好用。

　　不过gateone有个很大的缺点不符合个人需求，就是没法作到自动登陆。gateone实际上是做为一个通用的ssh客户端服务放在服务器上的，我没法在打开它的时候向其传递一些信息从而实现自动的ssh到某台服务器。为了自动登陆，我甚至用jquery找到光标的DOM而后在它前面插入信息等方法，均告失败。粗粗看了下源码，以为水平不足以改源码来实现。。因而放弃找其余办法

■　　shellinabox

　　这个项目也是一个很好的webssh，不过没有细看，由于它彷佛只支持对于部署本地的访问，固然若是要访问出去也是能够，这样仍是略显麻烦一点。并且自动登陆的问题依然没有解决，我依然没有找到办法向webssh界面传递信息实现自动登陆。

　　在github上看彷佛最新版本已经集合了不少其余插件好比IDE插件和其余一些美化界面的东西进去，看起来仍是很漂亮的。

■　　xterm.js

　　晚上问了一下公司里有相似功能的项目是如何实现webssh的，结果被告知是使用了xterm.js，而且作这块的同事已经离职了。。只好本身研究了下xterm.js这个库。

　　项目地址：https://github.com/xtermjs/xterm.js

　　xterm.js是一个前端库，要实现一个完整的webssh还须要后端的支持。xterm的话能够认为它就是能够在前端画一个功能较为齐全的终端屏幕。

　　哦对了，在跟着它的readme安装的时候还猜了很多坑，npm这个东西至今仍是不太会用。前端的玩法有必要系统学一下。总之最后总算是搞出了xterm.js和xterm.css两个文件放到页面里实验了一下。确实画出了黑屏，不过没有交互啊。交互的话确定要用websocket（其余双工交互方式确定是效率不高的，简单用用能够，webssh传输强度比较大的东西仍是算了），flask也就算了，django里的websocket基本不会。。无奈再回网上找找。

■　　webssh

　　项目地址： https://github.com/huashengdun/webssh

　　最终找到了webssh（狭义）这个东西。其实同名的webssh以前我已经在github上找到一个，以前开运维技术大会时，听到别人的做品中也是用了那个组件。可是那里简介一看在一年前就已经不维护了，下来一试发现bug多得是，因此很快就放弃了。不过此次找到的webssh彷佛和以前那个没啥关系，是同名的另外一个项目。下来一试发现好得很，不只可以实现基本的ssh界面，并且代码也很少，要本身改的话学习成本也不是很大。

　　技术上，这个项目前端用的也是xterm.js，后端用的也是tornado，并且后端的目录结构至关简单易懂。部署上去以后访问进去一开始仍然是须要输入IP，端口，帐号密码这些内容的界面。可是它明确写出了那个界面里用了哪些JS，因而我想到了能够在链接里加入GET参数，而后自建一个JS来把这些参数填入input中，而后再自动按一下submit，就能够实现自动登陆了。

　　这里不得不指出的是，webssh用的是http协议，安全方面上可能有一些不足。可是已经顾不得这么多了。。并且我把webssh部署在和我本身项目同一台服务器上，页面上采用了iframe访问webssh服务，因此相对好一点。 若是想要将webssh项目部署成https也简单，只要修改下webssh的tornado框架用到的一些源码就能够了。

　　在main.py中，原先服务进程的监听启动是经过app.listen这样的方式来作的。如今只要将这部分注释掉而后从新创建一个http_server对象来监听：

import tornado
# ...略
http_server = tornado.httpserver.HTTPServer(app, ssl_options={
  'certfile': 'your/path/to/certificate.crt',
  'keyfile': 'your/path/to/key.key'
})
http_server.listen(options.port,options.address)
# ...略

 

　　这样就能够经过https来访问webssh界面了。

　　至此个人需求基本实现了，不过还有点不足，就是我不想把webssh默认的那个带有表单的界面展现出来，因而用了layer组件，在页面加载开始时就调出了一个加载界面而且指定shade为true，使得看不到后面的内容。请求成功后关掉layer，若是请求失败，就以layer.msg的方式将错误信息展示。按照webssh的main.js中默认的提示错误的方式，是将错误信息写在一个#status的div中，记得把status.text(xxx)之类的内容换成layer.msg便可。还有一个歪打正着的，默认状况输入exit退出ssh以后会回到表单界面，加上layer以后退出来不显示表单而是变成一块黑屏，很好。

　　其他一些定制就是很简单了。好比把错误提示信息换成中文等等。

　　这个过程当中还遇到过两个小问题。第一个是当个人ssh区域做为一个iframe出如今页面上时，若是区域高度太小，好比小于400px时，ssh界面会锚定在最顶部。当输出比较多的命令被执行以后你就看不到光标了，除非盲打一个clear命令。。第二个是彷佛webssh不支持很大量的数据交互。我尝试着cat了一个5M多的文件时，崩溃了。。不过我原本就是拿这个东西来作一个简单的ssh的，不必继续增强性能。

 　　* 关于第一个问题还有一些小补充。webssh模拟终端的界面的大小是个很微妙的东西，上面说了高度的问题，另外还有一个宽度的问题。通常状况下，为了可以动态适配窗口的大小，咱们能够实时获取window.height和window.width，而后经过计算得到到webssh终端合适的高和宽。对于width，webssh利用的前端组件xterm.js有一个问题就是最多每行只能显示80个字符。或许你能够尝试修改Terminal对象生成时传入方法的参数cols（其默认值是80），可是只要其值设置为大于80的时候就会发生超出80字符宽度部分的字符串不会自动换行，而是到本行开头去覆盖本行。

　　google了挺久没有找到合适的解决方案，github上官方给出的解释是由于被链接服务器自己的tty终端字符宽度就是80，而xterm.js必须和这个宽度同样才能够正常工做。。为了webssh终端可以正常地自动换行同时也要尽可能避免webssh终端区域大片屏幕都被浪费，一个曲线救国的办法就是把终端窗口宽度恰好调节成80个字符再宽一点点的样子，好比780px左右（根据屏幕大小不一样可能不一样）。

　　以上。两天终于找到了一个好一点的解决办法。。