CSP Inline Styles

Inline Styles are Blocked by Default with Content Security Policy

When you have a Content-Security-Policy header defined, the browser will automatically block inline style (unless you implement one of the workarounds specified below), such as:

<style>
	.red { color: red }
</style>

Or

<div style="color:red;">Red Text</div>

You might see something like this as a result:

content security policy: the page’s settings blocked the loading of a resource at inline (“style-src”).

Or you might see this:

content security policy: the page’s settings blocked the loading of a resource at inline (“default-src”).

Or

Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self' ".

Or

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' ".

Allow Inline Styles using a Nonce

One of the easiest ways to allow style tags when using CSP is to use a nonce. A nonce is just a random, single use string value that you add to your Content-Security-Policy header, like so:

style-src css-cdn.example.com 'nonce-rAnd0m';

Assuming our nonce value is rAnd0m (you need to randomly generate a new nonce for every HTTP request), we can now use an inline style tag like this:

<style nonce="rAnd0m">
	.red { color: red }
</style>

Allow Inline Style using a Hash

A second approach to allow inline style is to use a hash, with this approach you compute the hash of your <style> tag, and put the value in our CSP policy:

style-src css-cdn.example.com 'sha256-xyz4zkCjuC3lZcD2UmnqDG0vurmq12W/XKM5Vd0+MlQ='

Allow Inline Style Attribute using a hash

Next suppose you want to support something like width: 100%; in the style attribute of a HTML tag:

<div style="width:100%;">

CSP Level 2 browsers may be ok with just putting the hash in your style-src directive. However, to allow hashes in the style attribute on inline CSS on browsers that support CSP Level 3, you may get an error like this:

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'sha256-nMxMqdZhkHxz5vAuW/PAoLvECzzsmeAxD/BNwG15HuA='". Either the 'unsafe-inline' keyword, a hash ('sha256-nMxMqdZhkHxz5vAuW/PAoLvECzzsmeAxD/BNwG15HuA='), or a nonce ('nonce-...') is required to enable inline execution.

To fix this, we either need to change our code to use a class or add the CSPunsafe-hashes keyword to our style-src directive:

style-src 'self' 'unsafe-hashes' 'sha256-nMxMqdZhkHxz5vAuW/PAoLvECzzsmeAxD/BNwG15HuA=';

You may not actually need the CSP 'self' keyword, feel free to replace that with what ever source list is necessary to load CSS stylesheets on your page.

Other methods

The unsafe-inline source list keyword can be used to allow inline styles, but this also removes much of the security protection that you gain when you enable CSP.

CSP Level 3 (newest browsers) support a source list value: unsafe-hashes which can be used to allow inline style attributes on HTML tags.

CSP Developer Field Guide

Want to learn the ins and outs CSP? Grab a copy of the CSP Developer Field Guide. It's a short and sweet guide to help developers get up to speed quickly.

Grab a Copy