Cannot open jpg, gif, or png in code-server web IDE

[bowdens07]

OS/Web Information

• Web Browser: chrome/firefox/edge
• Local OS: Microsoft Windows 10 Pro 10.0.19042 Build 19042
• Remote OS: N/A
• Remote Architecture: N/A
• code-server --version: 3.11.1 and 3.11.0

Steps to Reproduce

1. Open a docker image of code-server with the specified versions above
2. Upload a jpg, gif, or png image into the web IDE
3. Double click the uploaded file to display the image

Expected

The image should display in a webview without error

Actual

Same error message below appears in chrome, firefox, and edge

Notes

There was a regression between versions 3.10.2 and 3.11.0. The bug does not occur on versions earlier than 3.11.0. There is no output on the console whenever this error occurs, which is 100% of the time. I am going to attempt to isolate the version which the bug starts. I will comment when I have done this.

This issue can be reproduced in VS Code: No

[jsjoeio]

Thanks for the thorough report @bowdens07 - I think you're right about 3.11.0 introducing this regression. In my console, I see:

Refused to load the image 'https://vscode-remote+localhost.vscode-resource.vscode-webview.net:8080/Users/jp/dev/folder-for-testing/download.png?version%3D1628621135878' because it violates the following Content Security Policy directive: "img-src data: https://*.vscode-webview.net".

Video

Screen.Recording.2021-08-10.at.11.45.31.AM.mov

If I had to make a guess, I bet it's this PR that introduced it: #3895

I'm not sure why "it violates the following Content Security Policy directive" 🤔 cc @code-asher

[code-asher]

Ahh maybe the CSP no longer works because the URL has a port in it now? So to fix I think we can patch the directive to be: ``` img-src data: https://*.vscode-webview.net:* ```

[jsjoeio]

This is probably in the webview directory. Once that upstream patch lands in VS Code and we update, we won't have to worry about this.

Search for this "Content-Security-Policy"

https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP

[galesky]

For the record, the issue on Duckly was that we were importing a Script on runtime (like a script tag on the extension webview)

This has been fixed by using webpack to pre-bundle all scripts a single HTML using InlineChunkHtmlPlugin

[jsjoeio]

Taking a look here...

Going to use this comment as a place to take notes.

This seems to be the solution that might work but unsure where to put it 🤔

img-src data: https://*.vscode-webview.net:*

Doing a search for "Content-Security-Policy" to find a couple places. In the meantime, going to run yarn watch and reproduce it locally.

Reproducing it

I can reproduce very easily.

It seems like the issue is coming from lib/vscode/src/vs/workbench/contrib/webview/browser/pre/index.html but there is no meta tag with a Content-Security-Policy there. It must be injected in later.

Searching for "Content-Security-Policy"

Really hard to tell which one this is exactly.

I think I've narrowed it down to two places:

• lib/vscode/src/vs/code/electron-browser/workbench/workbench.html
• lib/vscode/src/vs/code/electron-sandbox/workbench/workbench.html

These are the only two HTML files under lib/vscode/src that have "Content-Security-Policy" and mention vscode-webview. I'll see if the change has any effect.

No luck. That didn't work:

-		<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src 'self' https: data: blob: vscode-remote-resource:; media-src 'none'; frame-src 'self' vscode-webview:; object-src 'self'; script-src 'self' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; connect-src 'self' https: ws:; font-src 'self' https: vscode-remote-resource:;">
+ 		<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src 'self' https: data: blob: vscode-remote-resource:; media-src 'none'; frame-src 'self' https://*.vscode-webview.net:*; object-src 'self'; script-src 'self' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; connect-src 'self' https: ws:; font-src 'self' https: vscode-remote-resource:;">

I also tried adding it to the end like so:
```html
		<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src 'self' https: data: blob: vscode-remote-resource:; media-src 'none'; frame-src 'self' vscode-webview:; object-src 'self'; script-src 'self' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; connect-src 'self' https: ws:; font-src 'self' https: vscode-remote-resource:; img-src data: https://*.vscode-webview.net:*;">

no luck though.

I may be doing this in the wrong place entirely 🤔 I guess I can check by commenting out this line.

Yeah, I commented out the line. This doesn't seem to be the problem file (lib/vscode/src/vs/code/electron-browser/workbench/workbench.html)

I tried commenting out any CSP meta tags in these files to see if I could isolate which one it is but nothing worked.

I wonder if this policy is definitely elsewhere?

I FOUND IT

I was looking in the wrong place. Image previews (I was previewing a .png image) happen thanks to an extension bundled with vscode here: lib/vscode/extensions/image-preview/src/preview.ts

If you remove the CSP policy, it loads the image:

If we look at the code, we see this:

const cspSource = this.webviewEditor.webview.cspSource;
		return /* html */`<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">

	<!-- Disable pinch zooming -->
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

	<title>Image Preview</title>

	<link rel="stylesheet" href="${escapeAttribute(this.extensionResource('/media/main.css'))}" type="text/css" media="screen" nonce="${nonce}">

	<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src data: ${cspSource}; script-src 'nonce-${nonce}'; style-src ${cspSource} 'nonce-${nonce}';">
	<meta id="image-preview-settings" data-settings="${escapeAttribute(JSON.stringify(settings))}">
</head>
<body class="container image scale-to-fit loading">
	<div class="loading-indicator"></div>
	<div class="image-load-error">
		<p>${localize('preview.imageLoadError', "An error occurred while loading the image.")}</p>
		<a href="#" class="open-file-link">${localize('preview.imageLoadErrorLink', "Open file using VS Code's standard text/binary editor?")}</a>
	</div>
	<script src="${escapeAttribute(this.extensionResource('/media/main.js'))}" nonce="${nonce}"></script>
</body>
</html>`;
	}

cspSource appears to be https://*.vscode-webview.net. After some digging around, I found out where it is defined:
https://github.com/cdr/code-server/blob/main/lib/vscode/src/vs/workbench/api/common/shared/webview.ts#L27

And if I change that to match what @code-asher suggested, it works!

- export const webviewGenericCspSource = `https://*.${webviewResourceBaseHost}`;
+ export const webviewGenericCspSource = `https://*.${webviewResourceBaseHost}:*`;

PR incoming.

[kongdd]

I have the same issue with the lastest code-server, v4.5.1