Using noVNC in the current version of Abiquo

By default Abiquo has an integrated TightVNC applet viewer to provide remote connections to VM consoles. This can be changed to noVNC, an HTML5 VNC viewer, by following the steps below.

Caveats

...

Using noVNC in Abiquo 2.x - 3.6.x

By default Abiquo has an integrated TightVNC applet viewer to provide remote connections to VM consoles. This can be changed to noVNC, an HTML5 VNC viewer, by following the steps below.

For Abiquo 3.8+ see Abiquo websockify proxy for noVNC in Abiquo 3.8+

Caveats

• You must add a proxy to forward websockets requests to traditional sockets. This proxy should be installed on a separate machine from any other Abiquo service.
• You must define a password for VMs in ESXi in order to be able to connect.
• At the time of writing, noVNC does not support user specified keyboard mappings, so these will not be taken into account.
• When you upgrade to the next version of Abiquo, the noVNC component will be overwritten. During your upgrade, allow time to copy the noVNC component to the client-premium or UI webapp of the new version and to test the configuration.

...

# yum install ruby rubygems ruby-devel make gcc libxml2 libxml2-devel libxslt libxslt-devel

  Install some ruby gems:

# gem install "mime-types" -v '1.25'
# gem install rest-client -v '1.6.8'
# gem install nokogiri -v '1.5.10'

...

# VNC Proxy (set to run every minute in the example)
* * * * * root /root/novnc_tokens.rb -a http://10.60.13.4/api -u admin -p xabiquo >-f /opt/websockify/config.vnc

The script requires 3 4 parameters:

• -a: The API URL to connect to. Should be the same as abiquo.server.api.location property in abiquo.properties file.
• -u: The username that will be used to interact with the API. Requires CLOUD_ADMIN role.
• -p: The password for the user.

...

• a role with next privileges: 
  
  • USERS_MANAGE_ENTERPRISE, ENTERPRISE_ADMINISTER_ALL, VDC_ENUMERATE, VAPP_CUSTOMIZE_SETTINGS
• -p: The password for the user.
• -f: The file the results will be written too.

The output is then redirected to a file that will be used as a config file for the websockify daemon. This file will contain one line for each VM with the format "HASH: DST_IP:DST_PORT":

...

The -D flag is to daemonize websockify, 41337 is the port where websockify will be listening, and --target-config specifies the file containing the hash to IP and port mappings.

Adding SSL

Browsers do not allow you to open an unencrypted websocket connection from a page that is accessed using SSL for security reasons. Hence, if you set up SSL to access your Abiquo GUI, you must set up websockify to use SSL.

For that, you will need an SSL certificate and its private key. Note that this certificate needs to be accepted by the client browser, so they should be emitted by a trusted entity. Also check that the hostname that noVNC connects to matches the hostname in the certificate used. If you are testing a test environment which lacks a trusted certificate, you may need to manually open a connection to the IP and port the proxy is running in using your browser, and accept the provided certificate.

To run the websockify proxy with SSL, enter:

# /opt/websockify/websockify -D 41337 --target-config=/opt/websockify/config.vnc --cert=<path_to_your_cert_file> --key=<path_to_your_key_file>

Replacing TightVNC applet with noVNC in the client-premium webapp

Download the noVNC distribution package from: http://kanaka.github.com/noVNC 

Note that this is the same package we used for the websockify

# wget http://github.com/kanaka/noVNC/tarball/master
# tar xvzf master
# ls -l
 total 716
 drwxrwxr-x 8 root root 4096 Apr 4 16:22 kanaka-noVNC-c2b1409
 -rw-r--r-- 1 root root 724988 Apr 5 04:21 master

To replace the tightvnc applet without changing any code in Abiquo, we will need to rename tightvnc to back up this file and replace the tightvnc file with the noVNC one.

# cp -r kanaka-noVNC-c2b1409 /opt/abiquo/tomcat/webapps/client-premium/
# cd /opt/abiquo/tomcat/webapps/client-premium/
# mv tightvnc tightvnc.old
# mv kanaka-noVNC-c2b1409 tightvnc

Download the tarball with the required files for the next steps from http://download.abiquo.com/extras/abiquo-novnc.tar.gz.

Setting up service autostart

To make sure the websockify proxy is started on system reboot, you need to download the provided init script and set it up to run on boot:

# wget https://raw.githubusercontent.com/abiquo/noVNC/master/websockify -O /etc/init.d/websockify
--2014-02-18 09:42:07--  https://raw2.github.com/abiquo/noVNC/master/websockify
Resolving raw2.github.com... 185.31.16.133
Connecting to raw2.github.com|185.31.16.133|:443... connected.
HTTP request sent, awaiting response... 200 OK
Length: 1434 (1,4K) [text/plain]
Saving to: `/etc/init.d/websockify'
100%[=====================================================================================================================>] 1.434       --.-K/s   in 0s      
2014-02-18 09:42:11 (5,45 MB/s) - `/etc/init.d/websockify' saved [1434/1434]


# chmod +x /etc/init.d/websockify
# chkconfig websockify on
# service websockify start

Make sure websockify is not already running before issuing the "service websockify start" command.

Adding SSL

Browsers do not allow you to open an unencrypted websocket connection from a page that is accessed using SSL for security reasons. Hence, if you set up SSL to access your Abiquo GUI, you must set up websockify to use SSL.

For that, you will need an SSL certificate and its private key. Note that this certificate needs to be accepted by the client browser, so they should be emitted by a trusted entity. Also check that the hostname that noVNC connects to matches the hostname in the certificate used. If you are testing a test environment which lacks a trusted certificate, you may need to manually open a connection to the IP and port the proxy is running in using your browser, and accept the provided certificate.

To run the websockify proxy with SSL, enter:

# /opt/websockify/websockify -D 41337 --target-config=/opt/websockify/config.vnc --cert=<path_to_your_cert_file> --key=<path_to_your_key_file>

Also note you should use a different support script to autostart the service using SSL. To do so, download the appropriate script:

# wget https://raw.githubusercontent.com/abiquo/noVNC/master/websockify-ssl -O /etc/init.d/websockify
--2014-02-18 09:45:33--  https://raw2.github.com/abiquo/noVNC/master/websockify-ssl
Resolving raw2.github.com... 185.31.17.133
Connecting to raw2.github.com|185.31.17.133|:443... connected.
HTTP request sent, awaiting response... 200 OK
Length: 1554 (1,5K) [text/plain]
Saving to: `/etc/init.d/websockify'
100%[=====================================================================================================================>] 1.554       --.-K/s   in 0,001s  
2014-02-18 09:45:35 (1,12 MB/s) - `/etc/init.d/websockify' saved [1554/1554]

Now edit the script /etc/init.d/websockify and set the proper cert and key file by modifying the lines:

CERT_FILE=/etc/pki/tls/certs/localhost.cert
KEY_FILE=/etc/pki/tls/certs/localhost.key

To point to your cert and key files. Then just made the script executable and set it to start on boot:

# chmod +x /etc/init.d/websockify
# chkconfig websockify on
# service websockify start

Make sure websockify is not already running before issuing the "service websockify start" command.

Replacing TightVNC applet with noVNC in the client-premium webapp

Download the noVNC distribution package from:  http://kanaka.github.com/noVNC  

Note that this is the same package we used for the websockify

# wget http://github.com/kanaka/noVNC/tarball/master
# tar xvzf master
# ls -l
 total 716
 drwxrwxr-x 8 root root 4096 Apr 4 16:22 kanaka-noVNC-c2b1409
 -rw-r--r-- 1 root root 724988 Apr 5 04:21 master

To replace the tightvnc applet without changing any code in Abiquo, we will need to rename tightvnc to back up this file and replace the tightvnc file with the noVNC one.

ABIQUO 2.6 or below:
# cp -r kanaka-noVNC-c2b1409 /opt/abiquo/tomcat/webapps/client-premium/
# cd /opt/abiquo/tomcat/webapps/client-premium/

ABIQUO 3.0:
# cp -r kanaka-noVNC-c2b1409 /var/www/html/ui/lib/remoteaccess/
# cd /var/www/html/ui/lib/remoteaccess/
 
BOTH VERSIONS:
# mv tightvnc tightvnc.old
# mv kanaka-noVNC-c2b1409 tightvnc

Download the tarball with the required files for the next steps from github:

# wget http://github.com/abiquo/noVNC/tarball/master -O abiquo-novnc-files.tar.gz
# tar xzf abiquo-novnc-files.tar.gz
# ls -l 
total 48
drwxrwxrwt  9 root      root      4096 ene 17 13:08 .
drwxr-xr-x 24 root      root      4096 ene  3 10:42 ..
drwxrwxr-x  2 mcirauqui mcirauqui 4096 ene 17 13:00 abiquo-noVNC-e412837


# ls -l abiquo-noVNC-e412837/
total 40
drwxrwxr-x 2 mcirauqui mcirauqui 4096 ene 17 13:00 .
drwxrwxrwt 9 root      root      4096 ene 17 13:08 ..
-rw-rw-r-- 1 mcirauqui mcirauqui 7668 ene 17 13:00 md5.js
-rwxrwxr-x 1 mcirauqui mcirauqui 1958 ene 17 13:00 novnc_tokens.rb
-rw-rw-r-- 1 mcirauqui mcirauqui   42 ene 17 13:00 README.md
-rw-rw-r-- 1 mcirauqui mcirauqui 5815 ene 17 13:00 tightvnc.html
-rw-rw-r-- 1 mcirauqui mcirauqui 1723 ene 17 13:00 utf8_decode.js
-rw-rw-r-- 1 mcirauqui mcirauqui 2079 ene 17 13:00 utf8_encode.js

Note that the name of the extracted directory might change as new versions are released, as can the noVNC files. We will use the vnc_auto.html file from noVNC but with some changes. Place the tightvnc.html file under:

/opt/abiquo/tomcat/webapps/client-premium/tightvnc/ in Abiquo 2.6 and below

or

/var/www/html/ui/lib/remoteaccess/tightvnc/ in Abiquo 3.0

Now you will need to edit this file to suit your environment. Edit the file and change the following values to contain the websockify public IP and port the proxy will be listening on:

host = "8.8.8.100";
port = 41337;

...

...