What is a Content Security Policy?

And why should you implement one on your website?

source: https://www.rahulpnath.com/blog/http-content-security-policy-csp/

CSP is one of your first lines of defense against malicious actors on the internet. What a content security policy allows you to do, fundamentally, is to to specify what addresses you want to allow your website to load scripts and other resources from. It looks something like this:

To set it you will either add the above line (configured to your liking) to the header section of every page on your website, or configure your server to do the same thing for you. Visit the MDN Docs example section if you want to jump the gun and just get going right away, or read on to learn more about the why and the details.

Using a Content Security Policy:

You assemble the attributes of the CSP in the following format:

content="{sourceType} {restrictionRule}; {sourceType}{restrictionRule}; {sourceType} {restrictionRule}; etc..."

There are 5 sourceTypes in the CSP that you should be aware of. Each of them restricts the allowed sources of a specific file type by the rule that you provide. For example, if you only want to allow your website to request images from the current domain, then you can add img-src ‘self’ to your CSP. See the other important source locations below:

1. default-src (refers to scripts loaded on the site)
2. img-src
3. media-src
4. style-src
5. connect-src (refers to AJAX and other web APIs that send information requests across the internet)

Here is an example CSP using several of the sourceTypes above:

content = "default-src 'self'; style-src 'self'; img-src *; media-src media1.com media2.com; script-src userscripts.example.com;"

How to set restriction rules for each content type: