Option to add nonce value to style tag of vue3 web components

Description

When I create web components via custom elements in vue3 (as described here: https://vuejs.org/guide/extras/web-components.html#building-custom-elements-with-vue), the styles are loaded directly into the shadow dom with a <style> tag. In order to meet content security policies, I would need to include a nonce value to this style tag when building the web component. Otherwise the styles are rejected with the following error message:

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'nonce-xxx='". Either the 'unsafe-inline' keyword, a hash ('sha256-xxx='), or a nonce ('nonce-...') is required to enable inline execution.

It would be great, if a nonce value could be applied to the style tags while building the

Alternative

No response

Additional context

No response

Validations

Follow our Code of Conduct
Read the Contributing Guidelines.
Read the docs.
Check that there isn’t already an issue that request the same feature to avoid creating a duplicate.

Issue Analytics

State:
Created a year ago
Reactions:2
Comments:5 (3 by maintainers)

Top GitHub Comments

1reaction

sapphi-redcommented, Aug 29, 2022

Closing as this needs to be implemented on vue side.

@tony19 Thanks for the explanation!

1reaction

landoephancommented, Aug 23, 2022

I just override the _applyStyles function, so the nonce attribute is added to the style tag before appendChild(style) is called. Like this:

  _comp.prototype._applyStyles = function (styles: string[]) {
    if (styles) {
      styles.forEach((css) => {
        const s = document.createElement('style')
        s.textContent = css
        s.setAttribute('nonce', options?.nonce || defaultNonce)
        this.shadowRoot?.appendChild(s)
        // record for HMR
        if (import.meta.env.DEV) {
          ;(this._styles || (this._styles = [])).push(s)
        }
      })
    }
  }

My reverse-proxy needs it like that. This way all works great, thanks a lot for your help.

Top Results From Across the Web

Option to add nonce value to style tag of vue3 web components

The style tag is inserted in vuejs/core , so the feature request should be made there instead. A workaround is to create a...

vue3 web components refused to apply inline style due to CSP

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'nonce-xxx='". Either the ...

Add __webpack__nonce to style tags · Issue #887 - GitHub

What needs Styled-Components to do? If the webpack_nonce variable is set, pass the value to every generated style tag inside the nonce attribute ......

Vue3 web components refused to apply inline style due to CSP

Is there any way I can give an option to include a nonce or hash attribute in the style tags at vite build...

Theme configuration — Vuetify

Vuetify is a Material Design component framework for Vue.js. ... can be easily overwritten by adding the dark option in the theme service....