Azure edge robotics webview not loading

[mjbvz]

Hello All,
I'm in the Azure Edge Robotics team, maintaining the VSCode extension for ROS. We are hitting this issue as well for our Robot Visualizer. It seems to be related to a move from vscode-resource to https?

For example, we have a workspace rooted at c:\ws\tb, which has sources including stl files.
We convert this to a file URI, then to a webview URI. Before the update, it would look something like:
vscode-resource://c%3A/ws/tb/src/turtlebot3/turtlebot3_description/meshes/wheels/right_tire.stl

but now looks like this:

https://47c83f32-da7e-4be3-9b90-42735e27223e.vscode-webview-test.com/vscode-resource/file///c%3A/ws/tb/src/turtlebot3/turtlebot3_description/meshes/wheels/right_tire.stl 

The file/// does not look right to me.

Originally posted by @ooeygui in #122951 (comment)

[mjbvz]

The uri changes are expected, see https://code.visualstudio.com/updates/v1_56#_service-workers-now-used-to-load-resource-in-webview

I think your extension is hardcoding some assumptions about the result of asWebviewUri:

https://github.com/ms-iot/vscode-ros/blob/0de53b6d3b3dda1067930cf91a455c1a8928fb5d/src/urdfPreview/preview.ts#L132

I don't know what the line is doing but it will need to be re-written. We only say that asWebviewUri returns something that can be used in webviews, not the specific structure of the results

[ooeygui]

@mjbvz Thank you for the doc pointer. I have updated my code, but still am getting file not found. when attempting to load the new URI. We are using a module which makes some assumptions about the URI, so we do have to modify the return value slightly. (internally it composes its own url by combining a prefix path with the passed in one. So we split the path we pass in. I changed this code to https: )

[mjbvz]

Please share a branch with your code changes

[vjocw]

We are having similar problems. We are not able to load .png or .svg from elements from our Angular application. We do not hardcode vscode-resource or vscode-webview-resource anywhere in our codebase.

We used asWebviewUri for every resource we request in the html.

Our Content-Security Policy is
img-src https://*.vscode-webview-test.com https: data:;

[mjbvz]

@vincentjocodes Please share minimal example code that demonstrates the issue

[mjbvz]

@ooeygui Sounds like you came up with a code fix on the extension side? Should we close this issue then?

[glouischandra]

@mjbvz I'm working on creating minimal example code. Meanwhile after debugging further, it seems that the .png request doesn't get picked up by the service worker and times out after 5 minutes. Do you know any reason why the service worker seems to ignore a request? This seems to happen on images that are loaded within JS or CSS (as background-image)

[mjbvz]

@glouischandra Is it trying to load the images inside an iframe in the webview? Is the script running in one?

[glouischandra]

Its trying to load an image inside the webview, there's no additional iframe within the webview (not sure if this is what you're asking for). The script is injected inside webview's body and the source code is located within the extension project itself, like: https://d80db2d4-a744-4854-98f7-b90d109f8c44.vscode-webview-test.com/vscode-resource/file///Users/..../dist/webview/main.js.

This script is an angular application. Interestingly if I just create the same <img src=".../logo.png"> with the same exact URL that angular generated directly in the HTML, ServiceWorker seems to pick it up just fine and download the image.

[mjbvz]

Not sure, a minimal example would definitely help

[ooeygui]

We have a code fix in flight which corrects this. I'll be pushing a release today.

[glouischandra]

@mjbvz Here's a minimal repro for the angular webview issue: https://github.com/glouischandra/vscode-156-minimal-repo

[glouischandra]

@mjbvz any update on the investigation?

[mjbvz]

Can you please slim that example down? Looks like there's a lot of stuff about angular and other components in there right now

[ooeygui]

We can close this issue now - we released a fix for the ROS VSCode extension. (Since I didn't create this github issue, I cannot close it)

[mjbvz]

Thanks. Let me know if something still doesn't seem to be working correctly on the VS Code side

[glouischandra]

@mjbvz will do, I'll file a separate bug once we slim the example down.