Javascript 为什么我的VSC扩展webview中没有加载JS/CSS

我正在编写一个使用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};">

我曾尝试过各种CSP格式，但不断出现错误，我的代码就是无法加载。由于CSP，它被阻止了，但我不明白为什么。我遵循了这里的所有说明：

并查看了大量链接到此处的示例CSP标记：

但仍然没有加载任何内容

这是我的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而被阻止。

我也遇到过类似的情况

extensionPath

是

ExtensionContext

的一个属性，您应该首先访问扩展的

ExtensionContext

，以获取

extensionPath

。在文档

ExtensionContext

中

ExtensionContext的实例作为扩展的激活调用的第一个参数提供

默认情况下，分机的激活调用是

函数激活（上下文）

。您可以在此范围内使用参数

context

访问

ExtensionContext

。 因此，如果要获取扩展路径，应该使用

context.extensionPath

我强烈建议在

标记中添加安全策略，并在

localResourceRoots

中添加本地资源控件，如下所示

vscode.ViewColumn.One，
{
//在webview中启用脚本
enableScripts:true，
//仅允许webview访问扩展的媒体目录中的资源
localResourceRoots:[vscode.Uri.file（path.join（context.extensionPath，'media'））]
}
);

HTML标记

---

当您不编写

时，安全策略不会被激活，这意味着允许所有资源，但可能会出现安全问题。

一个快速解决方法是，在内容安全策略指令中将nonce用单引号括起来：

content=“default src'none'；script src'nonce-${nonce}'；“>

html,
body {
  background: red;
}

h1 {
  background: blue;
}

// This script will be run within the webview itself
// It cannot access the main VS Code APIs directly.
(function () {
  console.log('### test);
  alert('### test');
}());