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. 😞 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: #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]

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 😉

[jerrywangjy]

hello, i also met with this problem, and my code-server version is 4.13.0. It's ok with a firefox(latest version), but failed with chrome or edge. Do you have some plan to deal with the problem?

[jerrywangjy]

By the way, my client OS is windows~

[code-asher]

No plans at the moment, I will need to find time to reproduce but it will be a while.

[lord-dubious]

its back again