Blank page when accessing code-server through reverse proxy

[marfier]

Hi,

I have installed code-server on my Mac using Homebrew. I was able to access the code-server interface using the bind-addr (http://127.0.0.1:8008) from config.yaml, but when using an NGINX reverse proxy with self-signed SSL (https://code.local), it just gives a blank page.

NGINX config:

server {
    listen              443 ssl http2;
    listen              [::]:443 ssl http2;
    server_name         code.local;

    # SSL
    ssl_certificate     /etc/ssl/certs/code.local.crt;
    ssl_certificate_key /etc/ssl/private/code.local.key;

    # security
    # security headers
    add_header X-Frame-Options           "SAMEORIGIN" always;
    add_header X-XSS-Protection          "1; mode=block" always;
    add_header X-Content-Type-Options    "nosniff" always;
    add_header Referrer-Policy           "no-referrer-when-downgrade" always;
    add_header Content-Security-Policy   "default-src 'self' http: https: data: blob: 'unsafe-inline'" always;
    add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;

    # . files
    location ~ /\.(?!well-known) {
        deny all;
    }

    # reverse proxy
    location / {
        proxy_pass http://127.0.0.1:8008;
        proxy_http_version                 1.1;
        proxy_cache_bypass                 $http_upgrade;

        # Proxy headers
        proxy_set_header Upgrade           $http_upgrade;
        proxy_set_header Connection        "upgrade";
        proxy_set_header Host              $host;
        proxy_set_header X-Real-IP         $remote_addr;
        proxy_set_header X-Forwarded-For   $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Forwarded-Host  $host;
        proxy_set_header X-Forwarded-Port  $server_port;

        # Proxy timeouts
        proxy_connect_timeout              60s;
        proxy_send_timeout                 60s;
        proxy_read_timeout                 60s;
    }

    # additional config
    # favicon.ico
    location = /favicon.ico {
        log_not_found off;
        access_log    off;
    }

    # robots.txt
    location = /robots.txt {
        log_not_found off;
        access_log    off;
    }

    # gzip
    gzip            on;
    gzip_vary       on;
    gzip_proxied    any;
    gzip_comp_level 6;
    gzip_types      text/plain text/css text/xml application/json application/javascript application/rss+xml application/atom+xml image/svg+xml;
    }

# HTTP redirect
server {
    listen      80;
    listen      [::]:80;
    server_name code.local;
    return      301 https://code.local$request_uri;
}

Browser console log:

[Log] [Service Worker] registered (register.js, line 12)
[Error] WebSocket connection to 'wss://code.local/?type=Management&reconnectionToken=588d469d-53c0-4ebc-ba6f-1a279d3be903&reconnection=false&skipWebSocketFrames=false' failed: Unexpected response code: 200
[Log]   ERR – "[remote-connection][Management   ][588d4…][initial][127.0.0.1:8008] socketFactory.connect() failed. Error:" (workbench.web.api.js, line 1584)
[Log]   ERR – Error: WebSocket close with status code 1006 (workbench.web.api.js, line 1584)
Error: WebSocket close with status code 1006
[Log]   ERR – "[remote-connection] An error occurred in the very first connect attempt, it will be treated as a permanent error! Error:" (workbench.web.api.js, line 1584)
[Log]   ERR – Error: WebSocket close with status code 1006 (workbench.web.api.js, line 1584)
Error: WebSocket close with status code 1006
[Log]   ERR – Error: WebSocket close with status code 1006 (workbench.web.api.js, line 1584)
Error: WebSocket close with status code 1006
[Error] Error: WebSocket close with status code 1006

o@https://code.local/static/48f7c2724827e526eeaa6c2c151c520f48a61259/lib/vscode/out/vs/workbench/workbench.web.api.js:1748:995
https://code.local/static/48f7c2724827e526eeaa6c2c151c520f48a61259/lib/vscode/out/vs/workbench/workbench.web.api.js:1750:684
	(anonymous function) (workbench.web.api.js:45:927)
[Error] Unhandled Promise Rejection: Error: WebSocket close with status code 1006
	(anonymous function) (workbench.web.api.js:1748:996)
	promiseReactionJob
[Error] Unhandled Promise Rejection: Error: Assertion Failed: argument is undefined or null
	(anonymous function) (workbench.web.api.js:7014:433)
	asyncFunctionResume
	(anonymous function)
	promiseReactionJobWithoutPromise
	promiseReactionJob
[Error] Unhandled Promise Rejection: Error: WebSocket close with status code 1006
	(anonymous function) (workbench.web.api.js:1748:996)
	promiseReactionJob
[Error] Error: Unable to read file 'vscode-userdata:/User/settings.json' (Error: WebSocket close with status code 1006)

p@https://code.local/static/48f7c2724827e526eeaa6c2c151c520f48a61259/lib/vscode/out/vs/workbench/workbench.web.api.js:1560:308
https://code.local/static/48f7c2724827e526eeaa6c2c151c520f48a61259/lib/vscode/out/vs/workbench/workbench.web.api.js:1608:441
asyncFunctionResume@[native code]
[native code]
promiseReactionJobWithoutPromise@[native code]
promiseReactionJob@[native code]
	(anonymous function) (workbench.web.api.js:45:927)
[Error] Error: Unable to read file 'vscode-userdata:/User/tasks.json' (Error: WebSocket close with status code 1006)

p@https://code.local/static/48f7c2724827e526eeaa6c2c151c520f48a61259/lib/vscode/out/vs/workbench/workbench.web.api.js:1560:308
https://code.local/static/48f7c2724827e526eeaa6c2c151c520f48a61259/lib/vscode/out/vs/workbench/workbench.web.api.js:1608:441
asyncFunctionResume@[native code]
[native code]
promiseReactionJobWithoutPromise@[native code]
promiseReactionJob@[native code]
	(anonymous function) (workbench.web.api.js:45:927)

Please advise.

[code-asher]

I copied your example verbatim (except I changed the proxy_pass IP & port and pointed the certificates to my own self-signed ones) but everything works for me.

Are you using Firefox or Chrome? (Those are the ones I just tested with.) I'm wondering if there's some combination of browser + self-signed certificate that's at play here.

[marfier]

@code-asher you're right. The problem seems to be because I was using Safari on Catalina. But when I used Edge (which uses Chromium), everything was fine. But I'd rather stick to Safari, is there a workaround?

[code-asher]

I think Safari is just really strict about certificates so if you generate/use them in a certain way I think it should be possible to make it work.

As an aside, if you're able to use a domain and Let's Encrypt that'll work.

If you need it to be all local I think you should be able to use mkcert to generate certificates trusted by your browser (related reading: https://github.com/cdr/code-server/blob/master/doc/guide.md#self-signed-certificate).

This might also help although the issue as a whole is about the iPad: #1566 (comment)

SSH forwarding might also be an option: https://github.com/cdr/code-server/blob/master/doc/guide.md#ssh-forwarding

[marfier]

I did use mkcert to generate my own CA and the certs. I also verified my CA on my root store (Keychain Access). Could it just another case of #1566?

[code-asher]

Ah bummer, in that case it could definitely be related although if you're not on an iPad it might ultimately be a different problem. I don't have a Mac so I won't be much more use but I'll tag @nhooyr in case he's aware of any workarounds with Safari and self-signed certs.