Adopt VS Code's 'asWebviewUri' API

[mjbvz]

Hi, I maintain VS Code's Webview API

Issue

Our telemetry suggests that your extension uses webviews and may be loading resources in these webviews using hardcoded vscode-resource: URIs. These URIs have some important limitations and don't work properly when VS Code is run in a browser. We are also making changes in the desktop version of VS Code that may cause these URIs to not work properly in future versions of VS Code.

While we are making our best effort to continue support existing webview extensions that use vscode-resource: URIs on desktop versions of VS Code, we will not able to fully support all uses cases.

Fix

To ensure that your extension continues to work in as many environments as possible—including on web and remotely—please:

• Switch to use the Webview.asWebviewUri function for loading resources.

• Switch to use the Webview.cspSource property in content security policies.

These APIs shipped around 2 years ago so they should be available in all modern versions of VS Code. You can find additional information about the issue here: microsoft/vscode#97962

Let me know if you have any questions about this change

[mhutchie]

Thanks for reaching out about this!

I've been trying to manage when it would be best to increase the minimum version requirement of the extension, and I've been aware of the limitations of vscode-resource, and its replacement asWebviewUri since it was first released. As indicated by the Visual Studio Code release notes here, and the vscode.d.ts typings, asWebviewUri was only introduced in Visual Studio Code 1.38.0 August 2019 (10 months ago), not two years ago as you mentioned.

Up until recently there was minimal benefit to upgrade the minimum version requirement of the extension to support asWebviewUri, as the current method still worked, and from the information I've received only a relatively small number of users indicating they use Visual Studio Code in a web browser. I held off the upgrade as any users that use an older version of Visual Studio Code would no longer be able to receive updates to Git Graph.

As you've indicated that vscode-resource is reaching its EOL, I'll definitely migrate Git Graph to use asWebviewUri in the next available release (in around a months time). Unfortunately its too late for the migration to be included in Git Graph 1.23.0 (which I'm intending to release this weekend).

[mjbvz]

Yes I guess it's still 2020 :)

A very high percentage of users are either on the current VS Code release or one version back so you generally don't have to worry very much about breaking users by updating the minimum VS Code version. We on VS Code only support the current release

[mhutchie]

Thank you, it’s really useful to know that a high percentage of Visual Studio Code users are using the current release or one version back!

[mhutchie]

@mjbvz It looks like the latest vscode insiders build requires asWebviewUri to be used, no users of Git Graph can use the extension anymore.

Is there any way for you to revert this change to extend support for the old vscode-resource: method (which was only released 10 months ago)?

I can ship a release of Git Graph if it is non-negotiable in the next few days.

[mjbvz]

@mhutchie The current insiders build is using the old vscode-resource scheme so I don't think this is related. Taking a look now

[mjbvz]

Should be fixed by microsoft/vscode@8e45a2f

Thanks for catching this

[mhutchie]

Thanks @mjbvz for fixing this so quickly. I'll let the Git Graph users know that it should be fixed in one of the next insiders build.

[mhutchie]

This will be available in v1.24.0.

If you'd like to use it before the next release, you can download v1.24.0-beta.2, and install it following the instructions provided here.

[mhutchie]

Hi @mjbvz,

After making the changes you mentioned with asWebviewUri & cspSource in this commit, I've been attempting to test the extension in Google Chrome with Visual Studio Code running in a Codespace. After installing v1.24.0-beta.2, the first pre-release with these changes, and opening the Git Graph View in a Git repository, I get the following CSP violation errors that prevent the Webview's CSS & JS from loading:

The rendered CSP element:

<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src https://*.vscode-webview-test.com/5763d909d5f12fe19f215cbfdd29a91c0fa9208a 'unsafe-inline'; script-src https://*.vscode-webview-test.com/5763d909d5f12fe19f215cbfdd29a91c0fa9208a 'nonce-sjxcEyDFVCIX6xKWNIpZ6PCdEkjjB7Rp'; img-src data:;">

blocks the following styles & scripts:

<link rel="stylesheet" type="text/css" href="https://cad27183-3a94-4b14-b661-bca38f486a4b.vscode-webview-test.com/5763d909d5f12fe19f215cbfdd29a91c0fa9208a/vscode-resource/file///home/vsonline/.vscode-remote/extensions/mhutchie.git-graph-1.24.0-beta.2/media/out.min.css">

<script src="https://cad27183-3a94-4b14-b661-bca38f486a4b.vscode-webview-test.com/5763d909d5f12fe19f215cbfdd29a91c0fa9208a/vscode-resource/file///home/vsonline/.vscode-remote/extensions/mhutchie.git-graph-1.24.0-beta.2/media/out.min.js"></script>

It appears that because the value of cspSource doesn't end with a /, any URI's that are contained within cspSource are blocked. If I manually add a trailing / to cspSource, everything works perfectly.

Another extension that also uses a Webview is having the same issue.

1. What do I need to do to get this working?

2. In your Webview example, I see you use a nonce for the script CSP instead of using cspSource. Is there a specific reason why a nonce has to be used instead of cspSource for this usage?

   • After testing this approach I can get the JS resource to load fine, however if I try the same for the <link>'ed CSS resource, the UI looks correct but the console still contains a single CSP violation from index.html (of the parent iframe):
     

3. On some pages like 1.38.0 Release Notes and in the @types/vscode 1.38.0, it indicates asWebviewUri & cspSource were introduced in Visual Studio Code 1.38.0. Other pages like Remote Development and Codespaces indicate they were first introduced in Visual Studio Code 1.39.0. Which is correct? (I have assumed the typings file is the source of truth, but I'd like to confirm it)

[mhutchie]

@mjbvz, I’d appreciate it if you were able to respond to my questions regarding cspSource, or let me know when you’ll be able to look into this. (I’ve edited them based on the findings I’ve made since my initial reply.)

I’m needing to have browser support (including Microsoft Codespaces) in Git Graph 1.24.0, and this is the last deliverable holding back the release.