Content Security Policy Added

I’ve made a few security tweaks to the site with the largest impact being the addition of some locked down Content Security Policy (CSP) headers. Hopefully nothing is broken for anyone using a crappy, old browser.

Content Security Policy is a set of HTTP headers that are returned by the web server, telling the browser what locations certain content can be loaded from. For example, the CSP headers could specify what sites/domains can load images, run scripts, or load fonts.

In Nginx, one adds the header to the server block. If you look at the HTTP headers returned by this server, you’ll see the following:

Content-Security-Policy: "default-src 'self' *; frame-src 'none'; img-src 'self'; style-src 'self'; font-src 'self'; script-src 'self' 'unsafe-inline'; object-src 'none'

To get the server to send those headers, I make the following change to the Nginx configuration file within the “server” block:

server {
add_header Content-Security-Policy "default-src 'self' *; frame-src 'none'; img-src 'self'; style-src 'self'; font-src 'self'; script-src 'self' 'unsafe-inline'; object-src 'none'"

More information about how CSP works and how to configure it is available at the following resources: Mozilla: Introducing Content Security Policy

HTML 5 Rocks: An Introduction to Content Security Policy

Chrome Developer Site: Content Security Policy

Content Security Policy Quick Reference Guide

On a related note, Chrome’s web inspector was again indispensible in troubleshooting missing declarations that broke site functionality. When doing CSP troubleshooting, be sure to use it and check for any errors it may show.