How to enable target="_black" from IFRAME in VSCode Webview - webview

Question

When I use the iframe in VSCode's WebView, popups are disabled by default. That is if you have an anchor tag with target="_black", it will not open a new browser.
Is there any way to resolve this problem?
const panel = vscode.window.createWebviewPanel('openWebview',
'Title',
vscode.ViewColumn.One,
{
enableScripts: true
});
panel.webview.html = getWebviewContent();
....
....
function getWebviewContent() {
return `<iframe src="http://localhost:8080/homepage" title="Title"></iframe>`;
}
The homepage has some external references which use the anchor tag
OWASP
If I click this link within the iFrame nothing happens. I wanted to open the link in an external web browser.
Thanks you

Answer 1

I did not find a straight solution. There is a restriction in the VS code Webview. Hence, the only solution I can think about is to add a message support in your html page.
Basically, when you click on a link we will send a message event to the parent frame which can be captured in the in the WebView.
For example, HTML page should be updated as
<a href="https://owasp.org" rel="noopener noreferrer" target="_blank"
onClick="window.parent.postMessage(this.href, '*')">OWASP</a>
And in VS code plugin,
const panel = vscode.window.createWebviewPanel('openWebview',
'Title', vscode.ViewColumn.One, { enableScripts: true });
panel.webview.onDidReceiveMessage(
message => {
switch (message.command) {
case 'show':
vscode.env.openExternal(vscode.Uri.parse(message.text));
return;
}
},
undefined,
context.subscriptions
);
panel.webview.html = getWebviewContent();
});
...
...
function getWebviewContent() {
return `<script>
window.addEventListener('message', function (e) {
const vscode = acquireVsCodeApi();
vscode.postMessage({command: 'show', text: e.data});
}, false);
</script>
<iframe src=" http://localhost:8080/homepage" ></iframe>`;
}