Run Ubuntu Remote Desktop in Browser with noVNC – No Client Installation Needed

What is noVNC?

noVNC is a pure JavaScript VNC client that runs in any HTML5‑compatible browser, requiring no plugins or separate client software.

Architecture – Three Layers, Four Stages

The core stack combines the RFB protocol, WebSocket transport and the HTML5 Canvas API. It is organized into three layers:

Protocol parsing layer : Decodes and encodes the RFB (VNC) protocol in JavaScript.

WebSocket transport layer : Provides bidirectional real‑time communication between the browser and the server.

Rendering engine layer : Renders the remote screen onto a Canvas element.

Why websockify?

Browsers speak only WebSocket, while VNC servers use raw TCP. websockify translates WebSocket traffic to TCP.

browser <—WebSocket—> websockify <—TCP—> VNC Server
:6080        forward          :5901

Connection stages

1. Handshake : Browser establishes a WebSocket connection and negotiates VNC version and security.

2. Initialization : Desktop resolution, pixel format and other parameters are exchanged.

3. Interaction : Keyboard/mouse events and screen updates are transmitted in real time.

4. Disconnect : Resources are released and the connection is closed.

Step 1 – Install VNC server

Install TigerVNC and a lightweight desktop environment (XFCE is recommended).

# Install TigerVNC server and XFCE
sudo apt update
sudo apt install -y tigervnc-standalone-server tigervnc-common xfce4 xfce4-goodies
# Set VNC password (6‑8 characters)
vncpasswd
# Create startup script
mkdir -p ~/.vnc
cat > ~/.vnc/xstartup <<'EOF'
#!/bin/bash
unset SESSION_MANAGER
unset DBUS_SESSION_BUS_ADDRESS
exec startxfce4
EOF
chmod +x ~/.vnc/xstartup
# Start VNC server on display :1 (1280x720, 24‑bit)
vncserver :1 -geometry 1280x720 -depth 24
vncserver -list   # shows :1 → port 5901

Step 2 – Install noVNC

Install dependencies, websockify and clone the noVNC repository.

# Install required packages
sudo apt install -y git python3 python3-pip
# Install websockify (pip provides the latest version)
sudo pip3 install websockify
# Clone noVNC repository
git clone https://github.com/novnc/noVNC.git /opt/noVNC
cd /opt/noVNC
# Launch noVNC pointing to the local VNC server
/opt/noVNC/utils/launch.sh --vnc localhost:5901

The script prints noVNC started: http://localhost:6080/vnc.html. Open that URL in a browser to view the remote desktop.

Step 3 – Enable SSL/TLS (recommended)

By default the connection uses plain HTTP, exposing the VNC password and screen. Generate a self‑signed certificate and start noVNC with the --cert option.

# Generate a 4096‑bit RSA certificate valid for 365 days
openssl req -x509 -nodes -newkey rsa:4096 \
  -keyout /etc/ssl/novnc.pem -out /etc/ssl/novnc.pem -days 365
# Start noVNC with TLS
/opt/noVNC/utils/launch.sh --vnc localhost:5901 --cert /etc/ssl/novnc.pem

Access via https://YOUR_IP:6080/vnc.html. Browsers will warn about the self‑signed certificate; in production use a trusted certificate (e.g., Let’s Encrypt).

Step 4 – Systemd auto‑start

Create a systemd service so that noVNC starts automatically after boot.

sudo tee /etc/systemd/system/novnc.service > /dev/null <<'EOF'
[Unit]
Description=noVNC Remote Desktop Service
After=network.target vncserver.service

[Service]
Type=simple
ExecStart=/usr/local/bin/websockify --web /opt/noVNC 6080 localhost:5901
Restart=on-failure
RestartSec=5

[Install]
WantedBy=multi-user.target
EOF

sudo systemctl daemon-reload
sudo systemctl enable novnc
sudo systemctl start novnc
sudo systemctl status novnc

For SSL, modify ExecStart to include --cert /etc/ssl/novnc.pem:

ExecStart=/usr/local/bin/websockify --web /opt/noVNC --cert /etc/ssl/novnc.pem 6080 localhost:5901

Step 5 – Multi‑user & firewall configuration

Open the noVNC port (default 6080) in the firewall but keep VNC ports internal.

sudo ufw allow 6080/tcp
# Do NOT expose 5901 directly; let noVNC proxy it.

Example multi‑user mapping (each user runs an independent VNC instance with its own noVNC port):

user1: VNC :1 (5901) → noVNC 6081

user2: VNC :2 (5902) → noVNC 6082

user3: VNC :3 (5903) → noVNC 6083

Start a separate websockify instance for each mapping, e.g.:

websockify --web /opt/noVNC 6082 localhost:5902

Practical tips

Mobile browsers work – pinch‑to‑zoom, long‑press for right‑click.

Clipboard sync via the left panel (Clipboard → copy/paste between local and remote).

Send Ctrl+Alt+Del with the dedicated button.

Fullscreen mode: click "Fullscreen" or press F11 .

Performance tuning – adjust qualityLevel and compressionLevel based on network speed:

High‑speed LAN: quality 9, compression 2 (low compression, high quality).

Typical network: quality 7, compression 5 (balanced).

Low‑speed network: quality 4, compression 8 (high compression, lower quality).

FAQ

Q: How does noVNC differ from traditional VNC clients (RealVNC, TigerVNC Viewer)?

A: noVNC runs in the browser, so no client software is installed. It lacks file‑transfer support but provides basic desktop control and clipboard sync.

Q: I get a black screen after connecting.

A: The VNC server likely did not start a desktop environment. Verify that ~/.vnc/xstartup contains exec startxfce4 (or another desktop command) and restart the server with vncserver -kill :1 && vncserver :1.

Q: Password is correct but authentication fails.

A: Check the VNC server’s security type. TigerVNC defaults to VNC authentication; if it was changed to "None" or TLS, adjust the noVNC connection parameters accordingly.

Q: Remote access is slow over the internet.

A: Reduce the resolution (e.g., -geometry 1024x600), lower the quality URL parameter, or use a Cloudflare Tunnel for acceleration and security.

Q: Can I connect to multiple VNC servers simultaneously?

A: Yes. Run multiple websockify instances on different ports, each pointing to a different VNC server, or use the --target-config option with a configuration file.