Skip to content
Header Hawk

style-src-attr

style-src-attr covers the style attribute and the JavaScript paths that set it wholesale. It exists so that a policy can tolerate runtime-generated inline styles without also tolerating arbitrary <style> blocks.

Syntax

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

What it controls

Section titled “What it controls”
  • The style attribute on any element.
  • element.setAttribute("style", ...).
  • element.style.cssText = ....

What it does not control

Section titled “What it does not control”
  • element.style.display = "none" and other direct property assignments, which are allowed even under style-src-attr 'none'.
  • <style> elements and linked stylesheets - see style-src-elem.

Fallback

Section titled “Fallback”

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

Section titled “Recommended value”
Content-Security-Policy: style-src-attr 'none'
  • Start at 'none' and see what breaks. Many sites find nothing does, because most component libraries set individual style properties rather than the whole attribute.
  • If something does break, 'unsafe-inline' here is a far smaller concession than 'unsafe-inline' on style-src: it cannot be used to load a stylesheet.

Examples

Section titled “Examples”

Allowed

Section titled “Allowed”

Allowed even under 'none' - this is a property assignment, not the attribute:

el.style.transform = `translateY(${offset}px)`;

Blocked

Section titled “Blocked”

Under style-src-attr 'none':

<div style="transform: translateY(12px)">…</div>

Browser support

Section titled “Browser support”
  • Baseline: widely available across browsers since December 2022 - earlier than style-src-elem.
  • 'unsafe-hashes' applies here, and is how you allow one specific attribute value by hash.

In a HeaderHawk report

Section titled “In a HeaderHawk report”
Field Value
violatedDirective style-src-attr
effectiveDirective style-src-attr
blockedUri inline
Issue title style-src-attr inline script (7f0a1c2d)
  • HeaderHawk labels every inline violation “inline script”, including style ones - the label comes from the shared grouping code, not from the directive. The directive name in front of it is what tells you it was CSS.
  • Add 'report-sample' to see which declaration it was. Without it the sample is empty and every inline style attribute on the site becomes one issue.
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.