Draft: Fix local-private-network access in web ide
What does this MR do and why?
Web views are broken in the Web IDE when a GitLab instance is hosted in a private network (e.g. the GDK) and web views are served from .cdn.web-ide.gitlab-static.net. This only happens in Google Chrome and it happens because the most recent version of Chrome enforces a local network access policy that requires iframes to declare permissions to obtain resources from a private network.
This is an integration test MR to help test the bug fix implemented in the GitLab VSCode Fork and the GitLab Web IDE projects.
References
- Issue Support new local-network-access permissions po... (#582805).
- VSCode upstream fix: https://github.com/microsoft/vscode/pull/278185.
- Chrome development blog: https://developer.chrome.com/blog/local-network-access.
- Independent blog post: https://www.paulserban.eu/blog/post/demystifying-nested-iframes-and-the-allowlocal-network-access-attribute-in-chrome/.
- Web IDE project MR: gitlab-web-ide!589 (merged).
- GitLab VSCode Fork MR: gitlab-web-ide-vscode-fork!134 (merged).
Screenshots or screen recordings
| Before | After |
|---|---|
|
|
How to set up and validate locally
- After checking out this branch, run
yarn installin your local environment. - Open the Web IDE's extension host settings https://gdk.test:3443/admin/application_settings/general#js-web-ide-settings.
- Set the domain: staging.cdn.web-ide.gitlab-static.net.
- Open a project in the Web IDE (any project).
- I recommend cleaning the web browser cache or opening Chrome's developer tools and disabling cache in the network tab.
- As soon as the Web IDE opens, Google Chrome should request you local network access permissions. If you allow access to local network, the Web IDE should work as expected and the Extension Marketplace will be enabled. Otherwise, the Web IDE will display that the external extension is not available and that the Extension Marketplace is disabled as a result.
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.
Edited by Enrique Alcántara