我正在编写一个使用 webview 的 vsc 扩展。扩展本身工作正常，但我的 webview 中的 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 而被阻止。
我和你有类似的情况。 #
extensionPathExtensionContextExtensionContextextensionPathExtensionContextExtensionContext 的实例作为扩展的激活调用的第一个参数提供。
默认情况下，您的分机的激活呼叫是
function activate(context)ExtensionContextcontextcontext.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};"
/>
Security Policy 不写
<meta http-equiv="Content-Security-Policy">对于那些到达这里试图弄清楚为什么他们的 css 和 js 在调试 (F5) 期间在 webview 中加载正常，但在打包 (vsce 包) 后不显示的人，我想提供帮助。
我将我的 .css 和 .js 文件放在一个文件夹中，该文件夹包含实现 webview 的类。像 /src/components/a/folder/js/some.js 和 /src/components/a/folder/css/style.css.
但是在包装过程中事情变得混乱了。在与 webpack 进行了大量争论之后，我将所有内容都移到了根目录下的媒体文件夹中（如示例）。问题就解决了。
我最后的家是 /media/js/some.js 和 /medida/css/style.css.