CODEWITHSUNDEEP
javascripthtmlstripe-paymentscontent-security-policy
Alber Baezmarte
Alber Baezmarte

Reputation: 71

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

Upvotes: 6

Views: 15610

Answers (4)

Alber Baezmarte
Alber Baezmarte

Reputation: 71

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.

Upvotes: 1

henry sneed
henry sneed

Reputation: 526

Summary

To enable the API connection between your application and Stripe you can change the Content Security Policy by modifying your application's HTTP headers. To do this for a next.js application, I did the following within next.config.js. If you're using a different Javascript framework you will likely need to set the same headers using whatever configuration regime your framework uses. Also, when in a dev environment I am using the unsafe-eval header.

Example Config

const nextConfig = {
  reactStrictMode: true,
  async headers() {
    return [
      {
        source: '/:path*',
        headers: [
          {
            key: 'Content-Security-Policy',
            value: process.env.NODE_ENV === 'production'
              ? "script-src 'self' https://js.stripe.com; frame-src 'self' https://js.stripe.com; connect-src 'self' https://api.stripe.com"
              : "script-src 'self' 'unsafe-eval' https://js.stripe.com; frame-src 'self' https://js.stripe.com; connect-src 'self' https://api.stripe.com",
          },
        ],
      },
    ]
  },
}

module.exports = nextConfig;

Documentation

Next.js Headers: https://nextjs.org/docs/pages/api-reference/next-config-js/headers

Stripe CSP: https://stripe.com/docs/security/guide#content-security-policy

Upvotes: 3

Mr. Cockadookie
Mr. Cockadookie

Reputation: 25

I was facing the same issue and very concerned. However, the Report Only is designed for testing policies and is supposed to simulate a policy, so I don't believe it's actually having any affect on the inline script itself.

Upvotes: 1

Halvor Sakshaug
Halvor Sakshaug

Reputation: 3475

Somewhere the "Content-Security-Policy-Report-Only" response header is being set. As it is "Report-Only" (you can see this in the error message) nothing is actually blocked due to this policy, this is why it still works. But adding another policy in a meta tag doesn't change anything because content needs to pass all CSPs present. You will need to identify how/where the report only policy is being set and modify it before enforcing it by changing it to just "Content-Security-Policy". You could add 'unsafe-inline', but it is of course unsafe. You could add the suggested hash value 'sha256-CBu...', which will work if it is outputting static code and as long as the code doesn't change.

Upvotes: 5

Related Questions