VS Code 在 Webview 中尝试加载脚本和 CSS 资源时显示 401 错误。

huangapple go评论72阅读模式
英文:

VS Code showing 401 trying to load script and CSS assets in a Webview

问题

I'm trying to load an HTML page referencing local JS and CSS files into a Webview. Details below on the code I'm using to construct the URIs (the results don't look correct, but the code I believe matches other examples online). The Webview Developer Tools show 401 errors for the assets. How can I get these loaded?

我正在尝试将引用本地JS和CSS文件的HTML页面加载到Webview中。以下是我用来构建URI的代码(结果看起来不正确,但我相信代码与在线示例相匹配)。Webview开发工具显示资源的401错误。如何加载这些资源?

I'm producing HTML with this in the <head>. (I have both logged this HTML as well as viewed the source elements through the Webview Developer tools to verify.)

我在<head>中生成了这个HTML。(我已经记录了这个HTML,也通过Webview开发工具查看了源元素以进行验证。)

<meta http-equiv="Content-Security-Policy"
      content="default-src 'none'; style-src 'self' https://*.vscode-cdn.net; script-src 'nonce-1CAM0Lr33whIXdLU4Rz5KKxJaq0hduY3'">
<link href="https://file%2B.vscode-resource.vscode-cdn.net/Users/phrogz/Code/visual-scxml-editor/resources/baseeditorstyles.css"
      rel="stylesheet">
<script nonce="1CAM0Lr33whIXdLU4Rz5KKxJaq0hduY3" type='module'
        src="https://file%2B.vscode-resource.vscode-cdn.net/Users/phrogz/Code/visual-scxml-editor/resources/editorglue.js"></script>

The URIs are being produced by this code:

这些URI是由以下代码生成的:

private resourceURI(file: string) {
    return vscode.Uri.joinPath(this.extensionURI, 'resources', file);
}

private webviewURI(file: string) {
    return this.panel.webview.asWebviewUri(this.resourceURI(file)).toString();
}

// …

const editorCSSURI = this.webviewURI('baseeditorstyles.css');

… where extensionURI is from context.extensionUri with contents: {scheme: 'file', authority: '', path: '/Users/phrogz/Code/visual-scxml-editor', query: '', fragment: '', …}. That path is correct.

… 其中 extensionURI 来自 context.extensionUri,其内容为:{scheme: 'file', authority: '', path: '/Users/phrogz/Code/visual-scxml-editor', query: '', fragment: '', …}。该 path 是正确的。

As best I can tell, that's the same effective code path as shown in this VS Code example for generating the webview URI.

据我所知,这与用于生成Webview URI的 此VS Code示例 中显示的代码路径相同。

The result, however, is that every CSS and JS asset shows net::ERR_ABORTED 401 in the Webview Developer Tools.

然而,结果是每个CSS和JS资源在Webview开发工具中都显示为 net::ERR_ABORTED 401

Any thoughts as to what I'm doing wrong?

对于我到底做错了什么,有什么想法吗?

Investigation

调查

@Andrew below suggests that asWebviewUri() should be returning a URI with a scheme of vscode-resource. Modifying my webviewURI() function to output debug information:

@下面的Andrew建议asWebviewUri() 应该返回一个带有 vscode-resource 方案的URI。修改我的 webviewURI() 函数以输出调试信息:

console.log({
   file,
   fileURI:this.resourceURI(file), 
   webURI:this.panel.webview.asWebviewUri(this.resourceURI(file))
})

…shows that it is in fact generating URIs with an https schema and an authority of file+.vscode-resource.vscode-cdn.net:

… 显示它实际上生成的URI具有 https 方案和 file+.vscode-resource.vscode-cdn.net 作为权限:

{file: 'neatxml.js', fileURI: f, webURI: f}
	file: 'neatxml.js'
	fileURI: f {scheme: 'file', authority: '', path: '/Users/phrogz/Code/visual-scxml-editor/resources/neatxml.js', query: '', fragment: '', …}
		_formatted: null
		_fsPath: null
		authority: ''
		fragment: ''
		fsPath: ƒ fsPath(){return this._fsPath||(this._fsPath=b(this,!1)),this._fsPath}
		path: '/Users/phrogz/Code/visual-scxml-editor/resources/neatxml.js'
		query: ''
		scheme: 'file'
	webURI: f {scheme: 'https', authority: 'file+.vscode-resource.vscode-cdn.net', path: '/Users/phrogz/Code/visual-scxml-editor/resources/neatxml.js', query: '', fragment: '', …}
		_formatted: null
		_fsPath: null
		authority: 'file+.vscode-resource.vscode-cdn.net'
		fragment: ''
		fsPath: ƒ fsPath(){return this._fsPath||(this._fsPath=b(this,!1)),this._fsPath}
		path: '/Users/phrogz/Code/visual-scxml-editor/resources/neatxml.js'
		query: ''
		scheme: 'https'
英文:

Summary

I'm trying to load an HTML page referencing local JS and CSS files into a Webview. Details below on the code I'm using to construct the URIs (the results don't look correct, but the code I believe matches other examples online). The Webview Developer Tools show 401 errors for the assets. How can I get these loaded?

Details

I'm producing HTML with this in the &lt;head&gt;. (I have both logged this HTML as well as viewed the source elements through the Webview Developer tools to verify.)

&lt;meta http-equiv=&quot;Content-Security-Policy&quot;
      content=&quot;default-src &#39;none&#39;; style-src &#39;self&#39; https://*.vscode-cdn.net; script-src &#39;nonce-1CAM0Lr33whIXdLU4Rz5KKxJaq0hduY3&#39;&quot;&gt;
&lt;link href=&quot;https://file%2B.vscode-resource.vscode-cdn.net/Users/phrogz/Code/visual-scxml-editor/resources/baseeditorstyles.css&quot;
      rel=&quot;stylesheet&quot;&gt;
&lt;script nonce=&quot;1CAM0Lr33whIXdLU4Rz5KKxJaq0hduY3&quot; type=&#39;module&#39;
        src=&quot;https://file%2B.vscode-resource.vscode-cdn.net/Users/phrogz/Code/visual-scxml-editor/resources/editorglue.js&quot;&gt;&lt;/script&gt;

The URIs are being produced by this code:

private resourceURI(file: string) {
	return vscode.Uri.joinPath(this.extensionURI, &#39;resources&#39;, file);
}

private webviewURI(file: string) {
	return this.panel.webview.asWebviewUri(this.resourceURI(file)).toString();
}

// …

const editorCSSURI = this.webviewURI(&#39;baseeditorstyles.css&#39;);

… where extensionURI is from context.extensionUri with contents: {scheme: &#39;file&#39;, authority: &#39;&#39;, path: &#39;/Users/phrogz/Code/visual-scxml-editor&#39;, query: &#39;&#39;, fragment: &#39;&#39;, …}. That path is correct.

As best I can tell, that's the same effective code path as shown in this VS Code example for generating the webview URI.

The result, however, is that every CSS and JS asset shows net::ERR_ABORTED 401 in the Webview Developer Tools.

VS Code 在 Webview 中尝试加载脚本和 CSS 资源时显示 401 错误。

GET https://file+.vscode-resource.vscode-cdn.net/Users/phrogz/Code/visual-scxml-editor/resources/baseeditorstyles.css net::ERR_ABORTED 401
(anonymous) @ index.html?id=084ede1f-0484-44cf-8cd7-1b60312bd463&amp;origin=cf31cd3f-41e9-41ea-861e-c867d65713ed&amp;swVersion=4&amp;extensionId=undefined_publisher.visual-scxml-editor&amp;platform=electron&amp;vscode-resource-base-authority=vscode-resource.vscode-cdn.net&amp;parentOrigin=vscode-file%3A%2F%2Fvscode-app:973
setTimeout (async)
onFrameLoaded @ index.html?id=084ede1f-0484-44cf-8cd7-1b60312bd463&amp;origin=cf31cd3f-41e9-41ea-861e-c867d65713ed&amp;swVersion=4&amp;extensionId=undefined_publisher.visual-scxml-editor&amp;platform=electron&amp;vscode-resource-base-authority=vscode-resource.vscode-cdn.net&amp;parentOrigin=vscode-file%3A%2F%2Fvscode-app:971
(anonymous) @ index.html?id=084ede1f-0484-44cf-8cd7-1b60312bd463&amp;origin=cf31cd3f-41e9-41ea-861e-c867d65713ed&amp;swVersion=4&amp;extensionId=undefined_publisher.visual-scxml-editor&amp;platform=electron&amp;vscode-resource-base-authority=vscode-resource.vscode-cdn.net&amp;parentOrigin=vscode-file%3A%2F%2Fvscode-app:1002

Any thoughts as to what I'm doing wrong?


Investigation

@Andrew below suggests that asWebviewUri() should be returning a URI with a scheme of vscode-resource. Modifying my webviewURI() function to output debug information:

console.log({
   file,
   fileURI:this.resourceURI(file), 
   webURI:this.panel.webview.asWebviewUri(this.resourceURI(file))
})

…shows that it is in fact generating URIs with an https schema and an authority of file+.vscode-resource.vscode-cdn.net:

{file: &#39;neatxml.js&#39;, fileURI: f, webURI: f}
	file: &#39;neatxml.js&#39;
	fileURI: f {scheme: &#39;file&#39;, authority: &#39;&#39;, path: &#39;/Users/phrogz/Code/visual-scxml-editor/resources/neatxml.js&#39;, query: &#39;&#39;, fragment: &#39;&#39;, …}
		_formatted: null
		_fsPath: null
		authority: &#39;&#39;
		fragment: &#39;&#39;
		fsPath: ƒ fsPath(){return this._fsPath||(this._fsPath=b(this,!1)),this._fsPath}
		path: &#39;/Users/phrogz/Code/visual-scxml-editor/resources/neatxml.js&#39;
		query: &#39;&#39;
		scheme: &#39;file&#39;
	webURI: f {scheme: &#39;https&#39;, authority: &#39;file+.vscode-resource.vscode-cdn.net&#39;, path: &#39;/Users/phrogz/Code/visual-scxml-editor/resources/neatxml.js&#39;, query: &#39;&#39;, fragment: &#39;&#39;, …}
		_formatted: null
		_fsPath: null
		authority: &#39;file+.vscode-resource.vscode-cdn.net&#39;
		fragment: &#39;&#39;
		fsPath: ƒ fsPath(){return this._fsPath||(this._fsPath=b(this,!1)),this._fsPath}
		path: &#39;/Users/phrogz/Code/visual-scxml-editor/resources/neatxml.js&#39;
		query: &#39;&#39;
		scheme: &#39;https&#39;

答案1

得分: 1

在过去,可能曾经使用 asWebviewUri() 生成了带有 vscode-resource: 方案的 URI,但这不再正确。由 this.panel.webview.cspSource 生成的CORS策略已正确与其生成的URI对齐以正常工作。

缺少的部分是,当调用 vscode.window.createWebviewPanel() 时,必须传递 localResourceRoots,列出文件可能从哪些位置加载。例如:

const resourcesDir = vscode.Uri.joinPath(context.extensionUri, 'resources');
const panel = vscode.window.createWebviewPanel(
    'scxml', `SCXML ${path.basename(doc.fileName)}`,
    vscode.ViewColumn.Beside,
    {
        enableScripts: true,
        localResourceRoots: [resourcesDir]
    }
);

事实上,我确实已经同时设置了 enableScriptslocalResourceRoots,但由于复制/粘贴错误,我将目录设置为 'media' 而不是实际的 'resources' 目录。

英文:

While in the past it may have been that asWebviewUri() generated URIs with a vscode-resource: scheme, that is no longer true. The CORS policy generated by this.panel.webview.cspSource is properly aligned with the URIs it generates to work.

What is missing is that when vscode.window.createWebviewPanel() is called one must pass along localResourceRoots listing the location(s) where files may be loaded from. For example:

const resourcesDir = vscode.Uri.joinPath(context.extensionUri, &#39;resources&#39;)const panel = vscode.window.createWebviewPanel(
    &#39;scxml&#39;, `SCXML ${path.basename(doc.fileName)}`,
    vscode.ViewColumn.Beside,
    {
        enableScripts: true,
        localResourceRoots: [resourcesDir]
    }
);

I actually had both enableScripts and localResourceRoots set, but due to a copy/paste error I was setting the directory to &#39;media&#39; instead of my actual &#39;resources&#39; directory.

huangapple
  • 本文由 发表于 2023年2月19日 04:56:33
  • 转载请务必保留本文链接:https://go.coder-hub.com/75496348.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定