Webview Views via vscode.window.registerWebviewViewProvider are not working

[TimWebb]

It appears that the webview view provider API is not working. Specifically using the API vscode.window.registerWebviewViewProvider to provide a custom webview results in an empty view area. I don't see additional information in the console to otherwise help track down why this is failing.

Open VSCode Server:

GitPod:

[TimWebb]

@akosyakov Adding some details that may be helpful.

We are using scripts - in testing a basic webview view that has just straight HTML without loading external script files it works. The issue seems to be with CSR.

When creating the content, the API webview.cspSource returns https://*.vscode-webview.net.

We inject into our HTML response for the webview <meta http-equiv="Content-Security-Policy" content="default-src 'none'; font-src ${webview.cspSource}; style-src ${webview.cspSource}; script-src ${webview.cspSource} ;">

However, when the actual content is loaded, the error in the browser indicates a mismatch between webview.net and localhost:3000.

Content Security Policy: The page’s settings blocked the loading of a resource at http://localhost:3000/out/vs/workbench/contrib/webview/browser/pre/service-worker.js?id=webviewview-com-genuitec-codetogether-presence-webview&swVersion=2&extensionId=&platform=browser&vscode-resource-base-authority=vscode-resource.vscode-webview.net&parentOrigin=http%3A%2F%2Flocalhost%3A3000 (“script-src”).

[akosyakov]

Yes, it sounds like https://github.com/gitpod-io/openvscode-server/issues/30 We should publish webview bootstrap code to some public CDN service and serve from there instead of https://*.vscode-webview.net to make csp work. Unfortunate that they hardcoded it, used to be configurable.

[TimWebb]

As a note, we did the following as a workaround and now have the webview loading correctly on OpenVSCode-Server:

        const assetURI = webview.asWebviewUri(
            vscode.Uri.joinPath(
                this._extensionUri, 'assets/random/file'
            )
        );
        const baseSource = extractBaseURL(assetURI);
        let cspSource = `'self' ${webview.cspSource}`;
        if (baseSource !== webview.cspSource) {
            cspSource = `${cspSource} ${baseSource}`;
        }

And changing our <meta tag to:

<meta http-equiv="Content-Security-Policy" content="default-src 'none'; font-src ${cspSource}; style-src 'unsafe-inline' ${cspSource}; script-src ${cspSource} ;">

Note that we did require also adding 'unsafe-inline' for it to play nice with Firefox's stricter security policies.