Customizing Padawan's Content Security Policy

Padawan has a strict Content Security Policy (CSP) that is applied via HTTP headers by default.

Padawan Umbrella's CSP Header:

nginx

add_header Content-Security-Policy "
    default-src 'self';
    script-src 'self' *.dso.mil 'nonce-$cspNonce' www.google-analytics.com;
    script-src-elem 'self' *.dso.mil 'nonce-$cspNonce' www.google-analytics.com;
    style-src 'self' *.dso.mil 'nonce-$cspNonce' fonts.googleapis.com;
    style-src-elem 'self' *.dso.mil 'nonce-$cspNonce' fonts.googleapis.com;
    img-src 'self' data: mediastream: blob: *.dso.mil 'nonce-$cspNonce';
    connect-src 'self' *.dso.mil 'nonce-$cspNonce' www.google-analytics.com;
    font-src 'self' *.dso.mil  'nonce-$cspNonce' fonts.gstatic.com;
    object-src 'self' *.dso.mil 'nonce-$cspNonce';
    media-src 'self' *.dso.mil 'nonce-$cspNonce';
    form-action 'self' *.dso.mil;
    frame-src 'none';
    frame-ancestors 'none';" always;

Most sites can work within the confines of this CSP by utilizing the nioVd24YmPXd0B4lTkaVZA3sOBHhj8d8 (see CSP and inline script or style tags for more details on the nonce), sometimes a custom CSP needs to be applied for a site to work correctly. This is often a frustrating exercise of "try it and see" for the site developers, so we created these instructions to show developers how to run their site with a CSP locally.

As an example, let's run the gatsby-hello-world project. Gatsby is notoriously hard to get working with a CSP applied via headers. If you are developing your own static site, just substitute it for gatsby-hello-world in the walkthrough.

Clone the source code (or just cd into your site's source code directory)

shell

   git clone https://code.il2.dso.mil/platform-one/products/bullhorn/padawan/examples/gatsby-hello-world
   cd gatsby-hello-world

Run a production build for your site. We need to run the site inside Padawan for the CSP to be applied. Take note of where your build output is saved - some frameworks might use ./dist , others might use ./public . You'll see ./public in the following steps since that's what Gatsby uses, so be sure to replace the path with what your site actually uses if you're following along.

shell

# install dependencies if necessary
npm i
# build for production
npm run build

Next we'll create a custom NGINX config file for our site. This initial config will simply add a header X-TESTING-CSP so we can verify the location matching is working as expected. custom-csp.conf

nginx

# replace "gatsby-hello-world" with the name of your site's repo
location ^~ /sites/gatsby-hello-world/ {
  add_header X-TESTING-CSP "testtesttest" always;
}

Now we'll host the build output and the NGINX config in the Padawan Umbrella NGINX container. Remember to update the paths so the volume mounts are correct. run nginx container

shell

docker run -it --rm \
--name=padawan-csp-test \
-p 9999:8080 \
-v $PWD/public:/var/www/sites/gatsby-hello-world \
-v $PWD/custom-csp.conf:/etc/nginx/conf.d/site-config/custom-csp.conf \
registry.il2.dso.mil/platform-one/products/bullhorn/padawan/padawan-umbrella:1.0.2

Access your site in the browser at gatsby-hello-world and verify that the response headers include X-TESTING-CSP: testtesttest to ensure that the custom NGINX config created in Step #3 is correctly applied.
Now comes the iterative process of editing the custom-csp.conf file to tweak a custom CSP so that your site works. Start with copying the Padawan default CSP definition from the top of this document and then start making edits until your site works as you expect and does not print any CSP errors in the browser console.

TIP

you'll have to restart the NGINX docker container after each change to custom-csp.conf

Once you have finished refining your CSP you can implement it using Padawan's Configuration Self-Management.

Customizing Padawan's Content Security Policy ​

Customizing Padawan's Content Security Policy