CentralCSP

style-src


style-src

style-src

The style-src directive specifies the sources from which stylesheets can be loaded.

Recommended Values

  • 'self'

    Allows styles from the same origin

    Allows styles from the same origin

  • https://subdomain.domain.com

    Allows styles from a specific external site

    Allows styles from a specific external site

  • nonce-<random>

    Allows styles with a specific nonce value

    Allows styles with a specific nonce value

  • sha256-<hash>

    Allows styles with a specific hash

    Allows styles with a specific hash

Explore detailed value definitions

Tips & Tricks

  • To allow inline styles, 'unsafe-inline', a nonce-source or a hash-source that matches the inline block can be specified.

  • It is recommended using a nonce-source or hash instead of hashes to allow specific styles as it will be easier to maintain.

  • Using 'unsafe-inline' is not recommended as it allows all inline styles, which can be a security risk. Consider using nonces or hashes instead.

Available Values

  • 'none'

    Blocks all style sources

    Blocks all style sources

  • 'self'

    Allows styles from the same origin

    Allows styles from the same origin

  • 'sha256-<hash>'

    Allows styles matching a specific hash

    Allows styles matching a specific hash

  • https://example.com

    Allows loading styles from specific origins

    Allows loading styles from specific origins

  • 'report-sample'

    Requires the first 40 characters of the blocked style to be included in violation reports

    Requires the first 40 characters of the blocked style to be included in violation reports

  • 'unsafe-inline'

    Allows inline styles and style attributes (not recommended)

    Allows inline styles and style attributes (not recommended)

Examples

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

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

    Allowed

        <!-- allowed by 'self' -->
        <link rel='stylesheet' href='/css/style.css'>
    
        <!-- allowed by https://example.com -->
        <link rel='stylesheet' href='https://example.com/css/style.css'>
    
        <!-- allowed by nonce -->
        <style nonce="2726c7f26c">
          inline-style {background: red;}
        </style>
    
        <!-- allowed by 'self' -->
        <div style="display:none">Foo</div>
    

    Blocked

        <!-- blocked as the domain is not authorized -->
        <link href="https://malicious.website.com/styles/main.css" rel="stylesheet" type="text/css" />
    
        <!-- blocked as the domain is not authorized and no nonce -->
        <style>
          @import url("https://malicious.website.com/styles/sheet.css") ;
        </style>
    
        <!-- blocked as the domain is not authorized -->
        <link> href="https://malicious.website.com/styles/stylesheet.css" rel="stylesheet" type="text/css" />

Frequently Asked Questions

What is the style-src directive used for?

The style-src directive controls which styles (CSS) can be applied to your document. This includes both external stylesheets and inline styles. It helps prevent injection of malicious styles that could be used for the UI redressing attacks or data exfiltration.

Default Behavior

If style-src is not specified, the browser falls back to default-src for style loading permissions.

What are common values for style-src?

Common values include 'self' to allow styles only from your domain, specific CDN domains for external stylesheets. For example: style-src 'self' https://cdn.example.com. Using nonces or hashes is recommended over 'unsafe-inline' for inline styles.

Security Note

Using 'unsafe-inline' with style-src can be dangerous as it allows any inline styles. Consider using nonces or hashes for better security.

How does style-src affect dynamic styles?

style-src affects both static and dynamic styles, including those added via JavaScript's style property or insertRule(). When using frameworks that dynamically generate styles, you may need to allow a specific sources or use nonces/hashes to ensure proper functionality.

Best Practice

For applications using dynamic styles, consider using style-src-attr and style-src-elem directives for more granular control over different types of style applications.

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