Webview related errors with SSH FS Addon. Blank tabs.

[flaektrem]

OS/Web Information

• Web Browser: Firefox
• Local OS: Homeassistant OS
• Remote OS:
• Remote Architecture:
• code-server --version:

Steps to Reproduce

1. Install SSH FS Addon from marketplace
2. Open SSH FS configuration and add new connection
3. Blank tab appears

Expected

A tab with SSH FS settings should appear

Actual

Just a blank tab appears, and some webview related errors in Firefox console.

Logs

Not able to provide logs right now. See all information about this in link below.
SchoofsKelvin/vscode-sshfs#279

Screenshot

Notes

All information can be found here:
SchoofsKelvin/vscode-sshfs#279
I'm not sure if it's OK to open a bug report and just refer to another topic. But this is all I can do right now. Just trying to help out to get this bug sorted out. At least to start somewhere.

This issue can be reproduced in VS Code: Yes/No

[jsjoeio]

I'm not sure if it's OK to open a bug report and just refer to another topic. But this is all I can do right now. Just trying to help out to get this bug sorted out. At least to start somewhere.

Really appreciate that ♥️

So I'm using code-server 3.12.0 on macOS + Brave and this is what happens when I try to reproduce this.

Reproducing

1. Download extension from VSX marketplace
2. Install in code-server
3. Add new configuration

It works as expected. I think we're going to have to wait until you get more information so we can have you look at the browser logs.

If you're getting a blank tab, it's probably the resources failing to load, which is common when you're not using HTTPS.

[flaektrem]

I can try get the logs from where I am right now (not home).
So the easiest way to get browser logs?

EDIT: @jsjoeio exactly what information do you need? Tell me and I'll try to bring that up for you.
I'm not a programmer/coder so maybe someone can help me out with this

[jsjoeio]

Tell me and I'll try to bring that up for you.
I'm not a programmer/coder so maybe someone can help me out with this

No worries at all! I made a video to show you. Let me know if that helps.

Video

Screen.Recording.2021-09-29.at.11.46.34.AM.mov

[flaektrem]

Thank you very much for that beautiful instruction.

Got the logs from when I press "Add new configuration"
I'm on remote access via Nabu Casa right now as you can see in the logs. It doesn't matter if I'm doing this locally, the tab is blank anyway.

08:10:45.532 Feature Policy: Skipping unsupported feature name “clipboard-read”. webviewElement.ts:84:10
08:10:45.532 Feature Policy: Skipping unsupported feature name “clipboard-write”. webviewElement.ts:84:10
08:10:45.536 Feature Policy: Skipping unsupported feature name “clipboard-read”. webviewElement.ts:117:16
08:10:45.536 Feature Policy: Skipping unsupported feature name “clipboard-write”. webviewElement.ts:117:16
08:10:45.537 Feature Policy: Skipping unsupported feature name “clipboard-read”. webviewElement.ts:130:10
08:10:45.537 Feature Policy: Skipping unsupported feature name “clipboard-write”. webviewElement.ts:130:10
08:10:45.600 GEThttps://xxxx.ui.nabu.casa/api/hassio_ingress/WtaX-gg53dk1GeSkD5WUAKEQDCtkRyj-evGkjQTShZg/webview/index.html?id=ad398544-4049-4be9-9088-25cdd9aa35f7&swVersion=2&extensionId=Kelvin.vscode-sshfs&vscode-resource-base-authority=vscode-resource.vscode-webview.net
[HTTP/1.1 200 OK 240ms]

08:10:45.610 GEThttps://xxxx.ui.nabu.casa/api/hassio_ingress/WtaX-gg53dk1GeSkD5WUAKEQDCtkRyj-evGkjQTShZg/vscode-remote-resource?path=/data/vscode/extensions/kelvin.vscode-sshfs-1.22.0/resources/icon.svg&tkn=
[HTTP/1.1 200 OK 245ms]

08:10:46.016 GEThttps://xxxx.ui.nabu.casa/api/hassio_ingress/WtaX-gg53dk1GeSkD5WUAKEQDCtkRyj-evGkjQTShZg/webview/host.js
[HTTP/1.1 200 OK 90ms]

08:10:46.167 GEThttps://xxxx.ui.nabu.casa/api/hassio_ingress/WtaX-gg53dk1GeSkD5WUAKEQDCtkRyj-evGkjQTShZg/webview/main.js
[HTTP/1.1 200 OK 119ms]

08:10:46.449 Feature Policy: Skipping unsupported feature name “clipboard-read”. main.js:677:12
08:10:46.449 Feature Policy: Skipping unsupported feature name “clipboard-write”. main.js:677:12
08:10:46.449 Feature Policy: Skipping unsupported feature name “clipboard-read”. main.js:682:36
08:10:46.449 Feature Policy: Skipping unsupported feature name “clipboard-write”. main.js:682:36
08:10:46.449 Feature Policy: Skipping unsupported feature name “clipboard-read”. main.js:685:17
08:10:46.449 Feature Policy: Skipping unsupported feature name “clipboard-write”. main.js:685:17
08:10:46.474 GEThttps://xxxx.ui.nabu.casa/api/hassio_ingress/WtaX-gg53dk1GeSkD5WUAKEQDCtkRyj-evGkjQTShZg/webview/fake.html?id=ad398544-4049-4be9-9088-25cdd9aa35f7
[HTTP/1.1 200 OK 85ms]

08:10:46.722 GEThttps://vscode-remote+xxxxx.ui.nabu.casa.vscode-resource.vscode-webview.net/data/vscode/extensions/kelvin.vscode-sshfs-1.22.0/webview/build/static/js/runtime-main.bundle.js
CSP

08:10:46.722 Content Security Policy: The page’s settings blocked the loading of a resource at https://xxxx.ui.nabu.casa/api/hassio_ingress/WtaX-gg53dk1GeSkD5WUAKEQDCtkRyj-evGkjQTShZg/webview/service-worker.js?id=ad398544-4049-4be9-9088-25cdd9aa35f7&swVersion=2&extensionId=Kelvin.vscode-sshfs&vscode-resource-base-authority=vscode-resource.vscode-webview.net (“script-src”).
08:10:46.722 Loading failed for the <script> with source “https://vscode-remote+xxxx.ui.nabu.casa.vscode-resource.vscode-webview.net/data/vscode/extensions/kelvin.vscode-sshfs-1.22.0/webview/build/static/js/runtime-main.bundle.js”. index.html:116:1
08:10:46.739 Content Security Policy: The page’s settings blocked the loading of a resource at https://xxxx.ui.nabu.casa/api/hassio_ingress/WtaX-gg53dk1GeSkD5WUAKEQDCtkRyj-evGkjQTShZg/webview/service-worker.js?id=ad398544-4049-4be9-9088-25cdd9aa35f7&swVersion=2&extensionId=Kelvin.vscode-sshfs&vscode-resource-base-authority=vscode-resource.vscode-webview.net (“script-src”).
08:10:46.740 GEThttps://vscode-remote+xxxxx.ui.nabu.casa.vscode-resource.vscode-webview.net/data/vscode/extensions/kelvin.vscode-sshfs-1.22.0/webview/build/static/js/269.bundle.js
CSP

08:10:46.740 Loading failed for the <script> with source “https://vscode-remote+xxxxx.ui.nabu.casa.vscode-resource.vscode-webview.net/data/vscode/extensions/kelvin.vscode-sshfs-1.22.0/webview/build/static/js/269.bundle.js”. index.html:116:1
08:10:46.740 Content Security Policy: The page’s settings blocked the loading of a resource at https://xxxxx.ui.nabu.casa/api/hassio_ingress/WtaX-gg53dk1GeSkD5WUAKEQDCtkRyj-evGkjQTShZg/webview/service-worker.js?id=ad398544-4049-4be9-9088-25cdd9aa35f7&swVersion=2&extensionId=Kelvin.vscode-sshfs&vscode-resource-base-authority=vscode-resource.vscode-webview.net (“script-src”).
08:10:46.741 GEThttps://vscode-remote+xxxxx.ui.nabu.casa.vscode-resource.vscode-webview.net/data/vscode/extensions/kelvin.vscode-sshfs-1.22.0/webview/build/static/js/main.bundle.js
CSP

08:10:46.741 Loading failed for the <script> with source “https://vscode-remote+xxxxx.ui.nabu.casa.vscode-resource.vscode-webview.net/data/vscode/extensions/kelvin.vscode-sshfs-1.22.0/webview/build/static/js/main.bundle.js”. index.html:116:1

[jsjoeio]

08:10:46.722 Content Security Policy: The page’s settings blocked the loading of a resource at https://xxxx.ui.nabu.casa/api/hassio_ingress/WtaX-gg53dk1GeSkD5WUAKEQDCtkRyj-evGkjQTShZg/webview/service-worker.js?id=ad398544-4049-4be9-9088-25cdd9aa35f7&swVersion=2&extensionId=Kelvin.vscode-sshfs&vscode-resource-base-authority=vscode-resource.vscode-webview.net (“script-src”).
08:10:46.722 Loading failed for the <script> with source “https://vscode-remote+xxxx.ui.nabu.casa.vscode-resource.vscode-webview.net/data/vscode/extensions/kelvin.vscode-sshfs-1.22.0/webview/build/static/js/runtime-main.bundle.js”. index.html:116:1
08:10:46.739 Content Security Policy: The page’s settings blocked the loading of a resource at https://xxxx.ui.nabu.casa/api/hassio_ingress/WtaX-gg53dk1GeSkD5WUAKEQDCtkRyj-evGkjQTShZg/webview/service-worker.js?id=ad398544-4049-4be9-9088-25cdd9aa35f7&swVersion=2&extensionId=Kelvin.vscode-sshfs&vscode-resource-base-authority=vscode-resource.vscode-webview.net (“script-src”).
08:10:46.740 GEThttps://vscode-remote+xxxxx.ui.nabu.casa.vscode-resource.vscode-webview.net/data/vscode/extensions/kelvin.vscode-sshfs-1.22.0/webview/build/static/js/269.bundle.js
CSP

Ah-ha! Yup, it's been blocked. This could be a couple things:

• are you using code-server 3.12.0? We fixed a bug related to this in that release.
• are you running code-server over HTTPS? if not, that could be related.
• do you have an ad-blocker or privacy settings? (like Brave) that could be related

[flaektrem]

Ad-block extensions in Firefox was inactivated during testing.

I don't think it's running over HTTPS.
The URL I'm using right now remotely to my HA instance is:
https://xxxx.ui.nabu.casa/hassio/addon/a0d7b954_vscode/info.
But when I'm using it locally the URL is:
http://192.168.x.x/hassio/addon/a0d7b954_vscode/info.

It seems like the VSCode addon using code-server 3.11.1.

[jsjoeio]

But when I'm using it locally the URL is:
http://192.168.x.x/hassio/addon/a0d7b954_vscode/info.

This might be the source of the issue then. Can you try using HTTPS? We have some docs here or you can try running code-server --link.

[flaektrem]

@jsjoeio sorry, I accidentally messed up and closed this. Reopened again.

I'm not sure how to get the whole Home Assistant instance under HTTPS. It's strange because this blank tab and "react server" error has never showed up before and suddenly HTTPS it's a must. 🤓 I think I have missed some breaking change or something lately.

I tried code-server --link and went through those steps and ended up with VSCode on this address:
https://a0d7b954_vscode-xxx.cdr.co/.
Then I installed SSH FS addon and tried again. Exactly the same behavior with blank tab when I tried to create new configuration.
The logs from Firefox are a bit different now:

10:27:31.533 Feature Policy: Skipping unsupported feature name “clipboard-read”. webviewElement.ts:84:10
10:27:31.533 Feature Policy: Skipping unsupported feature name “clipboard-write”. webviewElement.ts:84:10
10:27:31.538 Feature Policy: Skipping unsupported feature name “clipboard-read”. webviewElement.ts:117:16
10:27:31.538 Feature Policy: Skipping unsupported feature name “clipboard-write”. webviewElement.ts:117:16
10:27:31.539 Feature Policy: Skipping unsupported feature name “clipboard-read”. webviewElement.ts:130:10
10:27:31.539 Feature Policy: Skipping unsupported feature name “clipboard-write”. webviewElement.ts:130:10
10:27:31.595 GEThttps://a0d7b954_vscode-xxx.cdr.co/vscode-remote-resource?path=/root/.local/share/code-server/extensions/kelvin.vscode-sshfs-1.22.0/resources/icon.svg&tkn=
10:27:31.708 GEThttps://a0d7b954_vscode-xxx.cdr.co/webview/index.html?id=95ac0ffd-d310-48b3-bc0f-ec687c066be6&swVersion=2&extensionId=Kelvin.vscode-sshfs&vscode-resource-base-authority=vscode-resource.vscode-webview.net
[HTTP/2 200 OK 1344ms]

10:27:33.061 An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can remove its sandboxing. a0d7b954_vscode-xxx.cdr.co
10:27:33.130 GEThttps://a0d7b954_vscode-xxx.cdr.co/webview/host.js
[HTTP/2 304 Not Modified 1338ms]

10:27:34.546 GEThttps://a0d7b954_vscode-xxx.cdr.co/webview/main.js
[HTTP/2 304 Not Modified 2602ms]

10:27:50.007 Error in parsing value for ‘height’.  Declaration dropped. a0d7b954_vscode-xxx.cdr.co
10:27:50.084 GEThttps://a0d7b954_vscode-xxx.cdr.co/static/c680aae973d83583e4a73dc0c422f44021f0140e/usr/local/lib/code-server/lib/vscode/node_modules/xterm/lib/xterm.js
[HTTP/2 200 OK 2679ms]

10:27:52.890 GEThttps://a0d7b954_vscode-xxx.cdr.co/static/c680aae973d83583e4a73dc0c422f44021f0140e/usr/local/lib/code-server/lib/vscode/node_modules/xterm-addon-search/lib/xterm-addon-search.js
[HTTP/2 200 OK 2602ms]

10:27:52.890 GEThttps://a0d7b954_vscode-xxx.cdr.co/static/c680aae973d83583e4a73dc0c422f44021f0140e/usr/local/lib/code-server/lib/vscode/node_modules/xterm-addon-unicode11/lib/xterm-addon-unicode11.js
[HTTP/2 200 OK 2604ms]

10:27:52.891 GEThttps://a0d7b954_vscode-xxx.cdr.co/static/c680aae973d83583e4a73dc0c422f44021f0140e/usr/local/lib/code-server/lib/vscode/node_modules/xterm-addon-webgl/lib/xterm-addon-webgl.js
[HTTP/2 200 OK 2609ms]

[jsjoeio]

I think I have missed some breaking change or something lately.

Nope, not a breaking change on our side (you would have known due to major version bump). But hey, maybe browsers made CSPs and/or service worker policies more strict? I'm not sure 🤷‍♂️

Hmm... those logs are different but I'm not sure if it helps.

Let's call in an expert - @code-asher any ideas how to help them?

[flaektrem]

I don't know what "CSPs" are.
But I tried same procedure again, locally on Microsoft Edge and got following errors in Edge console:

Uncaught (in promise) Error: Service Workers are not enabled in browser. Webviews will not work.
    at main.js:211
    at new Promise (<anonymous>)
    at main.js:209
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'addEventListener')
    at createWebviewManager (main.js:291)
    at host.js:111    

[jsjoeio]

I don't know what "CSPs" are.

My bad! Content Security Policies.

Uncaught (in promise) Error: Service Workers are not enabled in browser. Webviews will not work.

Yeah same problem :( You're going to have to get HTTPS working in your environment to get this working. Sadly, we can't do much on code-server's end :(