【webssh】
——Remember the painful journey in the past two days
Broadly speaking, webssh generally refers to a technology that can implement an SSH terminal on a web page. As a result, there is no need for an analog terminal tool such as Xshell to perform SSH connection, and the relatively low-level operation of SSH is also changed from the C/S architecture to the B/S architecture.
There are several components that can implement webssh, but in the final analysis, they are all based on the instant communication between the client and the server. Some webssh only stay at this layer, indicating that the ssh interface accessed by the client is only the background of the server itself; Another slightly more advanced one is to make webssh a general service. The ssh interface on the web page is actually the same as XShell, and it can connect to any machine that the server can connect to. Since the general server will be installed with ssh client software, there is no obvious difference between the two.
Let's talk about my needs. An important part of a resource management system I do is the server. At the same time, the user and password of each server are also maintained in the system, so if you press a key on the page, you can open a webssh and log in automatically , so you can easily manage each server.
Based on the idea of such a need, I set out to find some projects. Here are a few that may be useful:
■ GateOne
Project address: https://github.com/liftoff/GateOne
For detailed installation tutorials, please refer to this article: http://www.laozuo.org/10703.html
This thing has been praised by many people, and after using it, I found that it is really awesome. It is an HTML5-based webssh project that does not require any browser plug-ins to run without any problems. I feel that the most powerful part of gateone is its powerful webssh interface. Not just a black screen, it also supports multi-terminal creation and switching, supports displaying pictures and other content in the terminal, supports operation playback, log auditing and other functions. It can be said that it is much more powerful than desktop software such as putty and XShell. But その分, this project is huge and requires a lot of dependencies.
The development framework of gateone is tornado, which happens to be python, so I read it for a long time. . After ensuring that there are a series of dependencies such as tornado, paramiko, etc., download the project, you can consider using python setup.py install to install gateone as a software on the server, the method I use is python gateone.py, which is relatively low way to start the service. Configurations such as default ports can be modified in server.conf in the same directory as gateone.py. Oh yes, gateone uses the https protocol by default, so remember not to make a mistake when visiting.
After the deployment is complete, visit the relevant address and you can see the interface of gateone. After a brief use, there are a series of toolbars on the side of the interface. I haven't studied it carefully, but it can be said that it is generally easy to use with desktop-level software.
However, gateone has a big disadvantage that does not meet my needs, that is, it cannot do automatic login. The gateone is actually placed on the server as a general ssh client service, and I cannot pass some information to it when opening it to automatically ssh to a certain server. In order to log in automatically, I even use jquery to find the DOM of the cursor and insert information in front of it, etc., all fail. After a rough look at the source code, I feel that the level is not enough to change the source code to achieve. . So give up looking for other ways
■ shellinabox
This project is also a good webssh, but I didn't take a closer look, because it seems to only support local access to the deployment, of course, if you want to access it, it can be a little troublesome. And the problem of automatic login has not been solved, and I still haven't found a way to pass information to the webssh interface to achieve automatic login.
Looking at github, it seems that the latest version has integrated many other plugins such as IDE plugins and other things to beautify the interface, and it still looks very beautiful.
■ xterm.js
In the evening, I asked how a project with similar functions in the company implemented webssh, and I was told that xterm. . I had to study the library xterm.js myself.
Project address: https://github.com/xtermjs/xterm.js
xterm.js is a front-end library. To implement a complete webssh requires back-end support. In the case of xterm, it can be considered that it can draw a more fully functional terminal screen at the front end.
Oh, by the way, I guessed a lot of pits when I installed it with its readme, and npm is still not very useful. The front-end gameplay needs to be learned systematically. In short, I finally came up with two files, xterm.js and xterm.css, and put them on the page to experiment. It does draw a black screen, but there is no interaction. For interaction, websocket must be used (other duplex interaction methods are definitely not efficient, simple use can be used, and webssh transmission strength is still ignored), and flask is also ignored, websocket in django basically does not. . Reluctant to look online again.
■ webssh
Project address: https://github.com/huashengdun/webssh
Finally found the webssh (narrow sense) this thing. In fact, I have found a webssh with the same name on github before. When I opened the operation and maintenance technology conference before, I heard that other people's works also used that component. But the introduction there was no longer maintained a year ago, and there were a lot of bugs when I tried it, so I gave up quickly. However, the webssh found this time seems to have nothing to do with the previous one, it is another project with the same name. After trying it out, I found that it is very good, not only can realize the basic ssh interface, but also there is not much code, if you want to change it yourself, the learning cost is not very big.
Technically, the front end of this project also uses xterm.js, the back end uses tornado, and the back end directory structure is quite simple and easy to understand. After deployment, access is still required to enter the interface of IP, port, account password and these contents at the beginning. But it clearly writes out which JS is used in that interface, so I thought of adding GET parameters to the connection, and then building a JS to fill in these parameters into the input, and then automatically pressing submit to achieve this. automatically logged in.
It has to be pointed out here that webssh uses the http protocol, which may have some shortcomings in terms of security. But it's no longer enough. . Moreover, I deployed webssh on the same server as my own project, and the page uses iframe to access the webssh service, so it is relatively good.
So far, my needs have been basically realized, but there are still some shortcomings, that is, I don't want to display the default webssh interface with a form, so I use the layer component, and when the page starts to load, I call up a loading interface and specify the shade. is true, so that the following content cannot be seen. Turn off the layer after the request is successful. If the request fails, the error message will be displayed in the form of layer.msg. According to the default method of prompting errors in main.js of webssh, the error message is written in a div of #status, remember to replace the content such as status.text(xxx) with layer.msg. There is also a crooked hit. By default, after entering exit to exit ssh, it will return to the form interface. After adding the layer, it will not display the form but turn into a black screen, which is very good.
The rest of the customization is pretty straightforward. For example, change the error message to Chinese and so on.
There were two small problems in this process. The first is that when my ssh area appears on the page as an iframe, if the area height is too small, say less than 400px, the ssh interface will be anchored to the very top. When a command with a lot of output is executed, you can't see the cursor unless you touch a clear command. . The second is that it seems that webssh does not support very large data interactions. When I tried to cat a file with more than 5M, it crashed. . But I originally used this thing to do a simple ssh, there is no need to continue to enhance the performance.
above. Finally found a better solution after two days. .