Using Content Security Policy headers with React & emotion

Content Security Policy (CSP) headers add another layer of security by disallowing unsafe actions, such as establishing connections with arbitrary domains, usage of eval, inline scripts, and others. This article will focus on the style-src directive and its usage with emotion.

Using CSP headers

Content-Security-Policy header should be set in the response to the browser when the application page is requested (e.g. index.html). It looks like this:

Content-Security-Policy: style-src self;

style-src is a directive specifying which styles …

actions article connections content security content-security-policy csp domains focus frontend header headers policy react scripts security security policy