Add nonce to style element for Content Security Policy

[akihikodaki]

No description provided.

[bvaughn]

Hey @akihikodaki. ELI5?

[akihikodaki]

Sure.

The specification of Content Security Policy
describes as the following:

This document defines Content Security Policy, a mechanism web applications can use to mitigate a broad class of content injection vulnerabilities, such as cross-site scripting (XSS).

To apply Content Security Policy, you need to have this change and to pass a nonce to react-virtualized and accordingly set nonce-source to Content-Security-Policy field in HTTP header.

[bvaughn]

Yeah, I saw that change you added to the docs/usingAutoSizer.md. What wasn't clear to me was...what AutoSizer (or react-virtualized) has to do with CSP. Is it because of the fact that it's inserting a style tag?

[akihikodaki]

Yes. We have the following choices to make it compatible with CSP:

• Add unsafe-inline to style-src.
• Add the hashes of all possible cases to style-src.
• Add nonce to style-src and inserted style.

unsafe-inline is obviously not good. Adding the hashes is viable since there are just four patterns, but it is redundant and lacks compatibility. Nonce is the best solution in this case.

[bvaughn]

Cool. Thanks for elaborating.

[bvaughn]

Released as 9.7.4.