Menu
Im developing my first vscode extension. trying to create webview and open a webpage inside vscode editor.
Case 1 : Im using iframe with sandbox attributes. when i tried loading http site which runs locally, i can see js content not getting loaded in webview.
const panel = vscode.window.createWebviewPanel(
'Editor',
'Editor',
vscode.ViewColumn.One,
{
enableScripts: true
}
);
panel.webview.html = getWebviewContent();
function getWebviewContent() {
return `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<iframe src="http://localhost:8988" sandbox="allow-scripts" width="100%" height="400px"></iframe>
</body>
</html>`;
}
Case 2 :
https://cssgradient.io/. In that site also js content is not getting loaded.Note : No error logs in console.
Can you please let me know if im missing something?
823
asked Jan 01 '26 02:01
If you can check on the console logs (by using the command: Open Webview Developer Tools), you may can see some security errors as follows.
Refused to frame 'http://127.0.0.1:3000/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors *
Refused to display document because display forbidden by X-Frame-Options.
Therefore you need to change specific Content Security Policies in-order to load your domain in an iframe.
In my case, it works after update frame-src CSP policy.
171
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
