Skip to content

Spike (do not merge): Web IDE airgapped support

What does this MR do and why?

It is a spike to identify a solution to fix the Web IDE on GitLab Self-Managed instances that run on air-gapped environments. The Web IDE depends on an external assets host (https://*.cdn.web-ide.gitlab-static.net) that is unreachable from air-gapped environments. The goal of the external assets host is providing VSCode a wildcard domain that it can use to isolate VSCode Extensions in the web browser by sandboxing them in an iframe using the Same-Origin policy.

Since https://*.cdn.web-ide.gitlab-static.net is unreachable on air-gapped environments, several Web IDE features such as Duo Chat (classic), Markdown Preview, and displaying images don't work in these environments.

Solution

The solution proposed by this Merge Request is using the GitLab instance itself as the external assets host. The GitLab Instance administrator follows these steps to set it up:

  1. Set up a wildcard domain (including TLS certificates) in their domain registrar of preference. I assume that on air-gapped environments, this is an internal DNS resolver.

  2. Adds a rule to the GitLab instance's reverse proxy server (NGINX, etc.) to accept traffic from that wildcard domain.

  3. Go to Admin -> Settings -> General -> Web IDE and enters the custom domain:

    web-ide-general-settings.png

  4. Restart GitLab.

  5. Use the Web IDE 🎉 .

How is it implemented?

  1. The implementation stores the custom extension host domain in the ApplicationSettings model. Specifically, in an existing JSON schema that contains properties related to the Web IDE Extension Marketplace.
  2. It provides a form to edit the application setting in the Admin UI.
  3. It adds the custom extension host domain to the Rails.application.config.hosts array.
  4. It sets up CORS rules based on the application setting rather than a hardcoded value.
  5. It modifies Workhorse static files server to obtain CORS rules from the GitLab CORS middleware rather than using hardcoded values.

How to test locally?

  1. Use dnsmasq to set up a local DNS resolver for *.test domain using these instructions.

  2. Use mkcert to generate a TLS certificate for the domain *.web-ide.test.

  3. In your GDK, add the following configuration to the NGINX conf file located [gdk-dir]/conf/nginx.conf)

    server {
        listen *.web-ide.test:3443 ssl;
    
        ssl_certificate /Users/enrique/gitlab/gdk/web-ide-cert.pem;
        ssl_certificate_key /Users/enrique/gitlab/gdk/web-ide-cert-key.pem;
    
        proxy_set_header    Host                $http_host;
        proxy_set_header    X-Real-IP           $remote_addr;
        proxy_set_header    X-Forwarded-For     $proxy_add_x_forwarded_for;
        proxy_set_header    X-Forwarded-Proto   $scheme;
        proxy_set_header    Upgrade             $http_upgrade;
        proxy_set_header    Connection          $connection_upgrade;
    
        proxy_http_version 1.1;
        proxy_read_timeout 300;
    
        location /assets/ {
          proxy_pass https://gitlab-workhorse;
        }
      }
  4. Compile workhorse cd workhorse && make.

  5. Run yarn install.

  6. Go to Admin -> Settings -> General -> Web IDE and set the domain + port web-ide.test:3443.

  7. Restart services gdk rails-web gitlab-workhorse nginx.

  8. Open the Web IDE. Features such as Duo Chat and Markdown preview should work as expected and all assets HTTP requests go to the domain .web-ide.test.

Edited by Enrique Alcántara

Merge request reports

Loading