[Bug]: Image not showing up

[gogobd]

Is there an existing issue for this?

• I have searched the existing issues

OS/Web Information

• Web Browser: Brave
• Local OS: MacOS Monterey
• Remote OS: debian
• Remote Architecture: amd54
• code-server --version: 4.0.1 735c6da

Steps to Reproduce

1. run code-server --bind-addr 0.0.0.0:443 --cert -- /app
2. Connect to the address
3. Click an image

Expected

Image should be shown in editor

Actual

An SSL certificate error occurred when fetching the script.
log.ts:313 ERR [Service Worker] registration DOMException: Failed to register a ServiceWorker for scope ('https://--server--/') with script ('https://--server--/service-worker.js'): An SSL certificate error occurred when fetching the script.

Logs

No response

Screenshot/Video

No response

Does this issue happen in VS Code?

• I cannot reproduce this in VS Code.

Are you accessing code-server over HTTPS?

• I am using HTTPS.

Notes

Please note i'm running it in docker but 443 is exposed (via 8080 in my case).

This is a re-opening of #4658

[gogobd]

Additionally "Cannot reconnect. Please reload the window." pops up after some minutes... that's probably related.

[jsjoeio]

I was able to reproduce this locally on macOS + Brave with code-server --bind-addr 0.0.0.0:443 --cert

Error loading webview: Error: Could not register service workers: SecurityError: 
Failed to register a ServiceWorker for scope ('https://localhost/webview/6659afd9-08e4-4b14-9528-570c9d7107cc/') with script 
('https://localhost/webview/6659afd9-08e4-4b14-9528-570c9d7107cc/service-worker.js?id=a8c6338a-43f4-450a-a373-44c7b0e0d34a&swVersion=2&extensionId=&platform=browser&vscode-resource-base-authority=vscode-resource.vscode-webview.net&parentOrigin=https%3A%2F%2Flocalhost'): 
An SSL certificate error occurred when fetching the script..

@code-asher any ideas on where to troubleshoot the cause of this? I haven't spent much time generating SSL certificates locally before. I wonder what broke there.

[enric1994]

In the meantime, you can use version 3.9.1 if you really have to display images:

docker pull codercom/code-server:3.9.1

[code-asher]

Seems likely to be the same issue as #4693 (comment)

[gogobd]

I updated to version 4.0.2 and this issue seems to be fixed!

[enric1994]

Still not working for me. I have the following setup:

docker-compose.yml:

vscode:
    image: codercom/code-server:4.0.2
    ports:
      - "8080:8080"
    volumes:
      - ../:/desk/
      - ./:/home/coder/.config/code-server/
    restart: always
    user: "1000:1000"

config.yaml:

bind-addr: 127.0.0.1:8080
auth: password
password: 1234
cert: false

I access it using a tunnel (Ngrok)

[gogobd]

I realised that it did work when docker was running on the same machine, but not when code server was on another machine. Reopening.

[gogobd]

I tried the same Dockerfile on two machines, localhost and another. My browser (Brave Browser) one time shows an exclamation mark with a circle around it (localhost) and on the remote machine it shows an exclamation mark with a triangle around it (for "connection security" next to the URL). On localhost the image is shown, from the remote host it isn't.

Maybe this message in console is a hint:

Uncaught (in promise) Error: Service Workers are not enabled. Webviews will not work. Try disabling private/incognito mode.
    at :8180/webview/1e6c8813-ba31-4e1f-bb46-d48f13a2b8b2/main.js:115:83
    at new Promise (<anonymous>)
    at :8180/webview/1e6c8813-ba31-4e1f-bb46-d48f13a2b8b2/main.js:115:23

I don't see this on localhost.

Creating an ssh tunnel ssh -L ... to the remote server showed, that the image does show as soon as the address is "http://localhost...".

Note: Disabling private/incognito mode was not possible (my browser wasn't in incognito mode) and even disabling "Brave Shields" didn't help. I was able to reproduce this with Safari, it's just the same, localhost works, remote doesn't.

I'm running code-server inside docker, it is code-server-4.0.2-linux-amd64.tar.gz started with CMD ~/.local/bin/code-server --bind-addr 0.0.0.0:8080 /app, accessing it via http.

[jsjoeio]

accessing it via http.

Images are rendered in webviews. Webviews use Service Workers. Browsers require HTTPS to enable Service Workers. Therefore, this isn't a bug in code-server since it's not something we can change :(

The only solution I can offer is to use HTTPS

[gogobd]

But why does it work on localhost? Maybe browsers don't block Service Workers over http on localhost?

[gogobd]

When I run code server with "--cert" to ask it to generate self-signed certificates i get

Error loading webview: Error: Could not register service workers: SecurityError: Failed to register a ServiceWorker for scope ('https://localhost:8080/webview/0abd743e-7e8b-4e72-a0c5-07c32e890f5e/') with script ('https://localhost:8080/webview/0abd743e-7e8b-4e72-a0c5-07c32e890f5e/service-worker.js?id=e0f9b720-4357-404a-87d5-060b4629d1d7&swVersion=2&extensionId=&platform=browser&vscode-resource-base-authority=vscode-resource.vscode-webview.net&parentOrigin=https%3A%2F%2Flocalhost%3A8080'): An SSL certificate error occurred when fetching the script..

when I click on an image... So https seems to be broken :-(

[jsjoeio]

But why does it work on localhost? Maybe browsers don't block Service Workers over http on localhost?

I don't fully understand why/how it works, but yes, I think browsers allow localhost. See this answer on S/O

When I run code server with "--cert" to ask it to generate self-signed certificates i get

I believe this is a different error which should be fixed in the next version: #4773

[gogobd]

Thank you for mentioning this issue there! Let's hope this can be fixed "at the source".

[antofthy]

I am also seeing the 'reconnect' issue with code-server v4.0.2 -- which is the latest release available at this time (18 Feb 2022)

I do hope a new release is provided soon, as in 2 week the new semester begins and I would like to upgrade the version the students are using.

[ky1emoon]

I upgraded from 3.12.0 to 4.1.0 but still not working with code-server v4.1.0

1. installed code-server normally
2. code-server --port 60000 --cert
3. still getting below error with self-signed cert
   

[jsjoeio]

@ky1emoon can you try with 4.2.0?

Based on that error, it seems like you're not using HTTPS or your browser doesn't recognize the validity of your certificate perhaps. You could also share browser logs.

[jsjoeio]

Can someone verify if this is still an issue with 4.2.0?

[antofthy]

I have install v4.2.0 in testing. Looks like the reconnect issue has been resolved as I am not seeing them any more.
I will now look at update the images student use from v3.12.0 to v4.2.0

[HaoLiuHust]

I am using v4.2.0, still has this problem

[gogobd]

I am also using v4.2.0 now, seeing

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

This error comes up on localhost and when I connect from another computer.

BUT: I realised that Safari does show the image from another computer and on localhost - it doesn't bring up the certificate problem. However Brave Browser Version 1.37.111 Chromium: 100.0.4896.79 (Official Build) (x86_64) shows the error above, even when "Shields down for this site" is selected.

[jsjoeio]

Hmm...okay we will have to dig into this again. Sorry y'all!

Thank you for the notes!

[gogobd]

That could well be related to #4421 i suppose...

[gogobd]

Still broken in 4.3.0

[jsjoeio]

@gogobd thanks for confirming! Are you sure that your browser sees your SSL certificate as valid?

[gogobd]

@jsjoeio I always have to confirm that I want to accept the certificate:

After confirming the browser marks it as not secure:

I run code-sever in docker using `--cert' :

CMD ~/.local/bin/code-server --cert --bind-addr 0.0.0.0:8080 /app

[jsjoeio]

Thanks for the details! That part sounds like it's working as expected 🤔 We'll have to dig into this.

[gogobd]

I was wondering if there's any news on this...

[jsjoeio]

Unfortunately not :( I've been pulled onto another project so my code-server work as slowed down this month. Hopefully soon though! PRs/help welcome though

[benz0li]

@gogobd Have a look at mkcert for making locally-trusted development certificates.

[gogobd]

This could all be the same problem, I'm using "--cert", see #5338

[gogobd]

I updated to 4.9.0 and it seems to me that the certificates that are being generated on startup are not valid for brave, it shows

after accepting the exception. Safari shows a lock sign indicating valid encryption, but it does show images. However Python Notebooks are displayed as text, but that's another issue. Is it not possible to automatically generate a certificate on startup that can be manually accepted in Chrome based browsers?

[jsjoeio]

I think something changed in Chromium that prevents it from accepting self-signed certificates or something 🤔

cc @code-asher do you remember where we read that?

[gogobd]

I was trying to allow insecure certificates from localhost with chrome://flags/#allow-insecure-localhost but that didn't enable web-views.

[gogobd]

I found a way to get Brave to work on MacOS.
I used openssl s_client -connect localhost:8080 to retrieve the auto-generated (self-signed) certificate from the running code-server instance. I created a file with the extension .crt so I could import that key into Keychain Access.app. Then I used the search function in Keychain Access and double-clicked the new certificate to select "Always trust".
This enables all features other browsers don't seem to have an issue with - images are shown, Webviews seem to work ok, Jupyter Notebooks run.

This might also be an acceptable workaround for #5338 .

[code-asher]

Yeah if I recall correctly it will unequivocally refuse certificates it deems insecure for web workers (which are used by web views). Other browsers like Firefox are OK using it for web workers as long as you accept the initial prompt.

[benz0li]

@gogobd Please close the issue when it is resolved.

[gogobd]

Note: openssl s_client -connect localhost:8480 -showcerts </dev/null 2>/dev/null | sed -n '/-----BEGIN CERTIFICATE-----/,/-----END CERTIFICATE-----/p' shows the certificate ready to be used.