时间戳

首页 > 解决方案 > JS内容未在vscode webview中加载

visual-studio-code - JS内容未在vscode webview中加载

问题描述

我正在开发我的第一个 vscode 扩展。尝试创建 webview 并在 vscode 编辑器中打开网页。

案例 1：我使用带有沙盒属性的 iframe。当我尝试加载在本地运行的http站点时，我可以看到 js 内容没有在 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>`;
    }

案例2：

注意：控制台中没有错误日志。

如果我遗漏了什么，你能告诉我吗？

标签： visual-studio-codevscode-extensions

解决方案

如果您可以查看控制台日志（通过使用命令：）Open Webview Developer Tools，您可能会看到一些安全错误，如下所示。

拒绝框架“http://127.0.0.1:3000/”，因为祖先违反了以下内容安全策略指令：“frame-ancestors *

拒绝显示文档，因为 X-Frame-Options 禁止显示。

因此，您需要更改特定的内容安全策略才能将您的域加载到 iframe 中。

  1. https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-src
  2. https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors

就我而言，它在更新frame-srcCSP 策略后起作用。

推荐阅读