How does Content Security Policy CSP work

Question

I m getting a bunch of errors in the developer console   Refused to evaluate a string Refused to execute inline script because it violates the following Content Security Policy directive Refused to load the script Refused to load the stylesheet  What s this all about  How does Content Security Policy  CSP  work  How do I use the Content-Security-Policy HTTP header  Specifically  how to        allow multiple sources     use different directives     use multiple directives     handle ports     handle different protocols     allow file    protocol     use inline styles  scripts  and tags  lt style gt  and  lt script gt      allow eval     And finally   What exactly does  self  mean

User · Answer

Apache 2 mod headers You could also enable Apache 2 mod headers  On Fedora it s already enabled by default  If you use Ubuntu Debian  enable it like this    First enable headers module for Apache 2    and then restart the Apache2 service a2enmod headers apache2 -k graceful  On Ubuntu Debian you can configure headers in the file  etc apache2 conf-enabled security conf     Setting this header will prevent MSIE from interpreting files as something   else than declared by the content type in the HTTP headers    Requires mod headers to be enabled     Header set X-Content-Type-Options   quot nosniff quot       Setting this header will prevent other sites from embedding pages from this   site as frames  This defends against clickjacking attacks    Requires mod headers to be enabled    Header always set X-Frame-Options   quot sameorigin quot  Header always set X-Content-Type-Options nosniff Header always set X-XSS-Protection  quot 1  mode block quot  Header always set X-Permitted-Cross-Domain-Policies  quot master-only quot  Header always set Cache-Control  quot no-cache  no-store  must-revalidate quot  Header always set Pragma  quot no-cache quot  Header always set Expires  quot -1 quot  Header always set Content-Security-Policy   quot default-src  none   quot  Header always set Content-Security-Policy   quot script-src  self  www google-analytics com adserver example com www example com  quot  Header always set Content-Security-Policy   quot style-src  self  www example com  quot   Note  This is the bottom part of the file  Only the last three entries are CSP settings  The first parameter is the directive  the second is the sources to be white-listed  I ve added Google analytics and an adserver  which you might have  Furthermore  I found that if you have aliases  e g  www example com and example com configured in Apache  2 you should add them to the white-list as well  Inline code is considered harmful  and you should avoid it  Copy all the JavaScript code and CSS to separate files and add them to the white-list  While you re at it you could take a look at the other header settings and install mod security Further reading  https   developers google com web fundamentals security csp  https   www w3 org TR CSP

User · Answer

The Content-Security-Policy meta-tag allows you to reduce the risk of XSS attacks by allowing you to define where resources can be loaded from  preventing browsers from loading data from any other locations  This makes it harder for an attacker to inject malicious code into your site  I banged my head against a brick wall trying to figure out why I was getting CSP errors one after another  and there didn t seem to be any concise  clear instructions on just how does it work  So here s my attempt at explaining some points of CSP briefly  mostly concentrating on the things I found hard to solve  For brevity I won   t write the full tag in each sample  Instead I ll only show the content property  so a sample that says content  quot default-src  self  quot  means this   lt meta http-equiv  quot Content-Security-Policy quot  content  quot default-src  self  quot  gt   1  How can I allow multiple sources  You can simply list your sources after a directive as a space-separated list  content  quot default-src  self  https   example com js  quot   Note that there are no quotes around parameters other than the special ones  like  self   Also  there s no colon     after the directive  Just the directive  then a space-separated list of parameters  Everything below the specified parameters is implicitly allowed  That means that in the example above these would be valid sources  https   example com js file js https   example com js subdir anotherfile js  These  however  would not be valid  http   example com js file js      wrong protocol  https   example com file js                       above the specified path  2  How can I use different directives  What do they each do  The most common directives are   default-src the default policy for loading javascript  images  CSS  fonts  AJAX requests  etc script-src defines valid sources for javascript files style-src defines valid sources for css files img-src defines valid sources for images connect-src defines valid targets for to XMLHttpRequest  AJAX   WebSockets or EventSource  If a connection attempt is made to a host that s not allowed here  the browser will emulate a 400 error  There are others  but these are the ones you re most likely to need  3  How can I use multiple directives  You define all your directives inside one meta-tag by terminating them with a semicolon      content  quot default-src  self  https   example com js   style-src  self  quot   4  How can I handle ports  Everything but the default ports needs to be allowed explicitly by adding the port number or an asterisk after the allowed domain  content  quot default-src  self  https   ajax googleapis com http   example com 123 free stuff  quot   The above would result in  https   ajax googleapis com 123                                 Not ok  wrong port  https   ajax googleapis com - OK  http   example com free stuff file js                     Not ok  only the port 123 is allowed  http   example com 123 free stuff file js - OK  As I mentioned  you can also use an asterisk to explicitly allow all ports  content  quot default-src example com   quot   5  How can I handle different protocols  By default  only standard protocols are allowed  For example to allow WebSockets ws    you will have to allow it explicitly  content  quot default-src  self   connect-src ws   style-src  self  quot                                               web Sockets are now allowed on all domains and ports   6  How can I allow the file protocol file     If you ll try to define it as such it won   t work  Instead  you ll allow it with the filesystem parameter  content  quot default-src filesystem quot   7  How can I use inline scripts and style definitions  Unless explicitly allowed  you can t use inline style definitions  code inside  lt script gt  tags or in tag properties like onclick  You allow them like so  content  quot script-src  unsafe-inline   style-src  unsafe-inline  quot   You ll also have to explicitly allow inline  base64 encoded images  content  quot img-src data  quot   8  How can I allow eval    I m sure many people would say that you don t  since  eval is evil  and the most likely cause for the impending end of the world  Those people would be wrong  Sure  you can definitely punch major holes into your site s security with eval  but it has perfectly valid use cases  You just have to be smart about using it  You allow it like so  content  quot script-src  unsafe-eval  quot   9  What exactly does  self  mean  You might take  self  to mean localhost  local filesystem  or anything on the same host  It doesn t mean any of those  It means sources that have the same scheme  protocol   same host  and same port as the file the content policy is defined in  Serving your site over HTTP  No https for you then  unless you define it explicitly  I ve used  self  in most examples as it usually makes sense to include it  but it s by no means mandatory  Leave it out if you don t need it  But hang on a minute  Can t I just use content  quot default-src   quot  and be done with it  No  In addition to the obvious security vulnerabilities  this also won   t work as you d expect  Even though some docs claim it allows anything  that s not true  It doesn t allow inlining or evals  so to really  really make your site extra vulnerable  you would use this  content  quot default-src    unsafe-inline   unsafe-eval  quot       but I trust you won   t  Further reading  http   content-security-policy com http   en wikipedia org wiki Content Security Policy

[javascript] How does Content Security Policy (CSP) work?

Apache 2 mod_headers

Examples related to javascript

Examples related to html

Examples related to security

Examples related to http-headers

Examples related to content-security-policy