search

antoniandre / wave-ui

A UI framework for Vue.js 3 (and 2) with only the bright side. ☀️
https://antoniandre.github.io/wave-ui
MIT License
546 stars 41 forks source link

w-icon uses inline style, breaks strict CSP #69

Closed cwaldbieser closed 2 years ago

cwaldbieser commented 2 years ago

If you have a strict Content Security Policy like:

style-src: 'self'

The use of inline styles will be blocked by the policy. Can this component in particular, and maybe others in general be configured to not use inline styles?

cwaldbieser commented 2 years ago

I had a thought about this-- it looks like the styles() prop is just being used to set the size of the icon. Could you make classes for 10-15 common sizes and apply those in classes() instead? And maybe have a fallback to applying an inline style if the class doesn't exist?

I'd submit a PR, but I don't have too much experience with node JS. When I try to install wave-ui from a local fork, my Vue 3 project complains about eslint settings, etc. and I can't get my SPA to compile. If I just install the wave-ui package, everything works fine, but I have to relax my CSP to use "style-src: unsafe-inline" if I want to use the w-icon.

antoniandre commented 2 years ago

Hi @cwaldbieser, thanks for the suggestion, but this is not going to be in the scope for now. Too many components use inline styles to be very flexible, and it will not be possible to do otherwise unless I remove options for the user. Setting 10-15 common sizes is too many size when you need only one, and not the size you want for some users. All the famous UI libraries have some inline styles, in order to offer more flexibility. Hope that makes sense, thanks for the idea though. :)