---

CSP Hash Example

Using a hash is one way to allow the execution of inline scripts in a Content Security Policy (CSP). Here's how one might use it with the CSP with JavaScript:

Suppose we have the following script on our page:

<script>doSomething();</script>

If you compute the SHA-256 hash of our entire JavaScript code block, in our case it is just: doSomething(); you will get the value:

RFWPLDbv2BY+rCkDzsE+0fr8ylGr2R2faWMhq4lfEQc=

Finally we can add the hash to our script-src directive to allow it to execute via our Content-Security-Policy header:

script-src 'sha256-RFWPLDbv2BY+rCkDzsE+0fr8ylGr2R2faWMhq4lfEQc=';

What CSP hash algorithms are supported?

The CSP Level 2 specification allows sha256, sha384, and sha512

How do you generate the hash?

The easiest way to generate it is to just open the developer tools console and it will output what the expected hash of your script was in the console error message.

You can also use tools such as openssl to generate it, whitespace is not ignored.

Here is an example using openssl, which will be installed by default on most mac or linux systems:

echo -n 'doSomething();' | openssl sha256 -binary | openssl base64

Using a Hash on External Scripts

You can use a CSP hash on external scripts or stylesheets to allow them to execute. For example if we have a CSP policy similar to the following:

Content-Security-Policy: default-src 'none';script-src 'sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo='

Now we can load jquery-3.7.1.min.js based on it's hash alone, without adding code.jquery.com to the CSP policy.

<script src="https://code.jquery.com/jquery-3.7.1.min.js" 
	integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" 
	crossorigin="anonymous"></script>

Note that the above example is also using subresource integrity or SRI to enforce the hash. You might find it duplicating to have it in both places, but it can serve as a good way to document which hash is for which script.

On the topic of SRI, it is worth noting that CSP did implement a directive called require-sri-for, which could be used to enforce SRI for script tags like this: require-sri-for script. This feature was experimental and was removed for a few different reasons. One of the reasons it was not as useful as it sounds is that it also required CORS access in order to verify the the integrity from the policy. The require-sri-for directive was implemented in Chrome and Firefox around 2017-2019

Why is my CSP Hash Not Working?

There are a three common reasons your CSP hash might not be working:

1. You are missing the single quotes around the hash. If your CSP Header looks like this: script-src sha256-abc123; you need to wrap it in single quotes, for example: script-src 'sha256-abc123';
2. The hash is not valid.
   
   • You or someone changed your javascript code making the hash invalid. You have to generate a new hash for the updated script. If the script will change a lot consider if using a CSP nonce is a better approach.
   • Removing or adding whitespace will cause the hash to become invalid.
   • Code Reformatting - causing addition of whitespace or newlines
   • CDN - for example CloudFlare might be optimizing your HTML removing whitespace inside your script tags causing the hash to become invalid. You can work around this by removing all the space in the script ahead of time.
3. Your browser doesn't support CSP Level 2. This is becoming less common now, as browser support for CSP level 2 is more common than not. Give our CSP Browser Test a try to double check.

CSP Hash Browser Support

The hash source list directive was added to CSP Level 2. This means that support has existed since 2015 in Chrome and Firefox, Safari 10+ or Edge 15+.

It is not supported at all in Internet Explorer, you need to use the Edge browser instead.

---