style-src-attr
style-src-attr
style-src-attr
The style-src-attr directive specifies valid sources for inline styles applied to individual DOM elements.
Recommended Values
'none'
Blocks all inline styles (recommended)
Blocks all inline styles (recommended)
sha256-<hash>
Allows inline styles with a specific hash
Allows inline styles with a specific hash
Explore detailed value definitions
Tips & Tricks
If style-src-attr is not set, the user agent will look for style-src, and if that is not set, default-src is used.
Using 'unsafe-inline' allows all inline styles and may introduce security risks. Consider using nonces or hashes instead.
Using 'unsafe-hashes' allows event handlers like :hover but requires hashes for each one. Use with caution.
Examples
Allows inline styles from the same origin and with a hash
Content-Security-Policy: style-src-attr 'sha256-jkHJ83JF7jf83jF83Jj38fJ3j8FJ38fj3F8jf38==';Allowed
<!-- allowed by hash --> <p style="color: red;">Red text</p>Blocked
<!-- blocked as no 'unsafe-inline' and hash doesn't match --> <span style="font-weight: bold;">Bold text</span>
Frequently Asked Questions
What is the style-src-attr directive used for?
The style-src-attr directive specifically controls inline styles applied through HTML attributes like style='color: red'. It provides more granular control over style attributes compared to the broader style-src directive, allowing you to separately restrict inline style attributes while potentially allowing other style sources.
Default Behavior
If style-src-attr is not specified, the browser will use style-src's value. If style-src is also not specified, it falls back to default-src.
What are common values for style-src-attr?
Common values include 'none' to block all inline style attributes, 'unsafe-inline' to allow them (though not recommended for security), and nonces/hashes to allow specific trusted inline styles. For example: style-src-attr 'none' prevents any style attributes from being applied.
Security Note
Using 'unsafe-inline' with style-src-attr can expose your site to style-based attacks. Consider using nonces or hashes for necessary inline styles.
How does style-src-attr differ from style-src?
While style-src controls all style sources including external stylesheets and inline styles, style-src-attr specifically controls only inline styles applied via HTML style attributes. This separation allows for more precise security policies, such as allowing external stylesheets while blocking inline style attributes.
Best Practice
For maximum security, consider using style-src-attr: 'none' to completely disable inline style attributes and manage all styling through external stylesheets or style elements.
Need to monitor CSP violations and maintain it easily?
Set up a reporting endpoint to monitor Content Security Policy violations in real-time to build and maintain your CSP easily.
Set up your endpoint now