Security Trivia Series: Hints on default-src CSP directive

Content-Security-Policy (CSP) header is well-known to help to guarantee security on your website by setting allowed trusted origins in a declarative way.

Content-Security-Policy: <directive> <source>;

Directives could be source-src, img-src, font-src, and many others and source (or sources) will have the allowed URL you trust. For example, if you want to list all image URL using a img-src directive you would have the following:

Content-Security-Policy: img-src;

This will allow only to be fetched, whereas if we try to have an HTML img tag that links to https://some-other-image.jpg it will not initiate the request and will give the error:

CSP also supports wildcards that means if you set

Content-Security-Policy: frame-src https://*; and will be fetched if added to an iframe, but will not.

But what about default-src?

default-src is a directive that sets the default for other directives. It means that if you set it to

Content-Security-Policy: default-src;

only the URL to will be allowed (for fonts, scripts, or other).

If you already have everything working and you just want to add CSP directives it could be a good idea to set

Content-Security-Policy: default-src ‘none’;

It will disallow every request and log all warnings in console, so you will be able to check which ones you need to add to the list.

Looking at these errors we can figure out that we have two images, one iframe and one script and it also hints about the directives you should be using to grant permission to these sources. A possible solution is the following:

  default-src 'self';   
  img-src https://some-other-image.jpg;   
  script-src [https://some-external-script.js;](https://some-external-script.js;)

Note that we set default-src to ‘self’ (single quotes are required!) which means everything not specified will default to the current origin.

What if we do Content-Security-Policy: default-src https:;?

Content-Security-Policy: default-src https:; is a good trick to default every possible request to use HTTPS. It disallows the use of HTTP resources. If all network connections your website points to are using HTTPS, you should use this. If not, you should update all your resources to use HTTPS and then change it.

CSP allows us to introduce an extra interesting level of security and helps fight Cross-Site Scripting (XSS) attacks. It gives some work to set up, but it makes it worth. We explored CSP default-src directive and we gave some interesting hints in this blogpost, but checkout MDN docs on default-src if you want to check out all options. There is also this github with some examples that you can use to play around.

Want to know more? We will cover report-uri directive in another blogpost, follow us and stay tuned!

Written by Daniela Matos de CarvalhoFebruary 25th, 2019

Share this article

Find us

London - HQ

9 Dallington Street



+44(0) 203 514 4678


Rua Ramalho Ortigão 8

3º Esquerdo




Rua Sá da Bandeira 819

2º Esquerdo