How to host a sandboxed web browser with docker

Here are the commands to install Docker, and docker-compose here at the start of 2023

Update the apt package index

sudo apt-get update

Install Docker’s dependencies

sudo apt-get install ca-certificates curl gnupg

Add Docker’s official GPG key

sudo mkdir -m 0755 -p /etc/apt/keyrings
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg

Add Docker’s stable repository to your system’s apt sources list

echo \
  "deb [arch="$(dpkg --print-architecture)" signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/ubuntu \
  "$(. /etc/os-release && echo "$VERSION_CODENAME")" stable" | \
  sudo tee /etc/apt/sources.list.d/docker.list > /dev/null

Update the apt package index (again)

sudo apt update

Install Docker

sudo apt-get install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin

Verify that Docker is installed correctly

docker --version

Verify that Docker Compose is installed correctly

docker compose --version

now that we have docker installed it is time to start making the files that are needed to bulid the webpage and and the web browsers

to do this we first need to make a folder

mkdir webbrowser

no we need to make a file called docker-compose.yaml

nano docker-compose.yaml

version: '3'
services:

  notes:
      image: nginx:latest
      ports:
        - "80:80"
      volumes:
        - ./nginx.conf:/etc/nginx/conf.d/default.conf
        - ./:/usr/share/nginx/html/

  firefox:
    image: kasmweb/firefox:1.13.0-rolling
    ports:
      - "4000:6901"
    environment:
      - VNC_PW=test
    shm_size: 512m

  chrome:
    image: kasmweb/chrome:1.13.0-rolling
    ports:
      - "4001:6901"
    environment:
      - VNC_PW=test
    shm_size: 512m

  brave:
    image: kasmweb/brave:1.13.0-rolling
    ports:
      - "4002:6901"
    environment:
      - VNC_PW=test
    shm_size: 512m

  tor-browser:
    image: kasmweb/tor-browser:1.13.0-rolling
    ports:
      - "4003:6901"
    environment:
      - VNC_PW=test
    shm_size: 512m

  edge:
    image: kasmweb/edge:1.13.0-rolling
    ports:
      - "4004:6901"
    environment:
      - VNC_PW=test
    shm_size: 512m

  chromium:
    image: docker pull kasmweb/chromium:1.13.0-rolling
    ports:
      - "4005:6901"
    environment:
      - VNC_PW=test
    shm_size: 512m

  firefox:
    image: kasmweb/firefox:1.13.0-rolling
    ports:
      - "4000:6901"
    environment:
      - VNC_PW=test
    shm_size: 512m

  chrome:
    image: kasmweb/chrome:1.13.0-rolling
    ports:
      - "4001:6901"
    environment:
      - VNC_PW=test
    shm_size: 512m

  brave:
    image: kasmweb/brave:1.13.0-rolling
    ports:
      - "4002:6901"
    environment:
      - VNC_PW=test
    shm_size: 512m

  tor-browser:
    image: kasmweb/tor-browser:1.13.0-rolling
    ports:
      - "4003:6901"
    environment:
      - VNC_PW=test
    shm_size: 512m

  edge:
    image: kasmweb/edge:1.13.0-rolling
    ports:
      - "4004:6901"
    environment:
      - VNC_PW=test
    shm_size: 512m

  chromium:
    image: kasmweb/chromium:1.13.0-rolling
    ports:
      - "4005:6901"
    environment:
      - VNC_PW=test
    shm_size: 512m

press control x to save the file

now we need to make a config file for nginx to host the notes page

nano nginx.conf

server {
    listen 80;

    location / {
        root /usr/share/nginx/html;
        index index.html;
    }
}

last we need to wright the html for the notes page in a file names index.html

nano index.html

<!DOCTYPE html>
<html>
<head>
	<title>Testing Browsers</title>
</head>
<body>
	<header>
		<h1>Testing Browsers</h1>
	</header>
	<article>
		<h2>username = kasm_user</h2>
		<h2>password = test</h2>
		<p>you will need to use https:// infront of all ip addres and ports</p>
	</article>
	<article>
		<h2>firefox</h2>
		<p>port:4000</p>
	</article>
	<article>
		<h2>chrome</h2>
		<p>port:4001</p>
	</article>
	<article>
		<h2>brave</h2>
		<p>port:4002</p>
	</article>
	<article>
		<h2>tor-browser</h2>
		<p>port:4003</p>
	</article>
	<article>
		<h2>edge</h2>
		<p>port:4004</p>
	</article>
	<article>
		<h2>chromium</h2>
		<p>port:4005</p>
	</article>
	<footer>
	</footer>
</body>
</html>

now that you have all the files made it is time to start the project up

docker-compose up -d

to go to your webbrowser and enter the server ip address and the port of the browser that you are looking to test with

https://[server ip]:[port]

https://youtu.be/IoCxnlkAPwI

Leave a Reply Cancel reply