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.

  1. Run a feature spec on master
    • bin/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
  1. Checkout this branch
  2. gdk stop
  3. gdk start
  4. Run a feature spec:
    • bin/rspec ee/spec/features/remote_development/workspaces_dropdown_group_spec.rb[1:1:1:1:1:1]
    • It passes
  5. (Optional) Run gdk kill && gdk start if you are seeing Vite Ruby can't find javascripts/entrypoints/main.js in the manifests.
Edited by Peter Leitzen

Merge request reports

Loading