Skip to content
Header Hawk

style-src

style-src governs CSS from every direction: external stylesheets, <style> blocks, style attributes, @import rules and stylesheets delivered by the Link: response header.

It is the directive most often left at 'unsafe-inline', because component libraries and CSS-in-JS write style attributes at runtime. Splitting it into style-src-elem and style-src-attr is usually the way out: keep elements strict, and relax only attributes.

Syntax

Section titled “Syntax”
Content-Security-Policy: style-src 'none';
Content-Security-Policy: style-src <source-expression-list>;

What it controls

Section titled “What it controls”
  • <link rel="stylesheet"> requests.
  • <style> blocks.
  • style attributes on elements, including ones set with setAttribute("style", ...) or cssText.
  • Stylesheets referenced by the Link: HTTP response header.
  • @import rules inside a stylesheet.

What it does not control

Section titled “What it does not control”
  • Direct property assignment - el.style.display = "none" is not a CSP violation, and never has been. Only the whole-attribute forms are.

Fallback

Section titled “Fallback”

If style-src is absent, the browser consults default-src. The full chain is style-src → default-src.

Section titled “Recommended value”
Content-Security-Policy: style-src 'self'
  • Same-origin stylesheets, no inline styles. Add a nonce to each <style> block you control rather than 'unsafe-inline'; a nonce and 'unsafe-inline' in the same directive means the nonce wins in a CSP 2+ browser, which is the documented way to keep old browsers working.
  • If a runtime writes style attributes you cannot remove, write style-src-elem 'self' and style-src-attr 'unsafe-inline' instead of relaxing the whole directive.

Examples

Section titled “Examples”

Allowed

Section titled “Allowed”

A same-origin stylesheet, and a nonced inline block:

<link rel="stylesheet" href="/assets/app.css" />
<style nonce="2726c7f26c">
  .banner {
    display: none;
  }
</style>

Blocked

Section titled “Blocked”

Under style-src 'self', an inline style attribute:

<div style="display: none">…</div>

Browser support

Section titled “Browser support”
  • Widely available across browsers since August 2016.
  • Hashing an inline block is whitespace-sensitive: the hash covers the exact bytes between the tags, so a formatter run invalidates it.

In a HeaderHawk report

Section titled “In a HeaderHawk report”
Field Value
violatedDirective style-src
effectiveDirective style-src-elem
blockedUri https://fonts.googleapis.com/css2, inline
Issue title style-src-elem blocking fonts.googleapis.com
  • As with scripts, browsers report the granular directive. A policy that only says style-src still produces style-src-elem and style-src-attr reports, and HeaderHawk shows them as separate issues - which is exactly the signal you need to decide whether to split the directive.
  • A large style-src-attr inline issue is usually one component library, not one page. The document URLs on the issue will span most of the site; the code sample is what identifies the culprit.
Section titled “Related directives”

Getting reports for this directive

Section titled “Getting reports for this directive”

Point your policy’s report-uri at your site’s HeaderHawk endpoint and the violations above arrive in the dashboard, grouped as described. The Quick Start sets that up in five minutes, and the integration guides cover the header syntax for each platform.