为什么我的VSC扩展Web视图中未加载JS/CSS [英] Why is JS/CSS not loaded in my VSC extension webview
问题描述
我正在编写一个使用Webview的vsc扩展.该扩展程序本身可以正常工作，但未加载我的Web视图中的JS和CSS.
I'm writing a vsc extenion that uses a webview. The extension itself works fine but the JS and CSS in my webview are not being loaded.
我在Webview控制台中不断出现错误，例如:
I keep getting errors in the webview console like:
VM102 main.js:12 Refused to load the stylesheet 'vscode-resource://file///full/disc/path/to/vsc-extension/resources/css/webview-package.css' because it violates the following Content Security Policy directive: "style-src nonce-LSAOCrvSSPay9prF40mc5JyRJ9BzFUKR". Note that 'style-src-elem' was not explicitly set, so 'style-src' is used as a fallback.
(anonymous) @ VM102 main.js:12
VM102 main.js:12 Refused to load the script 'vscode-resource://file///full/disc/path/to/vsc-extension/resources/js/webview-package.js' because it violates the following Content Security Policy directive: "script-src nonce-LSAOCrvSSPay9prF40mc5JyRJ9BzFUKR". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
我的Web视图模板中具有以下CSP元标记:
I have the following CSP meta tag in my template for the web view:
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src nonce-${nonce}; style-src nonce-${nonce};">
这是我的webview模板:
This is my webview template:
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src nonce-${nonce}; style-src nonce-${nonce};">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>${packageName}</title>
<link href="${cssUri}" nonce="${nonce}" rel="stylesheet" type="text/css">
</head>
<body>
<h1 id="${EXT}__name">${packageName}</h1>
<script nonce="${nonce}" src="${scriptUri}"></script>
</body>
</html>`
创建资源的路径，如webview文档中所示:
The paths to the resources are created as shown in the webview docs:
const scriptPath = vscode.Uri.file(
path.join(extensionPath, FS_FOLDER_RESOURCES, FS_FOLDER_JS, FS_WEBVIEW_PACKAGE_JS)
);
const cssPath = vscode.Uri.file(
path.join(extensionPath, FS_FOLDER_RESOURCES, FS_FOLDER_CSS, FS_WEBVIEW_PACKAGE_CSS)
)
我已经尝试了各种CSP格式，并不断出错，但我的代码没有加载.由于CSP，它被阻止了，但是我不明白为什么.我按照这里的所有说明进行操作:
I have experimented with various CSP formats and keep having errors, my code is just not loading. It is blocked due to the CSP, but I don't understand why. I followed all the instructions here:
https://code.visualstudio.com/api /extension-guides/webview#content-security-policy
并查看了许多链接到此处的示例CSP标签:
and looked a lots of example CSP tags linked to here:
https://github.com/microsoft/vscode/issues/79340
但是仍然没有加载任何东西.
But still nothing is ever loaded.
这是我的CSS:
html,
body {
background: red;
}
h1 {
background: blue;
}
JS看起来像这样:
// This script will be run within the webview itself
// It cannot access the main VS Code APIs directly.
(function () {
console.log('### test);
alert('### test');
}());
但是我不认为这是问题所在，因为CSP阻止了它们.
But I don't think they are the problem as they are blocked due to CSP.
推荐答案
我和你有类似的情况. #
I had a similar situation to you. #
extensionPath是ExtensionContext的属性，应首先访问扩展名的ExtensionContext以获得extensionPath.在文档ExtensionContext
The extensionPath is a property of ExtensionContext, You should access the ExtensionContext of your extension first to get extensionPath. In the docs ExtensionContext,
ExtensionContext的实例作为扩展的激活调用的第一个参数提供.
默认情况下，分机的激活呼叫为function activate(context).您可以在此范围内使用参数context访问ExtensionContext.
因此，如果要获取扩展路径，则应使用context.extensionPath.
By default, the activate-call of your extension is function activate(context). You can access ExtensionContext using the parameter context in this scope.
So if you want to get the path of extension, you should use context.extensionPath.
我强烈建议在<meta>标签中添加安全策略，并在localResourceRoots中添加本地资源控制，如下所示
And I highly recommend adding security policy in the <meta> tag and a local resource contorl in localResourceRoots like below
vscode.ViewColumn.One,
{
// Enable scripts in the webview
enableScripts: true
// Only allow the webview to access resources in our extension's media directory
localResourceRoots: [vscode.Uri.file(path.join(context.extensionPath, 'media'))]
}
);
HTML标记
<meta
http-equiv="Content-Security-Policy"
content="default-src 'none'; img-src ${webview.cspSource} https:; script-src ${webview.cspSource}; style-src ${webview.cspSource};"
/>
当您不编写<meta http-equiv="Content-Security-Policy">时未激活安全策略，这意味着允许所有资源，但可能会出现安全问题.
Security Policy is not activated when you don't write <meta http-equiv="Content-Security-Policy">, it means to allow all resources, but it could occur security issues.
这篇关于为什么我的VSC扩展Web视图中未加载JS/CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
