Enable multi-domain architecture in self-managed instances

Issue: [Web IDE] Use .cdn.web-ide.gitlab-static.net to... (#537406 - closed)

What does this MR do and why?

It enables the multi-domain architecture for self-managed instances. The multi-domain architecture relies on the cdn.web-ide.gitlab-static.net assets host to isolate the Web IDE VSCode workbench using the web browser's same-origin policy. This architecture is already available on production in gitlab.com and this merge request broadens its usage to self-managed instances when they can connect to cdn.web-ide.gitlab-static.net.

We are enabling this architecture in self-managed instances to ensure that 3rd-party code executed in the Web IDE is sandboxed and can't access a user's account.

References

• Project epic: [Web IDE] Host the Web IDE on a new domain or s... (&11972)
• Web IDE project relevant MR: gitlab-web-ide!501 (merged)

Screenshots or screen recordings

This Merge Request adds a link to the Extension Marketplace administration settings docs for additional information about the cdn.web-ide.gitlab-static.net requirement.

Before	After

How to set up and validate locally

notice You should enable HTTPS in the GDK in order to test the Web IDE.

1. Run yarn install to install the new version of the @gitlab/web-ide package.

2. Reload the Web IDE. When cdn.web-ide.gitlab-static.net is reachable:

   1. The Extension Marketplace is enabled:

      

   2. The Web IDE iframe points to cdn.web-ide.gitlab-static.net to load the Web IDE VSCode Workbench.

      

3. Apply the following patch to break access to cdn.web-ide.gitlab-static.net :

   diff --git a/app/assets/javascripts/ide/lib/gitlab_web_ide/get_web_ide_workbench_config.js b/app/assets/javascripts/ide/lib/gitlab_web_ide/get_web_ide_workbench_config.js
   index a2651a8966f0..0991af6f5dbf 100644
   --- a/app/assets/javascripts/ide/lib/gitlab_web_ide/get_web_ide_workbench_config.js
   +++ b/app/assets/javascripts/ide/lib/gitlab_web_ide/get_web_ide_workbench_config.js
   @@ -6,7 +6,7 @@ import { getGitLabUrl } from './get_gitlab_url';
    const buildExtensionHostUrl = () => {
      const workbenchVersion = packageJSON.version;
    
   -  return `https://{{uuid}}.cdn.web-ide.gitlab-static.net/gitlab-web-ide-vscode-workbench-${workbenchVersion}/vscode`;
   +  return `https://{{uuid}}.staging.cdn.web-ide.gitlab-static.net/gitlab-web-ide-vscode-workbench-${workbenchVersion}/vscode`;
    };
    
    /**
   @@ -21,7 +21,7 @@ export const buildWorkbenchUrl = async () => {
      const digestShort = digest.slice(0, 30);
      const workbenchVersion = packageJSON.version;
    
   -  return `https://workbench-${digestShort}.cdn.web-ide.gitlab-static.net/gitlab-web-ide-vscode-workbench-${workbenchVersion}`;
   +  return `https://workbench-${digestShort}.staging.cdn.web-ide.gitlab-static.net/gitlab-web-ide-vscode-workbench-${workbenchVersion}`;
    };
    
    /**

4. Reload the Web IDE. When cdn.web-ide.gitlab-static.net is not reachable:

   1. The Extension Marketplace should be disabled.

      

   2. The Web IDE iframe points to the GitLab instance to load the Web IDE VSCode Workbench.

      

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.