Microsoft/vscode

Support opening links in a new window from within webviews

Open

#186,043 opened on 2023年6月24日

GitHub で見る
 (9 comments) (39 reactions) (1 assignee)TypeScript (10,221 forks)batch import
feature-requesthelp wantedkeepwebview

Repository metrics

Stars
 (74,848 stars)
PR merge metrics
 (平均マージ 11h 43m) (30d で 1,000 merged PRs)

説明

Summary

In Figma for VS Code, we would like to support links which open new windows, either using <a target="_blank"> links or window.open in JS, from within an iframe in a webview (the extension opens a webview, which contains Figma in an iframe).

We believe this would be generally useful functionality for other extensions, e.g. an extension which loads documentation in an iframe may want to open new windows, without changing the source code of the documentation page.

Current behaviour

See video:

https://github.com/microsoft/vscode/assets/117714347/f49189ca-4325-449e-96f5-7e1cbb9034fc

Inside a webview

Clicking a <a target="_blank"> link in a top-level webview opens a new browser immediately. Clicking a window.open link in a top-level webview gives an error Blocked opening '...' in a new window because the request was made in a sandboxed frame whose 'allow-popups' permission is not set.

Inside an iframe inside a webview (this is how the Figma for VS Code extension works)

Clicking a <a target="_blank"> link or a window.open link in a top-level webview gives an error Blocked opening '...' in a new window because the request was made in a sandboxed frame whose 'allow-popups' permission is not set.

Desired behaviour

Ideally clicking a link which tries to open in a new window would show the usual Do you want Code to open the external website? dialog box, and would open the link in a browser if the user presses Open.

Alternatively, VS Code could add allow-popups to the iframe, so that the links immediately open a new browser. However, it seems better to go via the usual confirmation dialog flow.

Workarounds

For links which we control, we can replace them with a postMessage call which then calls vscode.openExternal. However, for links embedded in third party Figma plugins, this would require the third parties to modify their code, which might mean substantial extra work or may be difficult for them to do (e.g. if the plugin is actually an iframe around their main web app, they may not wish to add Figma/VS Code specific code in there).

We have investigated replacing window.open with a new implementation which calls postMessage and/or adding a global document.body.addEventListener('click'... listener to intercept clicks on <a target="_blank"> links, but this doesn't feel great, and does not work if the plugin itself has its own iframe(s), as we cannot control these or inject code into it.

コントリビューターガイド