e> <source>;
    

###  Sources

` <source> ` can be any one of the values listed in [ CSP Source Values ](/en-
US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#sources) .

Note that this same set of values can be used in all [ fetch directives ](/en-
US/docs/Glossary/Fetch_directive) (and a [ number of other directives ](/en-
US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#relevant_directives)
).

##  Examples

###  Violation cases

Given this CSP header:

http

    
    
    Content-Security-Policy: style-src https://example.com/
    

the following stylesheets are blocked and won't load:

html

    
    
    <link href="https://not-example.com/styles/main.css" rel="stylesheet" />
    
    <style>
      #inline-style {
        background: red;
      }
    </style>
    
    <style>
      @import url("https://not-example.com/styles/print.css") print;
    </style>
    

as well as styles loaded using the [ ` Link ` ](/en-
US/docs/Web/HTTP/Headers/Link) header:

http

    
    
    Link: <https://not-example.com/styles/stylesheet.css>;rel=stylesheet
    

Inline style attributes are also blocked:

html

    
    
    <div style="display:none">Foo</div>
    

As well as styles that are applied in JavaScript by setting the ` style `
attribute directly, or by setting [ ` cssText ` ](/en-
US/docs/Web/API/CSSStyleDeclaration/cssText "cssText") :

js

    
    
    document.querySelector("div").setAttribute("style", "display:none;");
    document.querySelector("div").style.cssText = "display:none;";
    

However, styles properties that are set directly on the element's [ ` style `
](/en-US/docs/Web/API/HTMLElement/style "style") property will not be blocked,
allowing users to safely manipulate styles via JavaScript:

js

    
    
    document.querySelector("div").style.display = "none";
    

These types of manipulations can be prevented by disallowing JavaScript via
the [ ` script-src ` ](/en-US/docs/Web/HTTP/Headers/Content-Security-
Policy/script-src) CSP directive.

###  Unsafe inline styles

**Note:** Disallowing inline styles and inline scripts is one of the biggest
security wins CSP provides. However, if you absolutely have to use it, there
are a few mechanisms that will allow them.

To allow inline styles, ` 'unsafe-inline' ` , a nonce-source or a hash-source
that matches the inline block can be specified. The following Content Security
Policy will allow inline styles like the [ ` <style> ` ](/en-
US/docs/Web/HTML/Element/style) element, and the ` style ` attribute on any
element:

http

    
    
    Content-Security-Policy: style-src 'unsafe-inline';
    

The following [ ` <style> ` ](/en-US/docs/Web/HTML/Element/style) element and
` style ` attribute will be allowed by the policy:

html

    
    
    <style>
      #inline-style {
        background: red;
      }
    </style>
    
    <div style="display:none">Foo</div>
    

You can use a nonce-source to only allow specific inline style blocks. You
need to generate a random nonce value (using a cryptographically secure random
token generator) and include it in the policy. It is important to note, this
nonce value needs to be dynamically generated as it has to be unique for each
HTTP request:

http

    
    
    Content-Security-Policy: style-src 'nonce-2726c7f26c'
    

You will have to set the same nonce on the [ ` <style> ` ](/en-
US/docs/Web/HTML/Element/style) element:

html

    
    
    <style nonce="2726c7f26c">
      #inline-style {
        background: red;
      }
    </style>
    

Alternatively, you can create hashes from your inline styles. CSP supports
sha256, sha384 and sha512. The **binary** form of the hash has to be encoded
with base64. You can obtain the hash of a string on the command line via the `
openssl ` program:

bash

    
    
    echo -n "#inline-style { background: red; }" | openssl dgst -sha256 -binary | openssl enc -base64
    

You can use a hash-source to only allow specific inline style blocks:

http

    
    
    Co