search

coder / code-server

VS Code in the browser
https://coder.com
MIT License
68.07k stars 5.59k forks source link

Extensions using web views not working with self signed certificate #5671

Closed jneuhauser closed 3 months ago

jneuhauser commented 1 year ago

Examples of functionality that uses web views:

Is there an existing issue for this?

OS/Web Information

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

code-server

Does this issue happen in VS Code or GitHub Codespaces?

Are you accessing code-server over 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 commented 1 year ago

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

code-asher commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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).

  1. 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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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:

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