code-server: Dynamically webview resources fail to load in some browser/OS combinations
Hi, I have two issues, they may all be related to https certificates.
- One is
code-serverprompt can‘t register serviceworker error - The other is that I can’t
load resources dynamicallyon 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
- installl code-server 3.9.0 in docker ubuntu:20.04
- code-server --host 0.0.0.0 --port 8223 --cert
- 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
About this issue
- Original URL
- State: open
- Created 3 years ago
- Reactions: 3
- Comments: 66 (44 by maintainers)
Commits related to this issue
- Fix images not loading (#27) https://github.com/cdr/code-server/issues/3410 — committed to coder/vscode by code-asher 3 years ago
- Update VS Code Fixes https://github.com/cdr/code-server/issues/3410 Fixes https://github.com/cdr/code-server/issues/4604 Fixes https://github.com/cdr/code-server/issues/4607 Fixes https://github.com/... — committed to code-asher/code-server by code-asher 3 years ago
- Update VS Code (#4631) Fixes https://github.com/cdr/code-server/issues/3410 Fixes https://github.com/cdr/code-server/issues/4604 Fixes https://github.com/cdr/code-server/issues/4607 Fixes https://... — committed to coder/code-server by code-asher 3 years ago
- Fix images not loading (#27) https://github.com/cdr/code-server/issues/3410 — committed to ZauberNerd/vscode by code-asher 3 years ago
- Fix images not loading (#27) https://github.com/cdr/code-server/issues/3410 — committed to ZauberNerd/vscode by code-asher 3 years ago
- Fix images not loading (#27) https://github.com/cdr/code-server/issues/3410 — committed to ZauberNerd/vscode by code-asher 3 years ago
I updated the issue title, just FYI for anyone following this if you are having the
SecurityErrorproblem that means your browser is rejecting your TLS certificates and it is likely not something code-server can fix.I had similar problem with latest release 3.10, had to downgrade to 3.8. OSX/Chrome 91.0.4472.114
Thank you for the info! I was able to replicate on Firefox and code-server 3.12.0.
Sadly the new version does not seem to improve the behavior.
No plans at the moment, I will need to find time to reproduce but it be a while.
Thank you for the offer! I think I got it sorted.
We should test this again once the next major release comes out (soon).
Ugly fix for me right now on firefox security.csp.enable to false 🤔
As a small hint: Using the vs code version provided by GitHub works fine… Maybe you find the difference between code-server and github? 🤔
Interesting, I don’t get this on Linux + Firefox/Chromium but I do get this on Windows + Chrome.
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 😉
@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.
@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.@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
verison 4.0.1 still meet the same issue, by the way my browser is Chrome96.0.4664.110.
Mhm… Can I help you somehow?
Ah nope I still cannot load images even with the fix for the port.
I was seeing CSP issues caused by the port mismatch in the other issue so hopefully it is the same problem.
I think it very possibly will be yup. If not then we may have our own CSP somewhere that needs to be fixed.
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.
@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)
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.
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
In comparison using MS Edge:
Unless you are using a secure context over HTTP like localhost? That would work. But in that case I think it would not show
SecurityErrorso the problem would be something else and my comment can be ignored.Browsers only allow service workers over HTTPS so HTTP will not work unfortunately 😦
I think I faced this way back in #3844 -> #3845
Just curious, why does this happen? Why is there such an error？@jsjoeio
@jsjoeio
It was good to know!
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…
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.
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.
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.