Arn*_*mer 2 javascript webview meta-tags typescript vscode-extensions
我正在编写一个使用 webview 的 vsc 扩展。扩展本身工作正常，但我的 web 视图中的 JS 和 CSS 未加载。
我在 webview 控制台中不断收到错误，例如：
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 元标记：
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src nonce-${nonce}; style-src nonce-${nonce};">
这是我的网络视图模板：
`<!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 文档中所示：
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 的原因，它被阻止了，但我不明白为什么。我遵循了这里的所有说明：
https://code.visualstudio.com/api/extension-guides/webview#content-security-policy
并查看了链接到此处的许多示例 CSP 标签：
https://github.com/microsoft/vscode/issues/79340
但仍然没有加载任何内容。
这是我的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 而被阻止。
小智 6
我也有和你类似的情况。#
这extensionPath是 的属性ExtensionContext，您应该首先访问ExtensionContext您的扩展程序的 来获取extensionPath。在文档中ExtensionContext，
ExtensionContext 的实例作为扩展的 activate-call 的第一个参数提供。
默认情况下，您的分机的激活呼叫是function activate(context)。您可以ExtensionContext使用此范围内的参数进行访问context。因此，如果您想获取扩展名的路径，您应该使用context.extensionPath.
我强烈建议在标签中添加安全策略<meta>和本地资源控制，如下localResourceRoots所示
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">，表示允许所有资源，但可能会出现安全问题。
| 归档时间： |
|
| 查看次数： |
2339 次 |
| 最近记录： |