Unable to load webview on iPad

[shp7724]

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)

[jsjoeio]

Thanks for the thorough report! This looks strangely similar to this issue. Can you try this solution?

[shp7724]

I tried it but it didn't solve my problem. I guess the issue has something to do with service-worker.js, but have no idea where to dig into it further.

[shp7724]

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, ..).

I captured some browser logs at the STEP 2, when the webviews are loaded properly. It might be worth a look.

The log written in Korean could be translated as:

Failed to load resource: The certificate for this server is not valid. You might be connected to a server disguised as 'vcode-remote+code-002efindy-002eco-002ekr.vscode-resource.vscode-webview.net', which could expose your secret information at risk.

Below are the logs at STEP 3 and 4:

Please note that the first two logs "[GitLens]" – "[28] GitService.onWindowStateChanged completed • 0 ms" are printed when I moved the PWA to the background.

A few seconds later, right after I brought the app to the foreground, I saw the error messages saying the websocket connection is aborted. I'm not sure though whether it managed to recover the connection later. But since then my PWA app stops loading webviews on iPad. Refreshing the page doesn't help.

Update

I just found that restarting the PWA app partly solves the issue: it goes to STEP 2. However, restarting the app every time I open it would be bothersome.

Do you see any possible causes for this issue here?

Thanks.

[jsjoeio]

The certificate for this server is not valid

Hmm...could it be that your browser does not respect the authority of your certificate and that's causing it? 🤔

I just found that restarting the PWA app partly solves the issue: it goes to STEP 2. However, restarting the app every time I open it would be bothersome.

Hmm...nothing specific comes to mind. @code-asher any ideas?

[shp7724]

Well, Safari seems to fully trust (without any warning) the certificate at least for my domain. I don't know why Safari doesn't trust vcode-remote+code-002efindy-002eco-002ekr.vscode-resource.vscode-webview.net...

Even if that was the cause of the problem, it doesn't make sense to me that it fails to load webview only after resuming the app :(

By any chance can you try reproducing this issue on your side? If it's confirmed that I'm the only one experiencing this issue, I might as well go through the setup process all over again.

[jsjoeio]

Unfortunately, I don't have the bandwidth to replicate the exact same environment setup. But what I can say is 3.12.0 works when deploying to Railway and accessing via the PWA on my iPad 14.8. Therefore I can confirm:

• 3.12.0 does work on iPad
• the PWA does work on iPad

Video

RPReplay_Final1636049722.MP4

[shp7724]

Thanks for the test!
Can you please test the following too?

Steps to Reproduce

1. Open PWA on iPad.
2. Go to Homescreen.
3. Wait for 10 seconds.
4. Open PWA again.
5. Try to open any image.
6. Check if the image is loaded successfully.

Video

This is what happens on my side.

RPReplay_Final1636520409.MP4

[jsjoeio]

Wow, that was super easy to follow and it reproduced on mine! Nice catch! I wonder what's happening 🤔 We'll have to look into this.

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

Video

RPReplay_Final1636563240.MP4

[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

RPReplay_Final1636564096.MP4

[jsjoeio]

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

Ah, that is a big issue.

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.

Those will help a ton! I guess we'll have to dig into this further. @code-asher any ideas?

We have some big priorities for getting the next release out but after that, we can take a look!