search

guilhermerodz / input-otp

One time passcode Input. Accessible & unstyled.
https://input-otp.rodz.dev
MIT License
2.52k stars 53 forks source link

Add nonce as props for inline style #48

Closed acreations closed 3 months ago

acreations commented 6 months ago

Is your feature request related to a problem? Please describe. Im using a nonce as a CSP rules for inline styles and when running this library CSP rules are complaining

Describe the solution you'd like Not sure if it is the best approach but could we have nonce as props to OTPInput and added when having inline style (on row 174 in input.tsx file)

guilhermerodz commented 4 months ago

hey @acreations I don't get exactly what this issue is about and how to reproduce.

can you clarify on that?

paulschuetz commented 1 day ago

Hey!

Content-Security-Policies are an essential tool to protect users from bad code being executed on the users device.

If you have a basic content security policy, like Content-Security-Policy: "style-src 'self'" you get the following error.

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

This is due to the following code. which programatically adds styles inline.

document.head.appendChild(styleEl)

Instead the styles should be in a separate stylesheet and the styles should only set the styles via classnames as far as I understand. Do you understand what I mean?

would be great if we could fix this as this make the adoption of this library very difficult when working with CSPs.