Django stripe js blocking of inline script

Answer to this question is Redux DevTools Firefox extension. After disabling this extension, console errors disappear. You can easily test this by going to this link in Firefox browser with Redux DevTools enabled. There is also an open github issue about this problem.

According to Mozilla's docs on Content-Security-Policy, there are tons of other security policies, and if your js/css files require one of those to be set, they will be blocked.

Luckily, there is an easy fix, default-src. From the aforementioned docs:

The HTTP Content-Security-Policy (CSP) default-src directive serves as a fallback for the other CSP fetch directives. For each of the following directives that are absent, the user agent will look for the default-src directive and will use this value for it:

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; ...

Note that default-src only applies to fetch directives, so you may need to add a few policies that your page requires.

Also, you will need to specify self for each policy that you define, because firefox will only look to the default-src when a required policy is null.

So if you have a policy like this:

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src http://example.com;">

You will exclude yourself from the script-src policy, but you should be covered by all the other policies, with the exception of the policies that look to script-src as a backup before looking to default-src (eg script-src-elem).

Unfortunately, this also extends to all dependencies that your script has, such as bootstrap or jQuery. each dependency will need to be explicitly referenced in each policy that they require.

If only someone had a package to simplify this process...

Lastly, this answer was an excellent resource for learning about Content-Security-Policy.

Edit

To give you the exact Content-Security-Policy that your page requires, I would need to see the error messages you received. That being said, here is a guess, given the information I have (with line breaks for readability):

<meta http-equiv="Content-Security-Policy" content="
default-src 'self'; 
connect-src 'self' https://api.stripe.com; 
frame-src 'self' https://js.stripe.com https://hooks.stripe.com; 
script-src 'self' https://js.stripe.com 'unsafe-inline'
"  />

You should not add line breaks to the policy in your actual code, instead write it like this:

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; connect-src 'self' https://api.stripe.com; frame-src 'self' https://js.stripe.com https://hooks.stripe.com; script-src 'self' https://js.stripe.com 'unsafe-inline'"/>