search

microsoft / vscode-webview-ui-toolkit

A component library for building webview-based extensions in Visual Studio Code.
MIT License
1.96k stars 130 forks source link

Registering components causes CSP style-src errors #545

Open dotNomad opened 3 months ago

dotNomad commented 3 months ago

Describe the bug

Registering a component in vscode-webview-ui-toolkit causes a Content Security Policy error in the extension webview registering it.

To reproduce

To reproduce the default vscode-webview-ui-toolkit hello world example causes the same problem.

Removing the provideVSCodeDesignSystem().register(vsCodeButton()); line removes the Content Security Policy, inline style error.

Note: Using the react imports like the hello-world-react-vite example does not cause the same error. This is unique to the React imports however, the [hello-world-vue](https://github.com/microsoft/vscode-webview-ui-toolkit-samples/tree/main/frameworks/hello-world-vue example) does get the error.

Expected behavior

I would expect that utilizing the components in vscode-webview-ui-toolkit does not cause Content Security Policy directive errors in VSCode extension webviews. Additionally inline styles should be applied where expected.

Current behavior

Opening a webview that registers a toolkit component causes the following error in the developer tools console:

webview.js:2829 Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'none'". Either the 'unsafe-inline' keyword, a hash ('sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.

Screenshots

CleanShot 2024-03-28 at 16 29 54@2x

Desktop:

quanzhuo commented 2 months ago

any update?

I met the save error. with "@vscode/webview-ui-toolkit": "^1.4.0"

I use this ui toolkit with pure html, css, javascript