Content Security Policy And You

Using Content Security Policy to enhance the security of your site for the greater good, or whatever.

Enter headers, stage right

There are quite a few security headers to go through, though in this post I'm only going to cover one. That one being Content-Security-Policy (CSP).
Now this one is amazing considering it allows you to set where form actions can go as well as where scripts, styles, images, and more can originate from.

How it all works

To really understand how to work with this header, I would suggest checking out everything you can do through content-security-policy.com and getting familiar with it through there.

Gotchas

Now, even though the above shows you everything you could do, there are a few things you shouldn't. Some examples and their reasonings:

  • https: "Allows loading resources only over HTTPS on any domain."
  • script-src 'unsafe-inline': "Allows use of inline source elements such as style attribute, onclick, or script tag bodies (depends on the context of the source it is applied to) and javascript: URIs"
  • script-src 'unsafe-eval': "Allows unsafe dynamic code evaluation such as JavaScript eval()
  • A solid beginning

    A CSP to start from should look something like the following:

  • default-src: 'none'
  • Anything that isn't set anywhere else should be blocked outright.
  • script-src: https://www.example.com
  • Replace with wherever a .js file is loaded from
  • style-src: https://example.com
  • Anywhere a .css file is loaded from, replace this.
  • img-src: https://example.org
  • Any place that an image originates, replace.
  • font-src: https://www.example.org
  • Custom fonts ( from Google or FontAwesome for example )? Replace!

    Further Reading

    For more information about CSP and a deeper dive into this header check out content-security-policy.com, Mozilla's CSP docs, and Google's Web Security Fundamentals page about CSP


    Questions/Comments/Issues? Feel free to contact me using the methods below.