vue-web-component-wrapper icon indicating copy to clipboard operation
vue-web-component-wrapper copied to clipboard

feat: handle nonce/csp

Open kernoeb opened this issue 7 months ago • 3 comments

Hi! I'm using a strict CSP with nonce, which doesn't work by default with vue-web-component-wrapper. It seems to work properly in my case, do you see other elements that should get this property ?

Here's the parts I edited so far :

  • nonce for defineCustomElement() (vue 3.5+) : https://vuejs.org/api/custom-elements
  • nonce for __style in web-component-util

kernoeb avatar Apr 24 '25 07:04 kernoeb

Great feature, even though I am not familiar with these concepts.

do you see other elements that should get this property ?

The web component without shadow Dom and the SFC using this file: https://github.com/EranGrin/vue-web-component-wrapper/blob/main/package/src/api-custom-element.ts

Also, it would be great to add an explanation to the docs.

EranGrin avatar Apr 24 '25 20:04 EranGrin

Hi, I updated the documentation and now the nonce is also given in non-shadow-dom contexts.

Not related, but I also noticed the lint is a bit broken, my IDE want to remove a lot of spaces and the indent is not always good, I can commit a lint fix here if you want, do that in another pull request, as you want :)

kernoeb avatar Apr 27 '25 14:04 kernoeb

Thank you. You are very welcome to open another PR regarding the linting.

EranGrin avatar Apr 27 '25 20:04 EranGrin

@kernoeb It took me a while, but I finally went through your PR and made a release with your changes. Thank you again.

EranGrin avatar May 13 '25 07:05 EranGrin