Fix Vite HMR Content Security Policy rules
What does this MR do and why?
Previously the Vite HMR Content Security Policy rules would
assume that NGINX were in the loop: the allowed hostname
would be the GitLab hostname + /vite-dev. However, for
users running without NGINX, the browser might try to access
the HMR host directly via localhost or 127.0.0.1, which would
not be permitted by the current rules.
We fix this by using the HMR host set in the Vite GDK helper using the
VITE_HMR_HTTP_URL and VITE_HMR_WS_URL environment variables set
there. We need both HTTP and Websocket URLs because Vite will ping the
HTTP URL if the Websocket becomes unreachable.
How to verify locally?
Prerequisite: Configure your GDK to use a named host.
- Run a feature spec on
masterbin/rspec ee/spec/features/remote_development/workspaces_dropdown_group_spec.rb[1:1:1:1:1:1]- See errors
❌ like
3.2) Failure/Error: raise JSConsoleError, message
JSConsoleError:
Unexpected browser console output:
http://127.0.0.1:38361/vite-dev/@fs/home/peter/devel/gitlab/gdk/gitlab/tmp/cache/vite/deps/chunk-M3CHZ5CX.js?v=c89f9145 76:16 "[@gitlab/ui] The following translations have not been given, so will fall back to their default US English strings:"
https://www.gravatar.com/avatar/6dbc6cbc2beab4e357f8a479c870de0f3f80ac18237dd1dd6295771efe0fb2ac?s=80&d=identicon - Failed to load resource: net::ERR_SOCKET_NOT_CONNECTED
http://127.0.0.1:38361/test-group/test-project/-/blob/master/.devfile.yaml - Access to XMLHttpRequest at 'http://localhost/com.snowplowanalytics.snowplow/tp2' from origin 'http://127.0.0.1:38361' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
http://localhost/com.snowplowanalytics.snowplow/tp2 - Failed to load resource: net::ERR_FAILED
http://127.0.0.1:38361/vite-dev/@fs/home/peter/devel/gitlab/gdk/gitlab/tmp/cache/vite/deps/chunk-QACCEI5M.js?v=c89f9145 6233:18 "[Vue warn]: Failed to resolve async component: () =>\n import(\n /* webpackChunkName: 'statusModalBundle' */ \"/vite-dev/javascripts/set_status_modal/set_status_modal_wrapper.vue\"\n )\nReason: TypeError: Failed to fetch dynamically imported module: http://127.0.0.1:38361/vite-dev/javascripts/set_status_modal/set_status_modal_wrapper.vue"
http://127.0.0.1:38361/test-group/test-project/-/blob/master/.devfile.yaml 0:0 Uncaught TypeError: Failed to fetch dynamically imported module: http:…ets/javascripts/pages/projects/blob/show/index.js
- Checkout this branch
gdk stopgdk start- Run a feature spec:
bin/rspec ee/spec/features/remote_development/workspaces_dropdown_group_spec.rb[1:1:1:1:1:1]- It passes
✅
- (Optional) Run
gdk kill && gdk start☠ if you are seeingVite Ruby can't find javascripts/entrypoints/main.js in the manifests.
Edited by Peter Leitzen