Adding security headers to Prism JS

I recently came across the Prism JS syntax highlighting library whilst looking at a few options to spruce up my blog. I was very disappointed, though not at all surprised, that they didn't have support for my favourite security headers, so I added it.

Prism JS

The Prism JS library can be found over on GitHub and covers a whole host of languages. It looked really good when testing it out on things like my PHP or NginX config snippets.

PHP code:

$foo = "Some string!";
$bar = "Other string.";

function output() {
    echo $foo . " " . $bar;
}

NginX config:

server {
    listen 107.170.218.42:443 ssl http2 default_server;
    listen [2604:a880:1:20::207:b001]:443 ssl http2 default_server;
    keepalive_timeout 70;
    server_name scotthelme.co.uk;
    client_max_body_size 10M;

    ssl_certificate /home/acme/ecdsa/cert.pem;
    ssl_certificate_key /home/acme/ecdsa/private.key;
    ssl_certificate /home/acme/rsa/cert.pem;
    ssl_certificate_key /home/acme/rsa/private.key;
    ssl_dhparam /etc/nginx/conf.d/ssl/dhparam.pem;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ...
}

These look really nice and are better than the bland code blocks I had before, but there wasn't anything for configs I was writing for CSP, and other security headers, so often.

CSP config:

default-src 'self'; script-src 'self'; style-src 'self'

Not so fancy looking is it. For that reason, I dediced to extend the libray and spruce up CSP, HSTS and HPKP!

CSP Config:

base-uri 'self' *;
block-all-mixed-content;
child-src 'self' example.com;
connect-src 'self' example.com;
default-src 'self' example.com;
font-src 'self' example.com;
form-action 'self';
frame-ancestors 'self' example.com;
frame-src 'self' example.com;
img-src 'self' example.com;
manifest-src 'self' example.com;
media-src 'self' example.com;
object-src 'none';
plugin-types media;
referrer same-origin;
reflected-xss block;
report-to https://report-uri.com;
report-uri https://report-uri.com;
sandbox allow-forms;
script-src 'self' example.com 'nonce-abc123' 'unsafe-eval' 'unsafe-hashed-attributes';
style-src 'self' example.com 'sha256-value' 'unsafe-inline' 'strict-dynamic';
upgrade-insecure-requests;

HSTS config:

max-age=100;
max-age=31536000;
includeSubDomains;
preload;

HPKP config:

max-age=100;
max-age=2592000;
includeSubDomains;
preload;
report-uri="https://report-uri.com";
strict;
pin-sha256="someValue";
pin-sha256="someValue";

I'm not sure if the pull request will be accepted but I will open up the source so everyone can have a pretty CSP, HSTS or HPKP config! There's also a little added bonus of red/green highlighting for safe and unsafe values. I hope you like it!