Support opening links in a new window from within webviews
#186 043 ouverte le 24 juin 2023
Métriques du dépôt
- Stars
- (74 848 stars)
- Métriques de merge PR
- (Merge moyen 11h 43m) (1 000 PRs mergées en 30 j)
Description
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.