SSH terminal on the "Webssh" webpage

[Webssh]

--Two days to compare the painful course

Broadly speaking, webssh refers to a technique that implements an SSH terminal on a Web page. This eliminates the need for Xshell and other analog terminal tools to SSH connection, ssh this relatively low-level operation also from the C/S architecture twist into the B/s architecture.

There are several components that can implement WEBSSH, but in the final analysis are based on the client and the service side of the instant communication, some webssh only stay in this layer, indicating that the client access to the SSH interface is only the backend of the server itself, and a slightly more advanced, will webssh into a common service, The SSH interface on the Web page is just like Xshell, which can connect any machine that the server can communicate with. Since the general server will have SSH client software installed, so there is a clear distinction between the two is not actually.

Let's talk about my needs, I do a resource management system is an important part of the server. At the same time, the system also maintains the user and password of each server, if you press a key on the page, you can open a webssh, and automatically log in, so that you can easily manage each server.

Based on the idea of such a requirement, I set out to look for some projects, and here are a few things that might be useful to find:

Gateone

Project Address: Https://github.com/liftoff/GateOne

Detailed installation tutorial can refer to this article: http://www.laozuo.org/10703.html

This thing has been praised by many people, the use of the next also found that really very cow. It is a HTML5-based WEBSSH project that can be run without any plug-in from any browser. I feel gateone the most powerful place is the strong webssh interface. Not only a black screen, it also supports multi-terminal creation and switching, support the display of images in the terminal and other content, support operation playback, log audit and so on functions. It can be said that the desktop software is much more powerful than Putty,xshell. But その points, this project is very big, need to rely on a lot.

Gateone's development framework was tornado, just python, so I looked at it for a long time. After guaranteeing a series of dependencies such as Tornado,paramiko, download the project, consider using the Python setup.py install to mount Gateone as a software on the server, the way I use Python Gateone.py such a relatively low way to start the service. The default port, and so on, can be modified in server.conf in the gateone.py directory. Oh yes, Gateone uses the HTTPS protocol by default, so remember not to be mistaken when you visit.

Once the deployment is complete, visit the relevant address to see the Gateone interface. Simple to use, there are a series of toolbars on the edge of the interface, without careful study, but it can be said and desktop-level software generally useful.

But Gateone has a big drawback does not meet my needs, is unable to do automatic login. Gateone was actually placed on the server as a generic SSH client service, and I was unable to pass some information to it when I opened it to enable automatic SSH to a server. In order to log in automatically, I even failed to use jquery to find the cursor's DOM and then insert the information in front of it. Rough look at the next source, feel the level is not enough to change the source to achieve. So I gave up looking for another way

Shellinabox

This project is also a good webssh, but did not look closely, because it seems to only support the deployment of local access, of course, if you want to access it can be, this is still a little bit cumbersome. And the problem of automatic login is still unresolved, I still do not find a way to pass information to the WEBSSH interface for automatic login.

On GitHub It seems that the latest version has assembled a lot of other plugins such as IDE plugins and other things that beautify the interface, and it looks pretty.

Xterm.js

In the evening asked how the company has a similar function of the project how to achieve WEBSSH, the results were told that the use of xterm.js, and do this piece of colleagues have left. Had to study the next xterm.js this library.

Project Address: Https://github.com/xtermjs/xterm.js

Xterm.js is a front-end library that requires back-end support to implement a full webssh. Xterm can be thought of as being able to draw a more complete terminal screen at the front.

Oh yes, in following its readme installation also guessed a lot of pits, npm this thing still not very will use. The front-end gameplay is necessary to learn the system. Anyway, finally, I got the Xterm.js and xterm.css. Two files were put on the page to experiment. Did draw a black screen, but no interaction ah. Interactive words must use WebSocket (other duplex interactive way is certainly not high efficiency, simple use can, WEBSSH transmission intensity than the big thing or forget), flask also forget, Django WebSocket basically won't. Helpless again back online looking for.

Webssh

Project Address: Https://github.com/huashengdun/webssh

Finally found the webssh (narrow) this thing. In fact, I had found one on GitHub before the webssh, and I heard that component in someone else's work before the OPS conference. But there is a brief look at a year ago has not been maintained, down a try to find that the bug is more, so soon gave up. But this time the found Webssh seems to have nothing to do with the previous one, another project of the same name. Down a try to find good, not only to achieve the basic SSH interface, and the code is not much, to change their own words, the cost of learning is not very large.

Technically, the front end of the project is also xterm.js, the backend is also tornado, and the backend directory structure is quite simple and understandable. After deployment, access is still the interface that requires input of IP, port, account password. But it clearly wrote the interface used in which JS, so I thought can be added in the connection get parameters, and then built a JS to fill these parameters into input, and then automatically click Submit, you can achieve automatic login.

It has to be pointed out that WEBSSH is using the HTTP protocol, there may be some deficiencies in security. But there's so much to be done. And I deployed the WEBSSH on the same server as my own project, with the IFRAME accessing the WEBSSH service on the page, so it's a little bit better.

At this point I basically realized the needs, but still a little bit, is that I do not want to webssh default that with the form of the interface display, so with the layer component, at the beginning of the page loading to call out a loading interface and specify shade to true, so that the content is not visible. When the request succeeds, the layer is turned off, and if the request fails, the error message is displayed in a layer.msg manner. According to the default way of Main.js in Webssh, the error message is written in a #status Div, remember to replace status.text (XXX) with layer.msg. There is also a fluke, by default, enter Exit SSH will return to the form interface, add layer after the exit to not display the form but into a black screen, very good.

The rest of the customization is very simple. For example, change the error message to Chinese and so on.

There have been two minor problems in this process. The first is when my SSH area appears as an IFRAME on the page, if the area is too high, such as less than 400px, the SSH interface will be anchored at the top. When the output command is executed you will not see the cursor unless you blind to a clear command. The second is that it seems that WEBSSH does not support very large amounts of data interaction. I was trying to get a cat out of a 5M file when it crashed. But I was just taking this thing for a simple ssh, there's no need to continue to improve performance.

Above. Two days finally found a better solution.

SSH terminal on the WEBSSH Web page