Search code examples
javascripthtmlstripe-paymentscontent-security-policy

Refused to execute inline script because it violates the following CSP directive


I am trying to integrate Stripe to my website, the problem is that I receive the following error:

js.stripe.com/v3/hcaptcha-invisible-078b5f9fb44d244a9ec072f93a216630.html#debugMode=false&parentOrigin=http%3A%2F%2Flocalhost:3 [Report Only] Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-CBu0w5uiOaPgb2R6Zgf7E0+STJHF4lcPIdhZzQXE6yk='), or a nonce ('nonce-...') is required to enable inline execution.

I tried to solve it using the Stripe directives in this way:

<meta http-equiv="Content-Security-Policy" content="script-src 'self' js.stripe.com code.jquery.com cdn.jsdelivr.net maps.googleapis.com 'unsafe-inline';">

But because the location of the file that is given the error is on the Stripe server, I think that those rules of the are not applied to that file.

I have made other integrations of give the same approach error to make sure, and I have solved it by putting the directives in the and it works, but I have not been able to solve the error described above.

If you want to see the same error, you just have to go to this Stripe link and inspect the browser in the console.

Link


Solution

  • For all the new ones who came here after this answer, you can try all the solutions that other people have already posted here if you are getting a CSP error from a file that you saved locally and can fully manage and edit. If the file that is giving you the error is hosted in a directory in the cloud to which you do not have access to make edits, as was my case with the Stripe API, then what you have left is to request help from the support that manages said file which returns a CSP error.

    Thanks to @Mr. Cockadookie, @Henry Sneed, @Halvor Sakshaug, @Yuting, and @Michael Scott Asato Cuthbert, for showing interest in this.