Does not work with Firefox: "No data received"

[nicoboss]

What OS?

• Code Server: Linux Ubuntu 22.04 with Docker
• Client: Windows 11 with Firefox as web browser

Description

When pressing "Edit csv" on Firefox an error "No data received" appears at the location the table containing the CSV data is supposed to appear. On Google Chrome everything works as expected. Using Firefox is essential for my development workflow and so switching to Google Chrome is unfortunately not an option. I would love to use this awesome extension as I constantly have to edit CSV files. I even tried on a fresh installation of Windows with the latest version of Firefox and its default browser configurations and experienced the same issue. Please let me know if there is anything I can provide to help you debug this issue.

Expected behavior

To see the CSV file represented as table when using Firefox as I do when using Google Chrome.

Steps to reproduce

1. Create a new docker container using the lscr.io/linuxserver/code-server:latest image.
2. Make sure to setup a valid SSL certificate or use a HTTPS reverse proxy. This is required for most extensions (including this one) to work and expected behavior.
3. Install "Edit csv v0.8.1 from janisdd" from the default extension store (https://open-vsx.org/extension/janisdd/vscode-edit-csv)
4. Open any small CSV file and as you can see it won't work with Firefox while it works without any issues using Google Chrome.

Screenshot

Here a screenshot of this issue which also includes the inspector output containing all requests and errors occurring after pressing the "Edit csv" button on Firefox. Please let me know if there is anything else I can provide.

[janisdd]

Well, works for me ;D

But seriously, I found in https://stackoverflow.com/questions/62475212/securityerror-cssstylesheet-cssrules-getter-not-allowed-to-access-cross-origin that there might be some firefox extension injecting some css files. As of the last extension update I need to iterate all css files and find two specific files (dark.css and light.css) to change some css variables. From my understanding the extension script is not allowed to access css styles from firefox plugins/extensions/add-on.

Do you have any firefox plugins installed? If so, can you give me the link to reproduce this issue?

[nicoboss]

I don't have any Firefox plugins installed. I tried it on a clean installation of Windows 11 with a clean installation of Firefox and still got the issue. I even tried Firefox on a fresh installation of Ubuntu 22.04 and experienced the same issue there as well. I also tried disabling CORS using the CORS Everywhere extension which also wasn't successful and still resulted in a cross-origin stylesheet exception. I don't experience any Firefox specific issues with any other VSCode extensions. The reason it worked for you might be because you connected over localhost. Most modern web browsers disable some security features when connected over localhost.

[nicoboss]

I tried to create the simplest possible docker-compose file to replicate this issue. I came up with the following docker-compose.yml using which I was able to reliable replicate this issue by just installing vscode-edit-csv as only visual studio code extension. The ssl folder should contain a ssl.cer and ssl.key file for the specified PROXY_DOMAIN and the domain used to access the VSCode server. In my case it's a wildcard certificate for *.nico.re. The .vscode-server folder will be created automaticaly.

version: "3"

services:

  code-server:
    image: lscr.io/linuxserver/code-server:latest
    container_name: code-server
    hostname: code-server
    restart: unless-stopped
    environment:
      - PUID=0
      - PGID=0
      - TZ=Europe/Zurich
      - SUDO_PASSWORD=root
      - PROXY_DOMAIN=code-server.nico.re
    volumes:
      - ~/.vscode-server:/config
      - ~/ssl:/root/ssl
    ports:
      - "8443:8443"
    security_opt:
      - seccomp:unconfined
    cap_add:
      - SYS_PTRACE

With above docker-compose file the issue also occurred when connecting over localhost using an SSH tunnel to the docker host. If you are still having troubles recreating this, I could host a public VSCode server with this issue for you.

[nicoboss]

I found a temporary workaround for this issue: Disabling the setupAndApplyInitialConfigPart1 function skips the code which triggers this issue and makes this extension work with Firefox.

How to skip the setupAndApplyInitialConfigPart1 function: Inside extensions/janisdd.vscode-edit-csv-0.8.1-universal/csvEditorHtml/out/util.js after the line function setupAndApplyInitialConfigPart1(initialConfig, initialVars) { add a return; statement.

There are likely very good reasons for this function to exist so disabling it might cause a lot of side effects but I haven't noticed anything too bad. At least the core features seam to all still be working without this function so disabling it until this issue is resolved is for me a better option than not being able to use this extension at all.

[nicoboss]

Because you are having troubles recreating this issue, I created a Linux VM which includes booth the VSCode Server and the Firefox Client so everything required to reproduce this issue is inside this VM. Start the VM with the latest version of VirtualBox and log in using the password debian, open Firefox and open the bookmarked page, click on "Edit csv" to reproduce the issue. The VSCode server starts automatically on boot and was created using the docker-compose.yml file on the desktop. While setting up this VM I also realized that SSL and PROXY_DOMAIN can be skipped using this setup due to localhost having an elevated level of trust.

Edit: VM deleted after a year as this issue is long fixed.

[janisdd]

Yeah, I couldn't get ssl working locally with code-server...

Thx for the vm, I'm able reproduce the issue there.

[janisdd]

The fix is relatively simple: put crossorigin="anonymous" in the link tag in the getHtml.js file

<link rel="stylesheet" crossorigin="anonymous" href="${darkThemeCss}">
<link rel="stylesheet" crossorigin="anonymous" href="${lightThemeCss}">

However, I have to verify that this does not break the extension if used normally.

[nicoboss]

The fix is relatively simple: put crossorigin="anonymous" in the link tag in the getHtml.js file

<link rel="stylesheet" crossorigin="anonymous" href="${darkThemeCss}">
<link rel="stylesheet" crossorigin="anonymous" href="${lightThemeCss}">

However, I have to verify that this does not break the extension if used normally.

Thanks a lot! I can confirm that this fixes the issue.