Introduction

Since internet has existed, people have been trying to deface websites, hack applications, or distribute malware. So, we use firewalls to keep unwanted visitors out and implement SSL to secure traffic between admins and the website.

Of course, we still have some issues. One of them is cross site scripting (XSS). An example could be that we have a user profile that offers a biography section with rich text. Rich text allows users to add some markup to their content (bold, color etc) and sometimes even call scripts from other websites. And of course, these scripts can be hostile.

In this never-ending battle there is a concept that can help prevent this, referred to as content security policy. This allows you to define what content can be displayed on your website. For instance, you may want to allow videos fromYouTube or Vimeo (but no other site). And maybe you want to execute scripts from your CDN but nowhere else.

More in-depth info can be found on https://developer.mozilla.org/en-US/docs/Web/HTTP/...

What buttons can we push?

There is a lot that we can define. We have all kinds of sources, but the most used are images, scripts, styles, fonts, and media. We can set these types to allow our own content and websites that we select. Mind you, that some times those websites also use external sources because they use Bootstrap, Open Sans, or icons or...It can easily require multiple iterations to have your content security policy set correctly and completely.

There is a cheat sheet on https://scotthelme.co.uk/csp-cheat-sheet/

Do I need to create this from scratch?

No. What you can do is :

1. Start with a default version (below).
2. Visit your website and discover what has been blocked by your content security policy
3. Import your CSP on https://report-uri.com/home/generate
4. Adjust the items you need and generate a new CSP version

***
As always: backup your web.config because 1 mistake can take your website down.

The fastest way to work (besides a staging or accept environment) is:

• Have an FTP app like Filezilla ready
• Download the working web.config and rename it to .old (just to be sure)
• Download the version again, this will be the one work-in-progress

***

Ok, cool. Now where do I put this CSP?

The CSP is placed in your web.config in the section customheaders. There is an example further below.

Do you have a piece of example code?

In this version I incorporated some common items when bootstrap is used as well as Google fonts and some native share buttons.

*** As this was written in Word online, please review this piece of code in yourown editor***

<httpProtocol>
    <customHeaders>
        <add name="Content-Security-Policy" value="default-src 'self' ; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://www.google-analytics.com https://www.googletagmanager.com https://*.twitter.com https://apis.google.com/js/plusone.js https://platform.linkedin.com/in.js https://assets.pinterest.com/js/pinit.js https://static.ak.fbcdn.net https://cdn.syndication.twimg.com connect-src; style-src 'self' 'unsafe-inline' http://fonts.googleapis.com https://maxcdn.bootstrapcdn.com; img-src * data: ; media-src 'none' ; object-src 'self' ; frame-src https://www.youtube.com https://i.s-microsoft.com https://platform.twitter.com  https://syndication.twitter.com/;" />
    </customHeaders>
</httpProtocol>

Are there any reasons not to use a CSP?

Well, not all browsers support this. You can check this on https://caniuse.com/#feat=contentsecuritypolicy

If you have websites that are being visited by people witholder browsers you might serve them websites that are not working properly.