Search code examples
djangofirefoxstripe-paymentscontent-security-policyinline-scripting

Django stripe js blocking of inline script


I'm trying to implement stripe payment system in Django. For adding card payments, I followed the guide in this link. After adding HTML markup in Django template and CSS and JS code as separate static files, I got the following console error in Firefox:

Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”)

What I understand from above error message is that, <script src="https://js.stripe.com/v3/"></script> JS file contains links to other JS files and Firefox blocks such connections. It should be noted that, at this stage test credit card payment is working as expected and amount debited by client is added to my stripe account's test balance. To address this blocking problem, I followed the instructions in this link. As such, I added following meta tag to my Django template:

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

After adding above Content-Security-Policy directives, Firefox console no longer shows aforementioned blocking errors, but this time my static JS files are blocked. I have modified directives as below for allowing my JS files (added 'self' to 'script-src' directive):

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

And this time before mentioned inline-script block error reappeared in Firefox console. :)

Can you help me for this issue? Is my understanding correct regarding the cause of Firefox console error? Why implemented solution is not working?

EDIT

Can it be simply Firefox bug, considering that payment is working as expected and Chromium browser does not log any error on developer tools?


Solution

  • 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.