style-src

The style-src directive controls which CSS sources can be loaded and executed in your web application. It's a crucial CSP directive that helps prevent CSS-based attacks and ensures that only trusted styles are applied to your application.

Recommended Values

  • 'self' Allows the resource to be loaded and executed

  • https://subdomain.domain.com/path 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

Recommended style-src configuration

Content-Security-Policy: style-src 'self' https://trusted-cdn.com;

Relationship with style-src-elem and style-src-attr

The style-src directive is a shorthand that encompasses both style-src-elem and style-src-attr directives:
  • style-src-elem controls the loading and execution of <style> elements and <link rel="stylesheet"> elements
  • style-src-attr specifically controls inline style attributes (like style="...")
  • If either of these more specific directives is not specified, the browser falls back to the rules specified in style-src
Using these directives together allows for more granular control over CSS execution. For example, you might want to:
  • Allow external stylesheets from trusted CDNs via style-src-elem
  • Block all inline styles via style-src-attr
  • Or create other combinations based on your security requirements

Tips & Tricks

  • The nonce value must be unique for each request and must be the same as the one specified in the Content-Security-Policy header.

  • Hashes can be used to allow specific inline styles. See the values section for more information.

  • Do not use 'unsafe-inline' as it may introduce security vulnerabilities. Use with caution.

  • Using broad keywords like 'data:' 'blob:' 'http:' 'https:' is too permissive and may introduce security vulnerabilities. Use with caution.

Possible Values

  • 'none': No styles are allowed
  • 'self': Only styles from the same origin are allowed
  • 'report-sample': Includes a sample of the violating code in violation reports
  • Nonces: 'nonce-<random>' for specific inline styles
  • Hashes: 'sha256-<hash>' for specific inline styles
  • URLs: Specific domains (e.g., https://trusted-cdn.com)
  • Schemes: Protocol schemes (e.g., https:)
  • ⚠️ 'unsafe-inline': Allows inline styles (insecure)

Example Configurations

Example policy with nonce

CSP Header with nonce

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

Allowed

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

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

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

<!-- allowed as it has the correct nonce -->
<div style="color: red;" nonce="random123">Styled content</div>

Blocked

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

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

<!-- blocked as the domain is not authorized -->
<link rel="stylesheet" href="https://malicious.com/styles.css">

<!-- blocked as it has no nonce -->
<div style="color: red;">Styled content</div>

Additional Information

  • The style-src directive is important for preventing CSS-based attacks
  • Consider using nonces or hashes instead of 'unsafe-inline' for better security
  • Be careful when allowing external stylesheets as they can potentially leak information
  • The style-src directive affects both <style> elements and <link rel="stylesheet"> elements

Related Resources

External Articles

Related Documentation Sections