Fix CSP behind reverse proxy

[jsjoeio]

What's the problem I'm solving?

With the latest changes to use the upstream server in code-server, we're now running into Content-Security-Policy issues with our reverse proxy. The specific code we're talking about lives here.

When using a reverse proxy (i.e. Caddy/NGINX), the update endpoint is incorrect because it has the wrong base path and protocol.

What are some ways to go about it?

The most ideal way to solve this is to use relative endpoints. This way, code-server doesn't care about the base path or protocol. It only knows and uses relative paths.

How will things change/what is the need for maintenance?

I am not sure if there is historical context I may be missing which would explain why we didn't use a relative path from the start (or rather why upstream didn't). Patching this in vscode means it's something we'll need to keep an eye on as we continue staying in line with upstream.

I can't imagine this introducing any breaking changes but it could potentially break in specific environments if they don't support using relative paths for some reason 🤔 (though none specifically come to mind).

How to reproduce

Asher outlined steps below to reproduce this issue locally. To do so, follow these steps:

1. install Caddy (brew install caddy)
2. start code-server locally with yarn watch
3. serve it at as base path like /code with Caddy

http://localhost:8082/code/* {
	uri strip_prefix /code
	reverse_proxy 127.0.0.1:8080
}

4. navigate to http://localhost:8082/code/ (trailing slash is important!)
5. observe the update endpoint error in the browser console OR see the Request URL in the network tab (look for a request to http://localhost:8082/update/check)

Content Security Policy: The page’s settings blocked the loading of a resource at http://localhost:8080/update/check (“connect-src”).

Expected

It makes a request to the correct URL: http://localhost:8082/code/update/check

Actual

It makes a request to the wrong URL: http://localhost:8082/update/check (missing /code)

Investigation Notes

Based on what I can tell, this is the line we need to change:

return new URL(path.join('/', pathPrefix, pathname), remoteAuthority);

Notice the hard-coded '/': that assumes we're always serving from the root but if we're using a reverse proxy and serving from a path like /code then this doesn't return the correct URL.

[code-asher]

To test:

1. Spin up NGINX/Caddy/etc
2. Serve code-server at a base path like /code
3. Observe the update endpoint error

Here is an example using Caddy off localhost:

Content Security Policy: The page’s settings blocked the loading of a resource at http://localhost:8080/update/check (“connect-src”).

In my case the resource should be https://localhost:8080/code/update/check (both proto and path are incorrect).

[code-asher]

Another example, using NGINX behind a dev URL:

Content Security Policy: The page’s settings blocked the loading of a resource at http://cs--ash.stable.cdr.dev/update/check (“connect-src”).
Content Security Policy: The page’s settings blocked the loading of a resource at http://cs--ash.stable.cdr.dev/static/out/vs/workbench/services/extensions/worker/httpsWebWorkerExtensionHostIframe.html?&vscodeWebWorkerExtHostId=98779a8f-ef79-4631-9d57-68d802966a18 (“frame-src”).

Should be https://cs--ash.stable.cdr.dev/code

[jsjoeio]

@code-asher check out vscode/src/vs/workbench/browser/client.ts and look at L125. Asher will send Caddy file for testing.

[jsjoeio]

http://localhost:8080/code/* {
  uri strip_prefix /code
  reverse_proxy 127.0.0.1:8082
}

Caddy file

caddy run -config /path/to/Caddyfile

Browse localhost:8080/code/