diff --git a/public/__redirects b/public/__redirects index b2d9683c20cd636..e29aecff182a222 100644 --- a/public/__redirects +++ b/public/__redirects @@ -2121,6 +2121,7 @@ /cloudflare-one/connections/connect-networks/install-and-setup/tunnel-guide/ /cloudflare-one/connections/connect-networks/get-started/ 301 /cloudflare-one/connections/connect-networks/downloads/system-requirements/ /cloudflare-one/connections/connect-networks/configure-tunnels/tunnel-availability/system-requirements/ 301 /cloudflare-one/networks/connectors/cloudflare-tunnel/routing-to-tunnel/lb/ /cloudflare-one/networks/connectors/cloudflare-tunnel/routing-to-tunnel/public-load-balancers/ 301 +/cloudflare-one/tutorials/vnc-client-in-browser/ /cloudflare-one/networks/connectors/cloudflare-tunnel/use-cases/vnc-browser-rendering/ 301 /cloudflare-one/policies/data-loss-prevention/dlp-policies/payload-logging/ /cloudflare-one/policies/data-loss-prevention/dlp-policies/logging-options/#log-the-payload-of-matched-rules 301 /cloudflare-one/connections/connect-apps/configuration/private-networks/ /cloudflare-one/connections/connect-networks/private-net/ 301 /cloudflare-one/connections/connect-apps/install-and-setup/installation/ /cloudflare-one/connections/connect-networks/downloads/ 301 diff --git a/src/content/docs/cloudflare-one/access-controls/applications/non-http/browser-rendering.mdx b/src/content/docs/cloudflare-one/access-controls/applications/non-http/browser-rendering.mdx index d74fb3f82ffd638..b921360f97fb2a7 100644 --- a/src/content/docs/cloudflare-one/access-controls/applications/non-http/browser-rendering.mdx +++ b/src/content/docs/cloudflare-one/access-controls/applications/non-http/browser-rendering.mdx @@ -24,10 +24,9 @@ To turn on browser rendering for an SSH or VNC application: 1. In [Cloudflare One](https://one.dash.cloudflare.com), go to **Access controls** > **Applications**. 2. Locate the SSH or VNC application you created when [connecting the server to Cloudflare](/cloudflare-one/networks/connectors/cloudflare-tunnel/use-cases/ssh/). Select **Configure**. -3. In the **Policies** tab, ensure that only **Allow** or **Block** policies are present. **Bypass** and **Service Auth** are not supported for browser-rendered applications. -4. Go to **Advanced settings** > **Browser rendering settings**. -5. For **Browser rendering**, choose _SSH_ or _VNC_. -6. Select **Save application**. +3. In **Browser rendering settings**, set **Browser rendering** to _SSH_ or _VNC_. + +4. Select **Save application**. When users authenticate and visit the URL of the application, Cloudflare will render a terminal in their browser. diff --git a/src/content/docs/cloudflare-one/networks/connectors/cloudflare-tunnel/use-cases/rdp/rdp-browser.mdx b/src/content/docs/cloudflare-one/networks/connectors/cloudflare-tunnel/use-cases/rdp/rdp-browser.mdx index fe52976af92c4b9..37713219a4b541b 100644 --- a/src/content/docs/cloudflare-one/networks/connectors/cloudflare-tunnel/use-cases/rdp/rdp-browser.mdx +++ b/src/content/docs/cloudflare-one/networks/connectors/cloudflare-tunnel/use-cases/rdp/rdp-browser.mdx @@ -109,9 +109,8 @@ The DNS record does not need to point to an active destination IP address or hos 12. -:::note -Ensure that only **Allow** or **Block** policies are present. **Bypass** and **Service Auth** are not supported for browser-rendered applications. -::: + + 13. diff --git a/src/content/docs/cloudflare-one/networks/connectors/cloudflare-tunnel/use-cases/vnc-browser-rendering.mdx b/src/content/docs/cloudflare-one/networks/connectors/cloudflare-tunnel/use-cases/vnc-browser-rendering.mdx new file mode 100644 index 000000000000000..1b0aea41114fa50 --- /dev/null +++ b/src/content/docs/cloudflare-one/networks/connectors/cloudflare-tunnel/use-cases/vnc-browser-rendering.mdx @@ -0,0 +1,231 @@ +--- +pcx_content_type: how-to +title: Render a VNC client in the browser +sidebar: + order: 10 + label: VNC +--- + +import { Render } from "~/components"; + +A Virtual Network Computer (VNC) server provides users with remote access to a computer's desktop environment. Cloudflare can render a VNC terminal in the browser without any client-side software or configuration. + +Browser-rendered VNC requires connecting the VNC server to Cloudflare and routing traffic through a public hostname. To access the VNC server, users go to the public hostname URL and log in using their Cloudflare Access credentials. Cloudflare will apply your Access policies and, when a user is allowed, render a VNC client in their browser. + +:::note +There are a number of different VNC server versions, deployments, and instances. This guide uses TightVNC running an XFCE desktop, but browser-rendered VNC will work with most configurations. +::: + +## Prerequisites + +- An [active domain on Cloudflare](/fundamentals/manage-domains/add-site/). +- The domain uses either a [full setup](/dns/zone-setups/full-setup/) or a [partial (`CNAME`) setup](/dns/zone-setups/partial-setup/). + +## 1. Set up a VNC server + +For demonstration purposes, we will create a TightVNC server on an Ubuntu virtual machine (VM) hosted in Google Cloud Project (GCP). We will configure the VNC server to run XFCE, a lightweight desktop environment suitable for remote access. If you already have a VNC server installed, you can skip this step and [go to Step 2](#2-connect-the-server-to-cloudflare). + +1. Open a terminal window for your Ubuntu VM. + +2. Install XFCE and TightVNC by running the following command: + + ```sh + sudo apt update + sudo apt install xfce4 xfce4-goodies dbus-x11 tightvncserver -y + + ``` + + This command installs the desktop, some helpful utilities, and the VNC server software. + +3. To initialize the VNC server: + + a. Create a VNC server instance: + + ```sh + vncserver + ``` + + b. You will be prompted to set a password. This password will be used to connect to your VNC server. It is limited to 8 characters. + + TightVNC will now create configuration files and start a VNC session on display `:1` (which uses port `5901`). + + c. You will be asked if you want to create a view-only password. You can press `n` for no. + + d. Kill this initial session so that you can edit its configuration: + + ```sh + vncserver -kill :1 + ``` +4. Configure VNC to launch the XFCE desktop: + + a. Create a VNC configuration directory if it is missing: + + ```sh + mkdir -p ~/.vnc + ``` + + b. Open the `xstartup` file using a text editor. For example, + + ```sh + vim ~/.vnc/xstartup + ``` + + c. Update the file to the following configuration: + + ```bash + #!/bin/sh + unset SESSION_MANAGER + unset DBUS_SESSION_BUS_ADDRESS + startxfce4 + ``` + + d. Make the file executable: + + ```sh + chmod +x ~/.vnc/xstartup + ``` + +5. Start the VNC server again: + ```sh + vncserver -localhost :1 + ``` + + The `-localhost` flag ensures the VNC server only listens for connections from the VM itself, not from the public internet. Your VNC server is now running on port `5901`, but it is only accessible from `localhost` (`127.0.0.1`) inside the VM. + +6. (Recommended) Test the VNC server with an existing VNC client to verify any missing packages or configuration changes. For example, to test a VNC server hosted on GCP: + + a. Open a terminal on the client machine. + + b. Connect to the VNC server over SSH, forwarding your local port `5901` to the VNC server's listening port: + + ```sh + gcloud compute ssh [YOUR_VM_NAME] --zone=[YOUR_ZONE] -- -L 5901:localhost:5901 + ``` + + c. Open your preferred VNC viewer application. + + d. In the VNC viewer, connect to the address `localhost:5901` and enter your VNC server password. + + You should see the Ubuntu VM desktop. + +7. (Optional) Configure the VNC server to start on boot: + + a. Find the full path to the `vncserver` command: + + ```sh + which vncserver + ``` + ```sh output + /usr/bin/vncserver + ``` + b. Create a new service configuration file: + + ```sh + sudo vim /etc/systemd/system/vncserver@.service + ``` + + c. Copy and paste the following content. Replace `[YOUR_USERNAME]` with the VNC server user. If needed, update `/usr/bin/vncserver` to your `vncserver` path. + + ```toml + [Unit] + Description=Start TightVNC server at startup + After=syslog.target network.target + + [Service] + Type=forking + User=[YOUR_USERNAME] + WorkingDirectory=/home/[YOUR_USERNAME] + + PIDFile=/home/[YOUR_USERNAME]/.vnc/%H:%i.pid + + ExecStartPre=-/usr/bin/vncserver -kill :%i > /dev/null 2>&1 + ExecStart=/usr/bin/vncserver -localhost :%i + ExecStop=/usr/bin/vncserver -kill :%i + + [Install] + WantedBy=multi-user.target + ``` + + c. Reload `systemd` to read in the new service file: + + ```sh + sudo systemctl daemon-reload + ``` + + e. Enable the service to start at boot: + + ```sh + sudo systemctl enable vncserver@1.service + ``` + + The `1` variable configures the VNC service to use display `:1` (which runs on port `5901`). + + f. By default, `systemd` user services only run when that user is logged in. To allow your VNC service to start on boot (before you log in), enable user linger for your user: + + ```sh + sudo loginctl enable-linger [YOUR_USERNAME] + ``` + + g. Start the service: + + ```sh + sudo systemctl start vncserver@1.service + ``` + + h. Check its status: + + ```sh + sudo systemctl status vncserver@1.service + ``` + + The VNC server will now start automatically every time the VM boots. + +## 2. Connect the server to Cloudflare + +1. Create a Cloudflare Tunnel by following our [dashboard setup guide](/cloudflare-one/networks/connectors/cloudflare-tunnel/get-started/create-remote-tunnel/). + +2. Go to **Networks** > **Connectors**. Select your tunnel and select **Edit**. + +3. Select the **Published application routes** tab, then select **Add a published application route**. + +4. Choose a domain from the drop-down menu and specify any subdomain (for example, `vnc.example.com`). + +5. For **Service**, select _TCP_ and enter `localhost:<5901>`. If the VNC server is on a different machine from where you installed the tunnel, enter `:5901`. + + Replace `5901` with your VNC server's listening port. To determine your VNC listening port, run `sudo ss -lnpt` and look for `vnc` in the list of processes. + +6. Save the route. + +Your VNC server is now ready to accept inbound requests from Cloudflare. + +## 3. Create an Access application for VNC + +Create a Cloudflare Access application that users can access through their browser: + +1. In [Cloudflare One](https://one.dash.cloudflare.com), go to **Access controls** > **Applications**. + +2. Select **Add an application**. + +3. Select **Self-hosted**. + +4. Enter any name for the application. + +5. Select **Add public hostname** and enter your published application hostname (`vnc.example.com`). + +6. In **Browser rendering settings**, set **Browser rendering** to _VNC_. + +7. + + + +8. Save the application. + +## 4. Connect as a user + +To connect to the VNC server: + +1. Open a browser and go to the public hostname URL (for example, `https://vnc.example.com`). +2. Log in to Cloudflare Access with your configured identity provider. +3. Enter the VNC server password. + +You now have access to the remote desktop. diff --git a/src/content/docs/cloudflare-one/tutorials/vnc-client-in-browser.mdx b/src/content/docs/cloudflare-one/tutorials/vnc-client-in-browser.mdx deleted file mode 100644 index 0f1ee360fd411da..000000000000000 --- a/src/content/docs/cloudflare-one/tutorials/vnc-client-in-browser.mdx +++ /dev/null @@ -1,169 +0,0 @@ ---- -reviewed: 2022-07-15 -category: 🔐 Zero Trust -difficulty: Advanced -pcx_content_type: tutorial -title: Render a VNC client in browser -description: >- - Cloudflare can render a Virtual Network Computer (VNC) terminal in your browser without any client software or configuration required. Administrators can use Cloudflare Tunnel to connect a VNC host to Cloudflare's network. This tutorial focuses on configuring a Tight VNC server. ---- - -Cloudflare can render a Virtual Network Computer (VNC) terminal in your browser without any client software or configuration required. - -Administrators can use Cloudflare Tunnel to connect a VNC host to Cloudflare's network. Using Cloudflare Access, you can apply Zero Trust policies to determine who can access your VNC server. Cloudflare's network will then enforce the Zero Trust policies and, when a user is allowed, render the client in the browser. - -**This walkthrough covers how to:** - -- Install and run a Cloudflare Tunnel on a Linux virtual machine -- Install and configure VNC on a Linux virtual machine -- Build a Zero Trust policy to determine who can reach the host -- Render the VNC server in your browser - -**Time to complete:** - -10 minutes - -:::note - -There are a number of VNC versions, deployments, and instances. This tutorial focuses on configuring a Tight VNC server on an Azure hosted Linux virtual machine (VM). For help with other configurations, post your questions in our [community](https://community.cloudflare.com/t/feedback-for-browser-vnc/280619/3). - -::: - -## Before you start - -1. [Add a website to Cloudflare.](/fundamentals/manage-domains/add-site/) -2. [Enable Cloudflare Zero Trust on your account.](/cloudflare-one/setup/) -3. [Connect your identity provider to Cloudflare Zero Trust.](/cloudflare-one/integrations/identity-providers/) - ---- - -## Configure VNC on your virtual machine - -This section covers how to install a VNC server with TightVNC and the GNOME desktop environment. If you already have a VNC server installed, you can skip this step. - -1. Open a terminal window for your VM. - -2. To install the VNC software, run the following commands: - - ```sh - sudo apt-get update - - sudo apt-get install gnome-core gnome-panel ubuntu-gnome-desktop tightvncserver - ``` - -3. Once installed, you can create the VNC server instance with the following command: - - ```sh - sudo tightvncserver - ``` - -4. Select a password for the VNC server. This password will be used during login for your browser VNC server. - -5. Run the following command, which will take you to your VNC server configuration directory. - - ```sh - cd .vnc - ``` - -6. Open your `xstartup` file. - - ```sh - vim xstartup - ``` - -7. Update the file to the following configuration (this is for demonstration purposes — browser-based VNC will work with most configurations): - - ```txt - xsetroot -solid grey - x-terminal-emulator -geometry 80x24+10+10 -ls -title "$VNCDESKTOP Desktop" & - #x-window-manager & - - # Fix to make GNOME work - export XKL_XMODMAP_DISABLE=1 - /etc/X11/Xsession - - #gnome-session & - gnome-panel & - nautilus & - ``` - -8. To create your VNC server, run the following command: - - ```sh - vncserver - ``` - -At this point, you have a VNC server ready to test with browser-based VNC. We recommend performing a brief test with an existing VNC browser to verify any missing packages or configuration changes that might need to be made before continuing. Once your VNC server appears as desired, continue with your setup. - -## Configure Cloudflare Tunnel on your machine - -1. Follow [these instructions](/cloudflare-one/networks/connectors/cloudflare-tunnel/downloads/) to install `cloudflared`. - -2. Authenticate `cloudflared` with the command: - - ```sh - cloudflared tunnel login - ``` - -3. Create a Tunnel with the command: - - ```sh - cloudflared tunnel create - ``` - -4. Create a Tunnel configuration file with the command: - - ```sh - vim config.yml - ``` - -5. Add the following configuration to your configuration file. - - ```txt - tunnel: - ingress: - - hostname: vnc.kennyatx.com - service: tcp://localhost:5901 - - service: http_status:404 - ``` - - As you do that, replace `` with the domain you wish to use to expose your VNC server in the browser. Also, replace `5901` with the port your VNC server is running on. To get a list of ports, run `sudo ss -lnpt` and look for `VNC` to get the value that should be specified in your configuration file. - -6. [Route your Tunnel](/cloudflare-one/networks/connectors/cloudflare-tunnel/routing-to-tunnel/dns/) to your website. - -7. Run your Tunnel: - - ```sh - cloudflared tunnel --config path/config.yaml run - ``` - -8. Follow [this guide](/cloudflare-one/networks/connectors/cloudflare-tunnel/configure-tunnels/tunnel-with-firewall/) to open outbound connections for Cloudflare Tunnel if you have a firewall enabled. - -At this point you have a running VNC server and a Cloudflare Tunnel on your machine ready to accept inbound VNC requests. - -## Create a Cloudflare Access VNC application - -The last step is to create a Cloudflare Access application to run your VNC server in the Browser. - -1. In [Cloudflare One](https://one.dash.cloudflare.com), go to **Access controls** > **Applications**. - -2. Select **Add an application**. - -3. Select **Self-hosted**. - -4. Enter any name for the application. - -5. Select **Add public hostname** and set the domain to which you would like to expose the VNC server. - -6. In **Access policies**, add an Allow or Block policy. For example policies, refer to the [Access policies documentation](/cloudflare-one/access-controls/policies/#allow). - -:::note - -Service Auth and Bypass policies are not supported for browser-based VNC applications. -::: - -7. In **Advanced settings**, set **Browser rendering** to _VNC_. - -Users will see a login screen with your configured identity providers. After successful authentication, they may be prompted to enter the VNC server's password. - -You can define granular access controls across each individual VNC instance. diff --git a/src/content/partials/cloudflare-one/access/self-hosted-app/browser-rendering-policies.mdx b/src/content/partials/cloudflare-one/access/self-hosted-app/browser-rendering-policies.mdx new file mode 100644 index 000000000000000..abb27fd686a9a68 --- /dev/null +++ b/src/content/partials/cloudflare-one/access/self-hosted-app/browser-rendering-policies.mdx @@ -0,0 +1,8 @@ +--- +{} + +--- + +:::note +Ensure that only **Allow** or **Block** policies are present. **Bypass** and **Service Auth** are not supported for browser-rendered applications. +::: \ No newline at end of file