How to access VNC remote desktop in web browser

Last updated on November 23, 2020 by Dan Nanni

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 an 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 49+, Firefox 44+, Safari 11+, iOS Safari 11+, Opera 36+ and Edge 79+. If your browser does not have native WebSockets support, you can use web-socket-js, which is included in noVNC package.

Install noVNC on Linux

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

$ git clone https://github.com/novnc/noVNC.git

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.

Support Xmodulo

This website is made possible by minimal ads and your gracious donation via PayPal or credit card

Please note that this article is published by Xmodulo.com under a Creative Commons Attribution-ShareAlike 3.0 Unported License. If you would like to use the whole or any part of this article, you need to cite this web page at Xmodulo.com as the original source.