VSCode Webview Content-Security-Policy ticino.blob.core.windows.net

Viewed 238

I am currently developing a custom editor using webviews in a VSCode extension. In the webviewer html I have attempted to add a Content-Security-Policy based on the docs

<meta
                http-equiv="Content-Security-Policy"
                content="default-src 'none'; img-src ${webview.cspSource} blob:; style-src 'nonce-${nonce}' ${webview.cspSource}; script-src 'nonce-${nonce}';"
            >

I've also tried this:

<meta
                http-equiv="Content-Security-Policy"
                content="default-src 'none'; img-src ${webview.cspSource} blob:; style-src ${webview.cspSource}; script-src 'nonce-${nonce}';"
            >

however when I load my viewer I see the following error in the developer tools:

main.js:857 Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'nonce-EP35l0sN6TT7EBSg7FCgwCmkomUU7vBD' https://*.vscode-webview.net". Either the 'unsafe-inline' keyword, a hash ('sha256-TaOIgxalYoPqvx2ds0mJuaYpEnzzU68HDyBcsSeVXdk='), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.

This error is being reported from the following javascript file: https://ticino.blob.core.windows.net/sourcemaps/899d46d82c4c95423fb7e10e68eba52050e30ba3/core/vs/workbench/contrib/webview/browser/pre/out-vscode/vs/workbench/contrib/webview/browser/pre/main.js enter image description here

This then seems to cause issues with the styles on the webview. I have the following body

<body style="width:100%; height:100vh;">
        <div id="graph" nonce="${nonce}" style="width:100%; height:100vh;"></div>
        </body>

but when this renders with the above error the height:100vh does not seem to work correctly. I can remove it and re add the style in developer tools and it works correctly plus if I remove the Content-Security-Policy then the style works correctly.

I understand why the main.js file is not allowed to edit the inline styles due to the Content-Security-Policy however I don't understand:

  1. where that main.js file is coming from or what it's purpose is.
  2. Why the file has such an effect on the styling
  3. Have I made a mistake with my Content-Security-Policy?
0 Answers
Related