Dynamically webview resources fail to load in some browser/OS combinations

[chouzz]

Hi, I have two issues, they may all be related to https certificates.

• One is code-server prompt can‘t register serviceworker error
• The other is that I can't load resources dynamically on my expansion webview.

I run code-server --host 0.0.0.0 --port 8223 --cert in docker ubuntu:20.04, and expose 8223 in my Windows 10 host, but I get an ssl error when I open a exntesion webview in code-server in my company.

when I use Chrome command line "--ignore-certificate-errors", my extension webview can't dynamic loading of resources(eg. js, css), which cause the page style confusion, the Chrome dev tool network display the resource keep pending until it fails.

At first, I thought it was the invalid certificate problem，but even if I use a valid certificate, I still can't dynamic loading resources.(Without any certificate errors and any Chrome command line options)

I use something like this to dynamic loading resources

  function addCss(path, callback) {
      if(!checkcache(path)) { /*Check if it has been loaded*/
          var head = dom.getElementsByTagName('head')[0];
          var link = dom.createElement('link');
          link.href = path;
          link.rel = 'stylesheet';
          link.type = 'text/css';
          head.appendChild(link); /*Add to HTML*/
          link.onload = link.onreadystatechange = function() { /*whether the loading is successful*/
              if(!this.readyState || this.readyState === "loaded" || this.readyState === "complete") {
                  link.onload = link.onreadystatechange = null;
                  callback();
              }
          };
          cache[path] = 1; /*Store loaded paths*/
      }
  };

-->

OS/Web Information

• Web Browser: Chrome 90.0.4430.212 64bit
• Local OS: Windows 10
• Remote OS: ubuntu:20.04 (docker)
• Remote Architecture: x86
• code-server --version: 3.9.0

Steps to Reproduce

1. installl code-server 3.9.0 in docker ubuntu:20.04
2. code-server --host 0.0.0.0 --port 8223 --cert
3. enter localhost:8888 and open my extension webview

Expected

No error.

Actual

get an error in bottom right corner:

Error loading webview: Could not register service workers: SecurityError: Failed to register a ServiceWorker for scope ('https://localhost:8223/webview/') with script ('https://localhost:8223/webview/service-worker.js'): An SSL certificate error occurred when fetching the script.

Screenshot

[code-asher]

So this happens even with a valid certificate when you don't get any certificate errors right?

Could you post the browser log when you try this with a valid certificate? I wonder if the resources are getting blocked by CSP or something.

[chouzz]

Yes.

• With a valid certificate, no any errors, I can't load resources dynamically on my expansion webview.
• With a self-signed certificate(use --cert), I got an error "loading webivew error"(above screentshot), but loading resources dynamically works fine.
• With http, I got a "Your Connection is Not Private" warning from Chrome, loading resources dynamically works fine too.

Here are the logs, I didn't see any other warning or errors related to certificate except these, seems there are no useful information about these errors, they just show net::ERR_FAILED after pending for several minutes .

[code-asher]

Hmm yeah you're right that doesn't look useful at all.

Is this extension public so I can test it out? Or if not would you be able to make an example extension that reproduces the issue?

[chouzz]

With the latest code-server and valid certificate，I still can't load resources dynamically on webview. The example extension repo is here, you can download extension from here, this extension is just a little modified from vscode-webview-sample.

Steps to Reproduce:

1. install code-server-webview-0.0.1.vsix with latest code-server
2. Run command "Start cat coding session", and open Chrome Developer Tools,
3. Click button "click me"

Expected

get "hello wrold test.js" from console, which means test.js is loaded successfully.

Actual

test.js is keep pending , and get a net::ERR_FAILED error finally.

Screenshot

Possible problems

The requested resource test.js without cookies(Not sure).

Please let me know if you have any ideas!

[chouzz]

I am sure it is related to service-worker in lib\vscode\src\vs\workbench\contrib\webview\browser\pre\service-worker.js.

when I use localhost with self-signed certificate, I got an error "could not register service workers", service workers will not be used in this scene. So that loading resources dynamically works fine.

With an valid certificate, service workers can be registered，when loading resources dynamically, eventListener "fetch" in service-worker.js will be triggered, there maybe something wrong here.

[code-asher]

Ahhhhhh I haven't had a chance to try the example yet but that makes a lot of sense.

If I recall correctly VS Code intercepts requests from the web view (which is an iframe) using the service worker and routes them through the parent frame instead.

I think you're right that something must be wrong there.

[code-asher]

Interesting, I don't get this on Linux + Firefox/Chromium but I do get this on Windows + Chrome.

[chouzz]

Windows+Firefox also works，so this problem may be related to the browser? Do you know there are other ways to avoid this problem？Or other ways to dynamically load resources？

[code-asher]

I haven't debugged yet to see where exactly the issue lies but I think there must be some combination of the service worker and browser that is causing a problem.

At the moment I can't think of any workarounds other than somehow avoiding dynamically loaded resources. :disappointed: We'll need to do more testing.

[mmitkevich]

I had similar problem with latest release 3.10, had to downgrade to 3.8. OSX/Chrome 91.0.4472.114

[Kaka1127]

I also met the same issue with the latest version 3.11.1. We need to downgrade to 3.8.1 to work correctly I hope to fix this issue...

[jsjoeio]

@Kaka1127 this should be fixed in the next release!

[Kaka1127]

@jsjoeio

It was good to know!

[chouzz]

@Kaka1127 this should be fixed in the next release!

Just curious, why does this happen? Why is there such an error？@jsjoeio

[jsjoeio]

Well...originally, I was thinking this was related to the service worker path (which we messed up when we refactored something things) 🤔

With an valid certificate, service workers can be registered，when loading resources dynamically, eventListener "fetch" in service-worker.js

But...now I'm seeing this comment, which could mean that the issue is related to this: https://github.com/cdr/code-server/issues/2760

I guess we'll have to test in the next release and see if it's still an issue but I'm hoping it's fixed 🤞

[Kaka1127]

@jsjoeio Yesterday, code-server was released new of v3.12.0. But it seems that it is not fixed this issue. Will you fix this issue on v1.12.1?

[jsjoeio]

Yesterday, code-server was released new of v1.12.0. But it seems that it is not fixed this issue. Will you fix this issue on v1.12.1?

Ah, I think you mean 3.12.0. Thanks for testing! We have to prioritize some other things (improving the build and release process) but I will add it to the release after that! (Adding to On Deck for now)

[jsjoeio]

If someone else has time to poke around and see what a fix might be though, then that would help us address this faster! I just don't have the bandwidth for this next version milestone

[code-asher]

I updated the issue title, just FYI for anyone following this if you are having the SecurityError problem that means your browser is rejecting your TLS certificates and it is likely not something code-server can fix.

[Blakeinstein]

I think I faced this way back in #3844 -> #3845

[DevXiaolan]

same issue , will it fixed in next version ?

[jsjoeio]

I updated the issue title, just FYI for anyone following this if you are having the SecurityError problem that means your browser is rejecting your TLS certificates and it is likely not something code-server can fix.

@DevXiaolan I see you downvoted that comment. Are you seeing a different error?

[Blakeinstein]

I updated the issue title, just FYI for anyone following this if you are having the SecurityError problem that means your browser is rejecting your TLS certificates and it is likely not something code-server can fix.

I dont think I could get it working over http either.

[code-asher]

Browsers only allow service workers over HTTPS so HTTP will not work unfortunately :(

[code-asher]

Unless you are using a secure context over HTTP like localhost? That would work. But in that case I think it would not show SecurityError so the problem would be something else and my comment can be ignored.

[Blakeinstein]

Browsers only allow service workers over HTTPS so HTTP will not work unfortunately :( That makes so much sense! Even monaco works over service workers, that means no monaco w/o https?

Perhaps a proxy for the webview worker to reuse the certificate? I was thinking it was looking at the wrong place as well.

[fritterhoff]

I've got a quite similar bug. Accessing the code server (behind a https reverseproxy) from MS Edge and Chrome works without any noticeable problems, opening the same setup in a current Mozilla Firefox causes CSP errors. If you need further information about the setup please let me know ;)

[jsjoeio]

opening the same setup in a current Mozilla Firefox causes CSP errors. If you need further information about the setup please let me know ;)

Interesting.... cc @code-asher

Do you mind providing the browser logs from Firefox? I wonder if they have stricter CSPs or something 🤔

[fritterhoff]

I've blurred out the internal fqdn...

[fritterhoff]

In comparison using MS Edge:

[jsjoeio]

It's weird that it's failing to initialize VS Code. Is this the latest version of code-server? And what happens if you use an incognito window?

I'm also unsure about the "web worker extension host is started without an iframe sandbox!"

[fritterhoff]

Hi @jsjoeio,

I'm using the latest docker image (codercom/code-server:latest). That is running a code-server 3.12.0

Running in an incognitor window:

[code-asher]

Is this an old version of Firefox? It seems to be reporting that it has no support for service workers even though this domain is over https.

Apparently service workers are also disabled on ESR builds before Firefox 78 and when in private browsing mode.

https://developer.mozilla.org/en-US/docs/Web/API/Navigator/serviceWorker

[code-asher]

Oh I just saw that you wrote it was an incognito (private) window so that explains the lack of service workers.

I am not sure about the CSP issue. This is on code-server 3.12.0? I know we had a CSP issue in < 3.12.0.

[fritterhoff]

@code-asher Yep, the service worker is missing in the private window. I'm using code-server 3.12.0 and I'm using the recent Firefox 93.0 (64 bit)

[fritterhoff]

[code-asher]

Thank you for the info! I was able to replicate on Firefox and code-server 3.12.0.

[jsjoeio]

Apparently service workers are also disabled on ESR builds before Firefox 78 and when in private browsing mode.

Oops! I didn't know service workers were disabled in private browsing mode on Firefox. My bad! TIL.

Thank you for the info! I was able to replicate on Firefox and code-server 3.12.0.

Oh snap - go team @code-asher @fritterhoff 🎉

[fritterhoff]

As a small hint: Using the vs code version provided by GitHub works fine... Maybe you find the difference between code-server and github? 🤔

[Write]

Ugly fix for me right now on firefox security.csp.enable to false 🤔

[fritterhoff]

We (plan) to use code server from some lectures, so we would need to tell every student how and also why to disable the CSP.

[Write]

Ouch, not at all, never disable CSP, I honestly just posted a (temporary) solution that I personally use, and I think it's really wrong. I admit I should've stated that in my first message.

[jsjoeio]

Hmm... @code-asher do we know how to fix this? Maybe this will be fixed when we upgrade VS Code?

[code-asher]

I think it very possibly will be yup. If not then we may have our own CSP somewhere that needs to be fixed.

[fritterhoff]

Hello again,

Is there an update or a solution in sight? Sadly I don't have any experience in the development of vs code ;) Have you (maybe) thought about enabling the csp reporting functionality and debugging the issue that way?

[code-asher]

We should test this again once the next major release comes out (soon).

[fritterhoff]

Sadly the new version does not seem to improve the behavior.

[code-asher]

I was seeing CSP issues caused by the port mismatch in the other issue so hopefully it is the same problem.

[code-asher]

Ah nope I still cannot load images even with the fix for the port.

[fritterhoff]

Mhm... Can I help you somehow?

[code-asher]

Thank you for the offer! I think I got it sorted.

[dantegarden]

verison 4.0.1 still meet the same issue, by the way my browser is Chrome96.0.4664.110.

[jsjoeio]

@dantegarden thanks for testing! Can you post basic repro steps?

[hhc87]

version 4.2.0\4.3.0\4.4.0 still meet the same issue, by the way my browser is Microsoft Edge 101.0.1210.47 and Chrome 101.0.4951.64.But it’s ok in Firefox 100.0.1 and both browser didn’t change any security config.

Environment: centos 7 Docker with 2c1g container resource Self SSL certificate

——————————————————————— The error in chrome and edge are as flow:

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

[jsjoeio]

@hhc87 any chance you can post repro steps? Last time I looked into this I couldn't reproduce

[hhc87]

@hhc87 any chance you can post repro steps? Last time I looked into this I couldn't reproduce

@jsjoeio very happy to get your reply

I use docker to deploy the 4.4.0 version of code-server (offline environment) on centos7, and then install the plugin 'form generator plugin' developed by jakHuang through offline installation (can be obtained in the vscode app store), and the plugin's The remote connection address is configured as the same-origin address exposed by the code-server (eg: https://172.20.23.102/code-server and https://172.20.23.102/formgenerator ), meanwhile, the https certificate is issued locally by the linux server Generated certificate. The problem is that when I right-click the .vue file in the workspace and click 'Enter Form Designer', the code-server will report an error, and the error message is as follows:

---

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

---

From the superficial exception information, it seems that the service worker does not recognize the self-created ssl certificate, and I don't know if it is allowed to use the service worker in the code-server which using the self-signed certificate.

Hope to get your reply

[jsjoeio]

Thanks so much for the details! Do you know if it's possible to create a very minimal reproduction?

I wonder if the issue is the SSL certificate 🤔

[hhc87]

@jsjoeio It may be difficult to send ssl certificates and other information (similar to docker-compose files) in the issue. I plan to try to provide a github repository address and put all the information in it, but it may take a while. I would also like to know if you can provide an email address where I can communicate with you by email so that we can communicate technical details more quickly.

[jsjoeio]

@hhc87 okay awesome! Unfortunately, I don't give out my email for those kinds of things, but I am subscribed to the repo and check notifications M-F so I will respond here!

[hhc87]

@jsjoeio

Thank you for your patient reply, I created a small demo, the address is https://github.com/hhc87/code-server-debug-demo, mainly to deploy code-server and nginx through docker-compose, the specific information can be Get it in the u01 folder of the repo. Please also understand that for the sake of information security, I have not made this repository public, but have added you as a collaborator.At the same time, I don't know what problems will occur during the reproduction process. If you encounter an exception, please leave a message and contact me in time.

[fritterhoff]

Just as a note: From several different dev. projects I can confirm, that Chrome or prop. all Chromium Browsers are rather strict and reject the usage of self signed certificates for service workers. @jsjoeio I think there is no way to fix this in code-server since this is a known behavior and discussed several times in the community (e.g. https://stackoverflow.com/questions/38728176/can-you-use-a-service-worker-with-a-self-signed-certificate) ...

[jsjoeio]

@hhc87 thank you for the demo repo and the info regarding the security of the issue! I will use that to try to reproduce this. I won't get to it for a couple weeks though fyi.

@fritterhoff oh no! I wonder what we should do then 🤔 Do we update the docs, remove the self-signed certificate generation inside code-server, or something else? I think @code-asher and I will need to discuss this next month.

[fritterhoff]

@fritterhoff oh no! I wonder what we should do then 🤔 Do we update the docs, remove the self-signed certificate generation inside code-server, or something else? I think @code-asher and I will need to discuss this next month.

Maybe that changed during some of the last releases but iirc chrome was rather picky. Maybe I find some time the next days to try it again 😉