Add 'unsafe-inline' to style-src in CSP to enable server-rendered inline React styles

[lmorchard]

• Also inject content-security-policy header in the local dev server

• See also: React inline styles blocked by CSP policy for 'style-src'  facebook/react#5878 (comment)

Issue #2434

[lmorchard]

Not 100% happy to just copypasta the CSP rules between shell & JS files, but couldn't think of an easy way to DRY that out.

[fzzzy]

Let's go ahead and merge this now, but try to move the inline styles out into css files and remove unsafe-inline styles before the sprint is over.

[elimisteve]

Doesn't adding unsafe-inline allow for attacks like the CSS-only keylogger found at https://no-csp-css-keylogger.badsite.io/ ?

In an attempt to help decrease the maximum severity of the problems caused by injections, keeping the CSS-related CSP settings safe is pretty important.

[chuckharmston]

CC @april for the above comment.

[april]

There is a particular pattern that can cause that issue. Are you setting value directly on form fields with each keypress?

[elimisteve]

@april If one sets the value of a form field onChange while CSP allows for unsafe-inline, is that dangerous?

[april]

Yes, that is exactly the pattern that can be dangerous. I would recommend not doing that, especially for sensitive fields like credit cards or passwords. For those, I recommend letting them be uncontrolled.

Note that you can still do things with them onSubmit and you can check and validate their values onChange, just don't send the current value back into the field's value.

(sorry for not responding for a while, I was out of town)

[lmorchard]

FWIW, the only form submission we have on the site is for an email newsletter signup. Not entirely harmless, but also not a credit card or password field

[april]

In that case, you can probably just do your normal controlled inputs and not worry about it too much. :)