Test cross origin isolation with webview extensions

[jrieken]

Refs: #137884

• anyOS @lramos15
• Windows @Tyriar
• macOS @kieferrm
• anyOS @eleanorjboyd
• anyOS @rzhao271

Complexity: 4

Create Issue

---

Background: On vscode.dev, we have the ability to enable cross origin isolation - that's the enabler for shared array buffers which unlocks many interesting scenarios (like "vscode-wasi") and 1st level TypeScript/Pylance support. Enabling cross origin isolation (COI) requires us to set two http header COOP and COEP. The latter means only resources that are OK with being embedded will load. This doesn't affect resources from VS Code itself but can affect resources that extensions load. They need to be served with the CORP header.

Testing: Check-off one of the extensions below and play around with their webview (or notebook renderering) features, like GitLens settings editor etc. Observe dev tools for errors

• load https://insiders.vscode.dev/ with the ?vscode-coi-query part
• open Developer Tool, select the "Network" tab, and check "Blocked Request"
• Keep an eye open for blocked requests
• ℹ️ we cannot fix these errors but we need to reach out to the server/CDN that serve these resources. Just append the blocked domains/urls to this issue, only file an issue against the extension if you are certain that they can fix it (inside knowledge)

The sample below is GitHub issue notebook. Notice how avatars aren't loading and how each request shows as blocked.

---

• GitLens https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
• Jupyter https://marketplace.visualstudio.com/items?itemName=ms-toolsai.jupyter
• HexEditor https://marketplace.visualstudio.com/items?itemName=ms-vscode.hexeditor @lramos15
• ExcelViewer https://marketplace.visualstudio.com/items?itemName=GrapeCity.gc-excelviewer
• Volar https://marketplace.visualstudio.com/items?itemName=Vue.volar

[jrieken]

Servers that don't set the CORP header:

1. https://avatars.githubusercontent.com/ (see sample above)
2. https://ms-toolsai.gallery.vsassets.io/_apis/public/gallery/publisher/ms-toolsai/extension/jupyter-renderers/1.0.9/assetbyname/Microsoft.VisualStudio.Services.Icons.Default (Example of just one, but all extension gallery icons)
3. https://raw.githubusercontent.com/
4. https://microsoft.github.io

[eleanorjboyd]

ExcelViewer did not have any blocked request when running the extension on .xlsx or .csv files. When searching for and selecting to install the extension I did run into some blocked requests which came from the images and icons on the profile of ExcelViewer on our extension storefront. I included a screenshot below of the number and an example of the image icon for ExcelViewer not rendering.

[rzhao271]

Volar

Blocked links

https://cdn.jsdelivr.net/gh/johnsoncodehk/sponsors/sponsors.png
https://user-images.githubusercontent.com/3253920/145134536-7bb090e9-9dcd-4a61-8096-3c47d6c1a699.png

Other issues

I'm unable to get the extension working in the web. The volar.activated context key is true, but when I try running a Volar command, I get "command not found". There already seems to be an upstream issue at vuejs/language-tools#612.

[kieferrm]

I worked through the golden scenario of jupyter. Everything worked as expected in regards to COI. However, the surface area of Jupyter is much bigger, so there can still be surprises.