CentralCSP

style-src-elem


style-src-elem

style-src-elem

The style-src-elem directive specifies valid sources for stylesheets loaded using <style> elements and <link> elements with rel="stylesheet".

Recommended Values

  • 'self'

    Allows stylesheets from the same origin

    Allows stylesheets from the same origin

  • nonce-<random>

    Allows stylesheets with a specific nonce value

    Allows stylesheets with a specific nonce value

  • sha256-<hash>

    Allows stylesheets with a specific hash

    Allows stylesheets with a specific hash

  • domain.example

    Allows stylesheets from a specific domain

    Allows stylesheets from a specific domain

Explore detailed value definitions

Tips & Tricks

  • If style-src-elem 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.

Examples

  • Allows stylesheets from the same origin, a specific domain, and with a nonce

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

    Allowed

    <!-- allowed by 'self' -->
    <link rel="stylesheet" href="/styles/main.css">
    
    <!-- allowed by nonce -->
    <style nonce="2726c7f26c">body {background-color: #f0f0f0;}</style>
    
    <!-- allowed by cdn.example.com -->
    <link rel="stylesheet" href="https://cdn.example.com/framework.css">

    Blocked

    <!-- blocked as no 'unsafe-inline' and no matching nonce -->
    <style>p {color: red;}</style>
    
    <!-- blocked as domain not in allowed list -->
    <link rel="stylesheet" href="https://cdn.otherdomain.com/styles.css">

Frequently Asked Questions

What is the style-src-elem directive used for?

The style-src-elem directive controls which style elements and external stylesheets can be loaded in your application. It specifically governs <style> elements and <link rel='stylesheet'> elements, providing granular control over stylesheet sources separate from inline styles.

Default Behavior

If style-src-elem 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-elem?

Common values include 'self' to allow stylesheets only from your own domain, specific URLs for trusted CDNs, 'unsafe-inline' to allow <style> elements (though not recommended), and nonces/hashes for specific trusted style elements. For example: style-src-elem 'self' https://cdn.example.com

Security Note

When using external stylesheet sources, ensure they are trusted and served over HTTPS to prevent style injection attacks.

How does style-src-elem differ from style-src and style-src-attr?

While style-src is a general directive for all styles, style-src-elem specifically controls <style> elements and external stylesheets, and style-src-attr controls inline style attributes. This separation allows for precise policies like allowing external stylesheets while blocking inline styles completely.

Best Practice

For better security, consider using style-src-elem with specific trusted sources and avoiding 'unsafe-inline'. Use external stylesheets from verified sources instead of inline styles.

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

Learn more about other topics

Docs

CSP ScannerCSP EvaluatorReporting Endpoint

Contact


CentralSaaS © 2025