How can I securely use CSS-in-JS with React?

How can I securely use CSS-in-JS with React?

James is the editor of React Armory, and has been creating things with JavaScript for over 15 years.

CSS-in-JS is an exciting new technology that completely eliminates the need for CSS class names. It makes it possible to add styles directly to your components, using the full power of CSS. Unfortunately, it also promotes interpolation of unescaped props into that CSS, opening you up to injection attacks.

And CSS injection attacks are a major security hazard.

[…]

CSS-in-JS tools are like eval for CSS. They’ll take any input and evaluate it as CSS.

[…]

You can read more about attacks like this one at Reading Data via CSS Injection.

[…]

React supports IE9, and will for the foreseeable future.

IE9 and earlier allow you to run arbitrary JavaScript from stylesheets, if you can put that JavaScript in a text file on the same domain.

[…]

Don’t miss out on the latest CSS-in-JS and Security answers! Join React Armory now, and get a bunch of React and JavaScript cheatsheets: