Replies: 7 comments 21 replies
-
|
Here is a demo extension that works with csp headers, although the "unsafe-inline" is not too sophisticated. What is the csp meta tag have you set? What do you mean by rouge styles? Do they come from the library? If yes, which ones? (I'm guessing it's related to the Icon component.) If I understand the documentation correctly, the 'litNonce' only relevant to the older browsers. I created a demo to test a strict CSP: <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'nonce-abc123'; script-src-elem 'nonce-abc123'; font-src 'self' data: 'nonce-abc123'"
/>
<title>VSCode Elements</title>
<link
rel="stylesheet"
href="/node_modules/@vscode/codicons/dist/codicon.css"
id="vscode-codicon-stylesheet"
nonce="abc123"
/>
<script
type="module"
src="/node_modules/@vscode-elements/webview-playground/dist/index.js"
nonce="abc123"
></script>
<script nonce="abc123">
window.litNonce = 'abc123';
</script>
<script type="module" src="/dist/main.js" nonce="abc123"></script>
</head>
<body>
<h1>Using nonce property</h1>
<main>
<vscode-demo>
<vscode-icon name="account"></vscode-icon>
<vscode-icon name="loading" size="32" spin spin-duration="3"></vscode-icon>
<vscode-button>Hello World</vscode-button>
<vscode-button secondary>Hello World</vscode-button>
</vscode-demo>
</main>
</body>
</html>This is the rendered page:
I got a bunch of errors:
This is all I currently know about CSP. I hope it will be thought-provoking. |
Beta Was this translation helpful? Give feedback.
-
|
My current https://github.com/microsoft/genaiscript/blob/main/packages/vscode/src/webview.ts#L42 |
Beta Was this translation helpful? Give feedback.
-
|
I've resolved all the CSP related issues in the Icon component. You can also check the applied CSP policies in the dev HTML. I'll go through all the components and fix any problematic ones. Could you possibly tell me which ones violate the CSP policies in your environment? I've also made the Webview Playground CSP compatible. |
Beta Was this translation helpful? Give feedback.
-
|
Oh, and ignore this part - it has no effect: <script nonce="abc123">
window.litNonce = 'abc123';
window.vscodeWebviewPlaygroundNonce = 'abc123';
</script> |
Beta Was this translation helpful? Give feedback.
-
|
I'm seeing:
|
Beta Was this translation helpful? Give feedback.
-
|
Sorry, I made a mistake. The I'll get back to you with the solution. |
Beta Was this translation helpful? Give feedback.
-
|
getting closer! |
Beta Was this translation helpful? Give feedback.
-
|
Check the latest pre-release. |
Beta Was this translation helpful? Give feedback.
-
|
a few more style updates. should the vscode-elements have the nonce attribute?
|
Beta Was this translation helpful? Give feedback.
-
|
And add |
Beta Was this translation helpful? Give feedback.
-
|
testing |
Beta Was this translation helpful? Give feedback.
-
|
it's raising issues when injecting a style.
I suspect adding a nonce attribute to the created style would fix the csp issue. |
Beta Was this translation helpful? Give feedback.
-
|
|
Beta Was this translation helpful? Give feedback.
-
|
Set nonce attribute/property for This is my experience from the past few days. |
Beta Was this translation helpful? Give feedback.
-
|
i am using the react wrappers btw |
Beta Was this translation helpful? Give feedback.
-
|
From React 19 you don't have to. I don't think react wrapper even works with React 19. Lsat time when i tried to upgrade the react dependency I got a bunch off typescritp errors. |
Beta Was this translation helpful? Give feedback.
-
|
yes i discovered the doc on react 19 later... i should have read them more carefully. I think what threw me off was that you need to copy the definition file as well to get typescript to work (yes, i should have read the docs). I am attaching the "nonce" value to the elements like |
Beta Was this translation helpful? Give feedback.
-
If you have a suggestion, PRs are welcome. :)
Nonce can only be used for <script> and <style>. |
Beta Was this translation helpful? Give feedback.
-
Will do. At this point, it's probably just a matter of swapping the react19 paragraph up. For the nonce, i somehow need to communicate the nonce to the vscode-elements library so that it adds it to the dynamic style element. |
Beta Was this translation helpful? Give feedback.
-
|
Fortunately, Lit does not use style elements. Component styles are constructed stylesheets; in older browsers, the |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
I was wondering if there was a sample/example of webviewpanel implementation with CSP (Content Security Policy) policies applied to the HTML. I am seeing some rogue styles being inject by lit-html. I have tried to set
window.litNonceso that the style element gets the 'nonce' attribute but this did not seem to fix the issue.Beta Was this translation helpful? Give feedback.
All reactions