urity-
Policy/style-src) ).

CSP version  |  3   
---|---  
Directive type  |  [ Fetch directive ](/en-US/docs/Glossary/Fetch_directive)  
[ ` default-src ` ](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/default-src) fallback  |  Yes. If this directive is absent, the user agent will look for the [ ` style-src ` ](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src) directive, and if both of them are absent, fallback to ` default-src ` directive.   
  
##  Syntax

One or more sources can be allowed for the ` style-src-attr ` policy:

http

    
    
    Content-Security-Policy: style-src-attr <source>;
    Content-Security-Policy: style-src-attr <source> <source>;
    

` style-src-attr ` can be used in conjunction with [ ` style-src ` ](/en-
US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src) :

http

    
    
    Content-Security-Policy: style-src <source>;
    Content-Security-Policy: style-src-attr <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-attr 'none'
    

â¦the inline style applied to the element below will not be applied:

html

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

The policy would also block any styles 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;";
    

Style 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";
    

Note that using JavaScript might independently be blocked using the [ `
script-src ` ](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-
src) CSP directive.

##  Specifications

Specification  
---  
[ Content Security Policy Level 3  
#  directive-style-src-attr  ](https://w3c.github.io/webappsec-csp/#directive-
style-src-attr)  
  
##  Browser compatibility

BCD tables only load in the browser  with JavaScript enabled. Enable
JavaScript to view data.

##  See also

  * [ ` Content-Security-Policy ` ](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy)
  * [ ` style-src ` ](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src)
  * [ ` style-src-elem ` ](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src-elem)
  * [ ` Link ` ](/en-US/docs/Web/HTTP/Headers/Link) header 
  * [ ` <style> ` ](/en-US/docs/Web/HTML/Element/style) , [ ` <link> ` ](/en-US/docs/Web/HTML/Element/link)
  * [ ` @import ` ](/en-US/docs/Web/CSS/@import)
  * [ ` CSSStyleSheet.insertRule() ` ](/en-US/docs/Web/API/CSSStyleSheet/insertRule)
  * [ ` CSSGroupingRule.insertRule() ` ](/en-US/docs/Web/API/CSSGroupingRule/insertRule)
  * [ ` CSSStyleDeclaration.cssText ` ](/en-US/docs/Web/API/CSSStyleDeclaration/cssText)

##  Help improve MDN

Was this page helpful to you?

Yes  No

[ Learn how to contribute
](https://github.com/mdn/content/blob/main/CONTRIBUTING.md "This will take you
to our contribution guidelines on GitHub.") .

This page was last modified on  Oct 10, 2023  by  [ MDN contributors ](/en-
US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src-
attr/contributors.txt) .

[ View this page on GitHub
](https://github.com/mdn/content/blob/main/files/en-
us/web/http/headers/content-security-