style-src-elem

The style-src-elem directive controls <style> elements and <link> elements with rel="stylesheet" in your web application. This directive provides granular control over style elements, allowing you to enforce stricter security policies for style elements independently of other style sources.

Recommended Values

'self' Allows the resource to be loaded and executed
'sha256-<hash>' Allows the resource to be loaded and executed
'nonce-<random>' Allows the resource to be loaded and executed
https://subdomain.domain.com/path Allows the resource to be loaded and executed

Recommended style-src-elem configuration (most secure)

Content-Security-Policy: style-src-elem 'self';

Relationship with style-src

The style-src-elem directive specifically controls <style> elements and stylesheet links, while the style-src directive is a fallback that controls all style sources. When style-src-elem is not specified:

The browser falls back to the style-src directive
If style-src is also not specified, it falls back to default-src

Tips & Tricks

Using 'self' restricts stylesheets to the same origin, which is a good security baseline.
For third-party stylesheets, explicitly whitelist their domains instead of using broad permissions.
The 'unsafe-inline' keyword allows all <style> elements, which can be dangerous and should be avoided.
Consider using nonces or hashes if you must include inline <style> elements.

Possible Values

'none': No style elements or stylesheets are allowed
'self': Allow style elements and stylesheets from the same origin
'report-sample': Includes a sample of the violating code in violation reports
Nonces: 'nonce-<random>' for specific style elements
Hashes: 'sha256-<hash>' for specific style elements
URLs: Specific domains or paths for stylesheets
⚠️ 'unsafe-inline': Allows all style elements (insecure)

Scan Your Website Now

Instantly analyze your website's Content Security Policy. Get actionable insights and improve your security posture in minutes.

Scan Your Website

Enter your website URL to analyze its Content Security Policy configuration.

Get started now by providing your website URL and launch the scan!

Your website is not yet online?

Try our CSP Evaluator

Example Configurations

Example policy with nonce and domain whitelist

CSP Header with nonce and allowed domain

Content-Security-Policy: style-src-elem 'self' 'nonce-random123' https://cdn.example.com;

Allowed

<!-- allowed as it has the correct nonce -->
<style nonce="random123">
  body { background: #fff; }
</style>

<!-- allowed as it's from the same origin -->
<link rel="stylesheet" href="/styles/main.css">

<!-- allowed as it's from whitelisted domain -->
<link rel="stylesheet" href="https://cdn.example.com/styles.css">

Blocked

<!-- blocked as it has no nonce -->
<style>
  body { color: red; }
</style>

<!-- blocked as it's from non-whitelisted domain -->
<link rel="stylesheet" href="https://unauthorized-cdn.com/styles.css">

<!-- blocked as it has wrong nonce -->
<style nonce="wrong">
  p { font-size: 16px; }
</style>

Additional Information

The style-src-elem directive is part of CSP Level 3
It provides more granular control over style elements compared to style-src
This directive helps prevent injection of malicious styles through <style> elements
Consider using external stylesheets with integrity hashes for third-party resources