Content-Security-Policy header does not respect CUSTOM_HOSTNAME

Description of issue

I use a custom hostname when running the GCK: gdk.test

I get a number of warnings like this when I load a page:

Content Security Policy: The page’s settings blocked the loading of a resource at http://gdk.test:3808/sockjs-node/info?t=1598535708753 (“connect-src”).

Taking a closer look at the response headers, it looks like the page is being served under the assumption the hostname is localhost:

Content-Security-Policy: connect-src 'self' http://localhost:* ws://localhost:* wss://localhost:*; default-src 'self'; frame-ancestors 'self'; frame-src 'self' https://www.google.com/recaptcha/ https://www.recaptcha.net/ https://content.googleapis.com https://content-compute.googleapis.com https://content-cloudbilling.googleapis.com https://content-cloudresourcemanager.googleapis.com; img-src * data: blob:; object-src 'none'; script-src 'self' 'unsafe-eval' http://localhost:* https://www.google.com/recaptcha/ https://www.recaptcha.net/ https://www.gstatic.com/recaptcha/ https://apis.google.com 'nonce-xDNgbw8J9P0+026zTXeQbw=='; style-src 'self' 'unsafe-inline'; worker-src 'self' blob:

Because of this, Webpack can't listen for livereloading on port 3808.

Workaround

Right now I simply disable security.csp.enable in about:config in Firefox, which stops port 3808 from being blocked.

Disclaimer

I'm not sure if this is a problem specific to the GCK or our codebase in general. Although I haven't experienced this when running the GDK 🤔