vscode: WebView port mapping not working under Remote SSH

VSCode Version: 1.47.0, 1.48.0-insider
OS Version: macOS 10.15.5
Remote SSH: Ubuntu 18.04

Steps to Reproduce:

Install vscode-R extension.
Set r.sessionWatcher to true, and reload vscode.
Use Remote-SSH to connect to remote Linux server (where R is installed).
Install vscode-R extension to remote server.
Create R terminal and an R session is started
Run ?get

It starts an http server that provides the R documentation, and a VSCode WebView should show up by the following extension code.

function showBrowser(url: string, title: string, viewer: string | boolean) {
    console.info(`[showBrowser] uri: ${url}, viewer: ${viewer}`);
    if (viewer === false) {
        env.openExternal(Uri.parse(url));
    } else {
        const port = parseInt(new URL(url).port);
        const panel = window.createWebviewPanel(
            'browser',
            title,
            {
                preserveFocus: true,
                viewColumn: ViewColumn[String(viewer)],
            },
            {
                enableScripts: true,
                retainContextWhenHidden: true,
                portMapping: [
                    {
                        extensionHostPort: port,
                        webviewPort: port,
                    },
                ],
            });
        panel.webview.html = getBrowserHtml(url);
    }
    console.info('[showBrowser] Done');
}

function getBrowserHtml(url: string) {
    return `
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    html, body {
        height: 100%;
        padding: 0;
        overflow: hidden;
    }
  </style>
</head>
<body>
    <iframe src="${url}" width="100%" height="100%" frameborder="0" />
</body>
</html>
`;
}

When viewer="Active", the WebView cannot be shown properly with the latest release and insider of VSCode. The iframe content is empty.

<iframe src="http://127.0.0.1:22784/library/base/html/get.html" width="100%" height="100%" frameborder="0">
</body>
</html>
</iframe>

However, if I run the following in R

.vsc.browser("http://127.0.0.1:22784/library/base/html/get.html", viewer = FALSE)

which basically calls showBrowser with viewer=false, then a local web browser is open by env.openExternal(Uri.parse(url)); the web page is properly shown. Only after this, I call ?get, or equivalently

.vsc.browser("http://127.0.0.1:22784/library/base/html/get.html", viewer = "Active")

The WebView could be properly shown.

I guess the port mapping of WebView via Remote SSH somehow is not working and it works with the port mapping enabled by env.openExternal(Uri.parse(url)). Everything works well if the same is done locally.

Does this issue occur when all extensions are disabled?: Yes

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 28
Comments: 31 (16 by maintainers)

Commits related to this issue

Use the new lastCommittedOrigin for remote port forwarding in webviews Fixes #102449 — committed to mjbvz/vscode by mjbvz 4 years ago
Use the new lastCommittedOrigin for remote port forwarding in webviews Fixes #102449 — committed to mjbvz/vscode by mjbvz 4 years ago
Use the new lastCommittedOrigin for remote port forwarding in webviews (#105531) Fixes #102449 — committed to microsoft/vscode by mjbvz 4 years ago

Most upvoted comments

Thanks @mjbvz , not sure what can cause this, will look into it today.

deepak1556 on Aug 31, 2020

@mjbvz I’m testing with the latest insider on both macOS and Ubuntu

Version: 1.48.0-insider
Commit: 15ada625f20086007e2c4aa0d760234360cd648f
Date: 2020-07-30T14:46:01.621Z (1 hr ago)
Electron: 9.1.0
Chrome: 83.0.4103.122
Node.js: 12.14.1
V8: 8.3.110.13-electron.0
OS: Darwin x64 19.6.0

which seems to include your commit to fix this issue (?). But the port mapping still does not work. Am I missing something?

The WebView still does not work

while the vscode.openExternal works:

renkun-ken on Jul 31, 2020

I’m wondering if there’s anything that could be done on our side to walk-around this at the moment? It looks like this cannot be fixed in a short term due to upstream issue.

Is it possible that we take advantage of the mechanism behind env.openExternal(Uri.parse(url)) so that the port mapping is enabled?

renkun-ken on Aug 10, 2020

Filed https://github.com/electron/electron/issues/24820 to track the electron issue upstream

@deepak1556 Instead of fixing my new issue, I think we should prioritize either:

Adding additional request metadata for onBeforeRequest: https://github.com/electron/electron/issues/24303
Enabling service workers for our webviews. This should bypass the need for using onBeforeRequest

mjbvz on Aug 3, 2020

Any updates on this? It looks like extensions that rely on WebView port mapping are completely broken.

renkun-ken on Jul 21, 2020