Extensions using web views not working with self signed certificate

[jneuhauser]

Examples of functionality that uses web views:

• Markdown preview
• SQL browser

Is there an existing issue for this?

• I have searched the existing issues

OS/Web Information

• Web Browser: Chrome Version 106.0.5249.119 (Offizieller Build) (64-Bit)
• Local OS: Windows 10 21H1
• Remote OS: Debian 11
• Remote Architecture: amd64
• code-server --version: 4.7.0

Steps to Reproduce

1. start code-server with cert: true in config.json
   https://coder.com/docs/code-server/latest/guide#using-a-self-signed-certificate
2. open code-server with https://IP:PORT
3. accept self signed certificate
4. open or create a *.md file
5. Hit the preview button on the top right

Expected

The preview of the Markdown document should be shown.

Actual

The preview windows remains empty.

Logs

code-server --verbose
Nothing that is related to this error/bug.

Code-Server Webview

Error loading webview: Error: Could not register service workers: SecurityError: Failed to register a ServiceWorker for scope ('https://192.168.107.129:8080/stable-784b0177c56c607789f9638da7b6bf3230d47a8c/static/out/vs/workbench/contrib/webview/browser/pre/') with script ('https://192.168.107.129:8080/stable-784b0177c56c607789f9638da7b6bf3230d47a8c/static/out/vs/workbench/contrib/webview/browser/pre/service-worker.js?v=4&vscode-resource-base-authority=vscode-resource.vscode-cdn.net&remoteAuthority=192.168.107.129:8080'): An SSL certificate error occurred when fetching the script..

Screenshot/Video

Does this issue happen in VS Code or GitHub Codespaces?

• I cannot reproduce this in VS Code.
• I cannot reproduce this in GitHub Codespaces.

Are you accessing code-server over HTTPS?

• I am using HTTPS.

Notes

This happens only on my local deployment with the self signed certificate.
My external deployment with a lets encrypt certificate does work as expected.

[jsjoeio]

@code-asher is this something we can fix or is this an issue outside code-server? I can't tell

[code-asher]

I believe this is because Chrome always rejects invalid certificates for service workers even if you have accepted the prompt that warns you about the certificate. I think there are other browsers that will allow it (like Firefox, for now anyway). So it is not something we can fix unfortunately. If this is just temporary for testing Chrome could be launched with --ignore-certificate-errors. Otherwise the self-signed certificate will need to be made trusted. This could be done on the system level or in Chrome (there should be a place to import certificates somewhere).

[code-asher]

In the docs we recommend mkcert. Wonder if we can deprecate code-server's built-in certificate generator for that or at least add a warning to the output.

[jsjoeio]

In the docs we recommend mkcert. Wonder if we can deprecate code-server's built-in certificate generator for that or at least add a warning to the output.

Yeah that might be a good move overall. It would lead to less frustration IMO.

[neurorepro]

Hello, this is actually happening for all the extensions I use and tested: Markdown preview, git history, git graph, and another one i can't remember.

These extensions are essential in my case (course based on code server, which i find super useful) so any solution on how to fix this problem would be very helpful.

Meanwhile even a code server version someone could rollback too (for which extensions are working) could be useful for those facing this case i believe

[code-asher]

Yeah this will affect any extension that uses web views since Code uses iframes and service workers for web views. I think web views have always used service workers in which case there is no version of code-server that will work but someone will have to test older versions to see if that is true. Maybe there is an old version that did not use service workers. To summarize the remaining fixes: 1. Use a certificate signed by an authority (Let's Encrypt, etc). 2. Add the certificate to the system certificate store. 3. Add the certificate to the browser certificate store. 4. Use a browser that does not have the same restrictions. 5. Roll back to an older browser version. 6. Bypass certificate errors with a flag to the browser.

[neurorepro]

So what would be the steps to do for a server once it is configured with Let's Encrypt? Just set yes to use cert in code server configuration file ? Anything else ?

[code-asher]

There are two main options for using a Let's Encrypt certificate: 1. Use a reverse proxy like NGINX or Caddy to handle the certificate. Here are guides for setting that up and automating certificate renewal: https://github.com/coder/code-server/blob/main/docs/guide.md#using-lets-encrypt-with-caddy https://github.com/coder/code-server/blob/main/docs/guide.md#using-lets-encrypt-with-nginx If you are using a reverse proxy set `cert` to false in code-server (or remove the flag). 2. To have code-server directly handle the cert set code-server's `cert` flag to the path of the Let's Encrypt cert and `cert-key` to the key for the certificate. The code-server invocation should look something like this: ``` code-server --cert /path/to/cert.crt --cert-key /path/to/key.pem ```

[jneuhauser]

Thanks for your inputs.

So to use code-server with working service workers we need a trusted certificate?
Is it possible to get service workers working with http on chrome?

[code-asher]

Yup, that is correct. Browsers will only allow service workers in "secure contexts" which includes localhost and https. https://www.w3.org/TR/service-workers/#secure-context https://html.spec.whatwg.org/multipage/webappapis.html#secure-context Since it includes localhost one way around having to generate a valid certificate is to use SSH forwarding if that is available to you. https://github.com/coder/code-server/blob/ba44f6cc979de60c6de180dc2f4ee8e0a206d43e/docs/guide.md#port-forwarding-via-ssh I think you can force service workers to run on http by setting `chrome://flags/#unsafely-treat-insecure-origin-as-secure` but I have not tried this. https://stackoverflow.com/questions/40696280/unsafely-treat-insecure-origin-as-secure-flag-is-not-working-on-chrome/53388534#53388534

[jneuhauser]

Thank you very much...
I've defined http://192.168.107.129:8080 as secure origin in chrome://flags/#unsafely-treat-insecure-origin-as-secure and it works. :-)
Using the auto generated self signed cert (cert: true) and defining https://192.168.107.129:8080 (https Instead of http) does not work.

So to sum up what makes service workers work is:

• Using code-server with a trusted certificate
  • Use Let's Enrcrypt in combination with:
    • A reverse rroxy
      https://github.com/coder/code-server/blob/main/docs/guide.md#using-lets-encrypt-with-nginx
      https://github.com/coder/code-server/blob/main/docs/guide.md#using-lets-encrypt-with-caddy
      Web socket fails to connect through Apache #4723 (comment)
    • Direct with code-server --cert /path/to/cert.crt --cert-key /path/to/key.pem
  • Use https://mkcert.dev/ for trusted self signed certs
• Using code-server over localhost / 127.0.0.1
  • Run code-server on the same host or as Docker container and connect over localhost / 127.0.0.1
  • Use SSH forwarding to make a remote code-server available over localhost / 127.0.0.1
    https://github.com/coder/code-server/blob/main/docs/guide.md#port-forwarding-via-ssh
• Define your HTTP-URL (example: http://192.168.107.129:8080) as secure origin. HTTPS-URLs may not work!
  • Chrome Browser: chrome://flags/#unsafely-treat-insecure-origin-as-secure
  • Firefox Browser: ???
  • ...

Can/Should we close this issue or should i leave it open till anyone updates the documentation?