Unable to load webview on iPad

Similar to #4131, but without CSP error message.

OS/Web Information

• Web Browser: Safari, Chrome
• Local OS: iPadOS 15
• Remote OS: macOS 12.0.1
• Remote Architecture: intel mac
• code-server --version: 3.12.0

Steps to Reproduce

1. Boot up code-server instance on macOS.
2. Open code-server pwa on iPad, confirm that everything is fine, and move it to background.
3. After a while, reopen the pwa app. Wait for a sec until it reconnects.
4. Now I can’t preview local images (e.g. .png, .jpg, …).

Expected

The images should show up.

Actual

When I click the image file, a blank new tab opens with nothing. In addition, I can’t load details page of the extensions. Also, extensions using webview such as Gitgraph don’t show up. Other than that, everything works as normal.

Logs

Result of code-server --log debug:

[2021-11-03T07:46:09.956Z] info  code-server 3.12.0 4cd55f94c0a72f05c18cea070e10b969996614d2
[2021-11-03T07:46:09.958Z] info  Using user-data-dir ~/.local/share/code-server
[2021-11-03T07:46:09.970Z] info  Using config file ~/.config/code-server/config.yaml
[2021-11-03T07:46:09.970Z] info  HTTP server listening on http://0.0.0.0:8888 
[2021-11-03T07:46:09.970Z] info    - Authentication is enabled
[2021-11-03T07:46:09.970Z] info      - Using password from ~/.config/code-server/config.yaml
[2021-11-03T07:46:09.970Z] info    - Not serving HTTPS 
[2021-11-03T07:46:26.444Z] debug forking vs code...
[2021-11-03T07:46:26.848Z] debug setting up vs code...
[2021-11-03T07:46:26.851Z] debug vscode got message from code-server {"type":"init"}
[2021-11-03T07:46:27.467Z] debug vscode got message from code-server {"type":"socket"}
[2021-11-03T07:46:27.469Z] debug protocol Initiating handshake... {"token":"641726d1-1aad-4221-89fa-b0c3cf4368cd"}
[2021-11-03T07:46:27.476Z] debug protocol Handshake completed {"token":"641726d1-1aad-4221-89fa-b0c3cf4368cd"}
[2021-11-03T07:46:27.477Z] debug management Connecting... {"token":"641726d1-1aad-4221-89fa-b0c3cf4368cd"}
[2021-11-03T07:46:27.478Z] debug vscode 1 active management connection(s)
[2021-11-03T07:46:27.693Z] debug got latest version {"latest":"3.12.0"}
[2021-11-03T07:46:27.693Z] debug comparing versions {"current":"3.12.0","latest":"3.12.0"}
[2021-11-03T07:46:27.758Z] debug vscode got message from code-server {"type":"socket"}
[2021-11-03T07:46:27.759Z] debug protocol Initiating handshake... {"token":"ff9d3523-4397-4bf1-8359-5c63b548f333"}
[2021-11-03T07:46:27.814Z] debug protocol Handshake completed {"token":"ff9d3523-4397-4bf1-8359-5c63b548f333"}
[2021-11-03T07:46:27.815Z] debug exthost Connecting... {"token":"ff9d3523-4397-4bf1-8359-5c63b548f333"}
[2021-11-03T07:46:27.818Z] debug exthost Getting NLS configuration... {"token":"ff9d3523-4397-4bf1-8359-5c63b548f333"}
[2021-11-03T07:46:27.819Z] debug vscode 1 active exthost connection(s)
[2021-11-03T07:46:27.819Z] debug exthost Spawning extension host... {"token":"ff9d3523-4397-4bf1-8359-5c63b548f333"}
[2021-11-03T07:46:27.825Z] debug exthost Waiting for handshake... {"token":"ff9d3523-4397-4bf1-8359-5c63b548f333"}
[2021-11-03T07:46:28.709Z] debug exthost Handshake completed {"token":"ff9d3523-4397-4bf1-8359-5c63b548f333"}
[2021-11-03T07:46:28.709Z] debug exthost Sending socket {"token":"ff9d3523-4397-4bf1-8359-5c63b548f333"}
[2021-11-03T07:46:41.260Z] debug management Disconnected {"token":"641726d1-1aad-4221-89fa-b0c3cf4368cd"}
[2021-11-03T07:46:41.260Z] debug exthost Got disconnected message {"token":"ff9d3523-4397-4bf1-8359-5c63b548f333"}
[2021-11-03T07:46:41.261Z] debug exthost Disconnected {"token":"ff9d3523-4397-4bf1-8359-5c63b548f333"}
[2021-11-03T07:47:26.428Z] debug 1 active connection
[2021-11-03T07:48:26.428Z] debug 1 active connection
[2021-11-03T07:51:34.479Z] debug vscode got message from code-server {"type":"socket"}
[2021-11-03T07:51:34.480Z] debug protocol Initiating handshake... {"token":"641726d1-1aad-4221-89fa-b0c3cf4368cd"}
[2021-11-03T07:51:34.482Z] debug vscode got message from code-server {"type":"socket"}
[2021-11-03T07:51:34.482Z] debug protocol Initiating handshake... {"token":"ff9d3523-4397-4bf1-8359-5c63b548f333"}
[2021-11-03T07:51:34.490Z] debug protocol Handshake completed {"token":"641726d1-1aad-4221-89fa-b0c3cf4368cd"}
[2021-11-03T07:51:34.491Z] debug management Reconnecting... {"token":"641726d1-1aad-4221-89fa-b0c3cf4368cd"}
[2021-11-03T07:51:34.492Z] debug protocol Handshake completed {"token":"ff9d3523-4397-4bf1-8359-5c63b548f333"}
[2021-11-03T07:51:34.492Z] debug exthost Reconnecting... {"token":"ff9d3523-4397-4bf1-8359-5c63b548f333"}
[2021-11-03T07:51:34.493Z] debug exthost Sending socket {"token":"ff9d3523-4397-4bf1-8359-5c63b548f333"}

Note that I sent the pwa app to the background at 2021-11-03T07:46:41.261Z, and after 5 minutes, reopened the app at 2021-11-03T07:51:34.493Z.

Screenshots comparing macOS Safari vs iPadOS Safari

Network log on macOS Safari when clicking an image

Please note that after service_worker.js is called, fake.html, main.css, main.js, porto1_warped.png is loaded sequentially. This is what should happen when loading an image.

Network log on iPadOS Safari when clicking an image

On iPad, however, even after service_worker.js is called, nothing happens.

Console log on iPadOS Safari when clicking an image

Every time I click an image file I see an error Error while parsing the 'sandbox' attribute: 'allow-downloads' is an invalid sandbox flag. but I don’t think this is the main cause of the issue because the same error message appears in macOS Safari.

Source log on iPadOS Safari when clicking an image

The image above shows Socket log each time I click the image file. It seems up and running. (It reads “Binary Frame” in Korean.)

Log when restarting code-server instance

Now with that pwa open, I tried restarting code-server, and then noticed an error message that wasn’t there before.

shp7724@bagsinhong-ui-MacBookPro ~ % code-server --log debug
[2021-11-03T08:10:30.088Z] info  code-server 3.12.0 4cd55f94c0a72f05c18cea070e10b969996614d2
[2021-11-03T08:10:30.089Z] info  Using user-data-dir ~/.local/share/code-server
[2021-11-03T08:10:30.100Z] info  Using config file ~/.config/code-server/config.yaml
[2021-11-03T08:10:30.100Z] info  HTTP server listening on http://0.0.0.0:8888 
[2021-11-03T08:10:30.100Z] info    - Authentication is enabled
[2021-11-03T08:10:30.100Z] info      - Using password from ~/.config/code-server/config.yaml
[2021-11-03T08:10:30.100Z] info    - Not serving HTTPS 
[2021-11-03T08:10:32.732Z] error vscode is not running Error: vscode is not running
    at VscodeProvider.send (/usr/local/Cellar/code-server/3.12.0/libexec/out/node/vscode.js:121:19)
    at VscodeProvider.sendWebsocket (/usr/local/Cellar/code-server/3.12.0/libexec/out/node/vscode.js:117:14)
    at async /usr/local/Cellar/code-server/3.12.0/libexec/out/node/routes/vscode.js:205:5
[2021-11-03T08:10:32.735Z] error vscode is not running Error: vscode is not running
    at VscodeProvider.send (/usr/local/Cellar/code-server/3.12.0/libexec/out/node/vscode.js:121:19)
    at VscodeProvider.sendWebsocket (/usr/local/Cellar/code-server/3.12.0/libexec/out/node/vscode.js:117:14)
    at async /usr/local/Cellar/code-server/3.12.0/libexec/out/node/routes/vscode.js:205:5
[2021-11-03T08:10:32.735Z] error vscode is not running Error: vscode is not running
    at VscodeProvider.send (/usr/local/Cellar/code-server/3.12.0/libexec/out/node/vscode.js:121:19)
    at VscodeProvider.sendWebsocket (/usr/local/Cellar/code-server/3.12.0/libexec/out/node/vscode.js:117:14)
    at async /usr/local/Cellar/code-server/3.12.0/libexec/out/node/routes/vscode.js:205:5
[2021-11-03T08:10:32.738Z] error vscode is not running Error: vscode is not running
    at VscodeProvider.send (/usr/local/Cellar/code-server/3.12.0/libexec/out/node/vscode.js:121:19)
    at VscodeProvider.sendWebsocket (/usr/local/Cellar/code-server/3.12.0/libexec/out/node/vscode.js:117:14)
    at async /usr/local/Cellar/code-server/3.12.0/libexec/out/node/routes/vscode.js:205:5
[2021-11-03T08:10:33.576Z] error vscode is not running Error: vscode is not running
    at VscodeProvider.send (/usr/local/Cellar/code-server/3.12.0/libexec/out/node/vscode.js:121:19)
    at VscodeProvider.sendWebsocket (/usr/local/Cellar/code-server/3.12.0/libexec/out/node/vscode.js:117:14)
    at async /usr/local/Cellar/code-server/3.12.0/libexec/out/node/routes/vscode.js:205:5
[2021-11-03T08:10:33.617Z] error vscode is not running Error: vscode is not running
    at VscodeProvider.send (/usr/local/Cellar/code-server/3.12.0/libexec/out/node/vscode.js:121:19)
    at VscodeProvider.sendWebsocket (/usr/local/Cellar/code-server/3.12.0/libexec/out/node/vscode.js:117:14)
    at async /usr/local/Cellar/code-server/3.12.0/libexec/out/node/routes/vscode.js:205:5
[2021-11-03T08:10:35.345Z] debug forking vs code...
[2021-11-03T08:10:35.774Z] debug setting up vs code...
[2021-11-03T08:10:35.778Z] debug vscode got message from code-server {"type":"init"}
[2021-11-03T08:10:37.099Z] debug vscode got message from code-server {"type":"socket"}
...

Notes

• I’m using Let’s Encrypt with NGINX, and there seems no problem in HTTPS connection.
• The same issue happens either on safari or pwa mode on iPad

Thanks for maintaining this wonderful project. Any help would be greatly appreciated.

This issue can be reproduced in VS Code: No (tested in vscode.dev)

[shp7724]

I’m glad to find out that I’m not the only one. 🥲

Do you know if this happens on vscode.dev? If it does, then it’s an upstream bug.

No, it does not happen on vscode.dev. Please refer to the test video attached below.

A bigger issue for me is, being unable to load image means being unable to use any webview-based extentions, such as GitGraph.

The browser log I posted above shows what happens when you open PWA again. If you need anything else about the log, feel free to ask. I really want to help solve the issue.

Thank you.

Test Video on vscode.dev

https://user-images.githubusercontent.com/33917774/141160381-9dea9c0c-69c5-4d7b-adcc-066573816c76.MP4

[shp7724]

@jsjoeio Upgrading from 3.12.0 to 4.1.0 seems to have fixed this issue.