DEV Community

Simon Foster
Simon Foster

Posted on • Originally published at on

Content Security Policies

A content Security Policy or CSP is a HTTP response header that defines what sources of content can be loaded on a web page. It is a way to combat Cross Site Scripting (XSS) attacks.

What is a XSS attack then?

When you load a webpage it also loads various other resources like images, some css style sheets, various javascript files that you want to run and probably many other things.

How do you know that you can trust all of these things? If you created them and they live under you control then the answer is probably yes. However these days you will probably want to use resources from across the internet, like youtube videos, google analytics, disqus comments, jquery libraries from a cdn etc and you can’t be sure exactly what they are doing.

Imagine you had a page which you could add any text into a form which would then be displayed. A malicious user could add evil javascript or get the browser to load evil code from anywhere on the internet.

CSP to the rescue!

A CSP allows the browser to only load from sources that you specify. You could specify that resources from your own site will load but the evil script will not.

Let’s look at some examples

Content-Security-Policy: script-src 'self'

This allows tags to only load from the current webhost. script-src is not the only keyword you can use, let’s look at some of the others.</p> <p><strong>script-src</strong> – control what <script> tags will load<br><br> <strong>style-src</strong> – control what css will load<br><br> <strong>img-src</strong> – control what images will load<br><br> <strong>frame-src</strong> – control what frames will load<br><br> <strong>font-src</strong> – control what fonts will load<br><br> <strong>object-src</strong> – control what object tags will load<br><br> <strong>connect-src</strong> – control what resources a script can connect to<br><br> <strong>media-src</strong> – controls what media (audio/video) will load<br><br> <strong>default-src</strong> – if no specific rule exists then the default directive will run</p> <p><code>Content-Security-Policy: default-src https</code></p> <p>This allows any content to be loaded from any site as long as it comes from a secure (https) site</p> <p><code>Content-Security-Policy: default-src</code></p> <p>This allows any content to be loaded from <a href=""></a> only.</p> <h3> <a name="how-do-i-use-this-on-my-site" href="#how-do-i-use-this-on-my-site" class="anchor"> </a> How do I use this on my site? </h3> <p>I have added CSPs into my web.config which works great for my .Net Framework code.<br> </p> <div class="highlight"><pre class="highlight plaintext"><code> &lt;system.webServer&gt; &lt;httpProtocol&gt; &lt;customHeaders&gt; &lt;add name="Content-Security-Policy" value="default-src" /&gt; &lt;/customHeaders&gt; &lt;/httpProtocol&gt; &lt;/system.webServer&gt; </code></pre></div> <p></p> <p>For .net core it is a bit more complex as you don’t tend to use web.config files, however check out Anthony Chu’s <a href="">post</a>, which has a solution to that problem.</p> <h3> <a name="report-only" href="#report-only" class="anchor"> </a> Report Only </h3> <p>One last thing about CSPs to mention is the Report Only flag.</p> <p><code>Content-Security-Policy-Report-Only</code></p> <p>This does the same as the above but doesn’t enforce anything, so you can fix any problems before you break anything.</p> <p>To view your issues just look in the developer tools in your favourite browser. Or you can configure all your reports to be collated in one place with a report-uri directive.</p> <p><code>Content-Security-Policy: default-src; report-uri;</code></p> <p>Scott Helme and Troy Hunt have a site called <a href="">report-uri</a> which offer a service for collating and viewing all your CSP violations so check it out if you want to know more about CSPs.</p> <p>The post <a href="">Content Security Policies</a> appeared first on <a href="">Funky Si&#39;s Tech Talk</a>.</p>

Top comments (0)