How to access VNC remote desktop in web browser

http://xmodulo.com/2013/09/access-vnc-remote-desktop-web-browser.html

There are many VNC clients available on Linux, differing in their capabilities and operating system support. If you are looking for a cross-platform VNC client, you have two options: use either Java-based VNC viewers (e.g., RealVNC or TightVNC), or web-based VNC clients.

VNC web clients are typically faster than Java-based VNC viewers, and could easily be integrated into other third-party applications.
In this tutorial, I will describe how to access VNC remote desktop in web browser by using VNC web client called noVNC.
noVNC is a HTML5-based remote desktop web client which can communicate with a remote VNC server via Web Sockets. Using noVNC, you can control a remote computer in a web browser over VNC.
noVNC has been integrated into a number of other projects including OpenStack, OpenNebula, CloudSigma, Amahi and PocketVNC.

noVNC Feature List

The following list shows full features offered by noVNC.

• Supports all modern browsers including those on iOS, Android.
• Supported VNC encodings: raw, copyrect, rre, hextile, tight, tightPNG
• WebSocket SSL/TLS encryption (i.e. “wss://”) support
• 24-bit true color and 8 bit colour mapped
• Supports desktop resize notification/pseudo-encoding
• Local or remote cursor
• Clipboard copy/paste
• Clipping or scrolling modes for large remote screens

Web Browser Requirements

To run noVNC, your web browser must support HTML5, more specifically HTML5 Canvas and WebSockets. The following browsers meet the requirements: Chrome 8+, Firefox 3.6+, Safari 5+, iOS Safari 4.2+, Opera 11+, IE 9+, and Chrome Frame on IE 6-8. If your browser does not have native WebSockets support, you can use web-socket-js, which is included in noVNC package.
For more detailed browser compatibility, refer to the official guide.

Install noVNC on Linux

To install noVNC remote desktop web client, clone the noVNC GitHub project by running:

$ git clone git://github.com/kanaka/noVNC

Launch Websockify WebSockets Proxy

The first step is to launch Websockify (which comes with noVNC package) on local host. noVNC leverages Websockify to communicate with a remote VNC server. Websockify is a WebSocket to TCP proxy/bridge, which allows a web browser to connect to any application, server or service via local TCP proxy.
I assume that you already set up a running VNC server somewhere. For the purpose of this tutorial, I set up a VNC server at 192.168.1.10:5900 by using x11vnc.
To launch Websockify, use a startup script called launch.sh. This script starts a mini-webserver as well as Websockify. The “--vnc” option is used to specify the location of a remotely running VNC server.

$ cd noVNC
$ ./utils/launch.sh --vnc 192.168.1.10:5900

Warning: could not find self.pem
Starting webserver and WebSockets proxy on port 6080
WebSocket server settings:
  - Listen on :6080
  - Flash security policy server
  - Web server. Web root: /home/xmodulo/noVNC
  - No SSL/TLS support (no cert file)
  - proxying from :6080 to 192.168.1.10:5900

Navigate to this URL:

    http://127.0.0.1:6080/vnc.html?host=127.0.0.1&port=6080

Press Ctrl-C to exit

At this point, you can open up a web browser, and navigate to the URL shown in the output of Websockify (e.g., http://127.0.0.1:6080/vnc.html?host=127.0.0.1&port=6080).
If the remote VNC server requires password authentication, you will see the following screen in your web browser.

After you have successfully connected to a remote VNC server, you will be able to access the remote desktop as follows.

You can adjust the settings of a VNC session by clicking on the settings icon located in the top right corner.

Create Encrypted VNC Session with noVNC

By default a VNC session created by noVNC is not encrypted. If you want, you can create encrypted VNC connections by using the WebSocket ‘wss://’ URI scheme. For that, you need to generate a self-signed encryption certificate (e.g., by using OpenSSL), and have Websockify load the certificate.
To create a self-signed certificate with OpenSSL:

$ openssl req -new -x509 -days 365 -nodes -out self.pem -keyout self.pem

After that, place the certificate in noVNC/utils directory. Then when you run launch.sh, Websockify will automatically load the certificate.