Add nonce as props for inline style

[acreations]

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]

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

can you clarify on that?

[paulschuetz]

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 script should only set the styles via css class names 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.

[paulschuetz]

@guilhermerodz Can you reproduce this? Are you open for contributions regarding this issue? 😃

[paulschuetz]

w3c/webappsec-csp#399 related issue

[paulschuetz]

I think reading the current nonce from the script via document.currentScript.nonce and setting the nonce to the stylesheet (if present) via style.setAttribute('nonce', nonce) could already do the trick.

[guilhermerodz]

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 script should only set the styles via css class names 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.

Now I get it. I'll see what we can do about it.

Perhaps style.setAttribute('nonce', nonce) can fix it

Have you tried it? @paulschuetz

[paulschuetz]

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 script should only set the styles via css class names 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.

Now I get it. I'll see what we can do about it.

Perhaps style.setAttribute('nonce', nonce) can fix it

Have you tried it? @paulschuetz

Not yet, should I come up with a POC?

[paulschuetz]

seems to work, see https://github.com/paulschuetz/csp-inline-styles-poc
should be quite easy to implement for this library! Can you do it? Or do you need support?

[guilhermerodz]

hey, I still have no idea how to implement this and didn't have time for it. can you make a PR?