Content Security Policy (CSP)
Quick Reference Guide

The CSP style-src Directive

The style-src Content Security Policy (CSP) directive guards the loading and execution of CSS styles and stylesheets.

Example Policy

Assume a Content-Security-Policy header is set with the following policy:

style-src 'self';


With the above CSP policy, the following are allowed to load and execute in the browser:

<!-- allowed by 'self' -->
<link href="/style/some-file.css" rel="stylesheet">
<!-- allowed by -->
<link href="" rel="stylesheet">


The Example Policy above will block the following from loading or executing in the browser:

<link href="">

Blocked because is not in the source list of the style-src directive.

  .red { color:red; }

Blocked because inline styles are blocked by default, you have to use a CSP hash or a CSP nonce (CSP Level 2) to allow inline style tags to run.

<div style="color:red">
  All Inline style CSS is blocked by default

Browser Support for style-src

CSP Level 1

Supported On:

Chrome 25+ (2013)
Firefox 23+ (2013)
Safari 7+ (2013)
Edge 12+ (2015)

Not Supported On:

Internet Explorer

The CSP style-src directive has been part of the Content Security Policy Specification since the first version of it (CSP Level 1). However some features such as hashes and nonces were introduced in CSP Level 2. Support for these features is still very good.

Internet Explorer 11 and below do not support the style-src directive. This means that IE11 will simply ignore the policy and allow any stylesheet or CSS to load (as if no Content-Security-Policy header was set at all).

CSP Developer Field Guide

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

Struggling to stay on top of security advisories?

Advisory Week is a weekly roundup of all the security advisories published by the major software vendors.