Component doesn't work with a strict CSP policy #332
Description
Vue3-Select-Component version
0.12.3
Link to minimal reproduction
https://stackblitz.com/edit/vitejs-vite-gvwrre6p
Steps to reproduce
- Start the Vite Server (
npm run dev). - Open the site (preview wasn't working, so I had to open it in a new tab).
- See that the component is unstyled.
- Open DevTools (right click > Inspect, or F12), go to Console and check that the inline style wasn't loaded by the browser because of the strict CSP header.
What is expected?
Proper loading of the component with its style.
What is actually happening?
When mounting the component on a website served with a strict CSP header (i. e. no unsafe-inline style-src), its style won't be loaded by compliant browsers.
Google Chrome's DevTools Console explains it:
Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' https://[redacted] https://[redacted]". Either the 'unsafe-inline' keyword, a hash ('sha256-gLKo9csfWS03oK/J4Usz0bega2I/byytf8RcRimrf0g='), or a nonce ('nonce-...') is required to enable inline execution.
It seems pretty obvious that the built component uses inline styling.
Any additional comments?
A proper solution could be allowing a nonce to be passed to the component, which is then passed to the stylesheet, or allowing the stylesheet to be copied and pasted in the project's source, to be then imported by index.html.