Stripe Connect violating Content Security Policy Directory

Need help APIs
1

Hi All,

I’m in the process of connecting with Stripe Connect, it seems that my Chrome,Firefox and Edge browser are blocking the session redirect due to Content Security Policy directive: ‘connect-src’ ‘self’ https://api.stripe.com

Anyone encountered the same isue? Looked already on the internet for a solution but can’t seem to find any.

function(properties, context) {

var stripe = Stripe(properties.publishable_key);


var checkoutButton = document.getElementById('checkout-button');

checkoutButton.addEventListener('click', function() {
  stripe.redirectToCheckout({
    // Make the id field from the Checkout Session creation API response
    // available to this file, so you can provide it as argument here
    // instead of the {{CHECKOUT_SESSION_ID}} placeholder.
    sessionId: properties.session_id
  }).then(function (result) {
    // If `redirectToCheckout` fails due to a browser or network
    // error, display the localized error message to your customer
    // using `result.error.message`.
  });
});

stripeerror
stripeerror893×158 17.6 KB

2

Hi @nocodeventure ,

Dumb question I’m sure, but do you have the stripe.js script tag that’s required?

I don’t think I’ve seen this error before.

3

Redirect to connect setup works if I click the button twice.

<script src="https://js.stripe.com/v3/"></script>

4

Exactly the same issue when I use it as an element on the page.

5

stripeerror
stripeerror893×158 17.6 KB

6

@lantzgould This issue doesn’t seem to be affecting me when I move the script inside an element on the page itself. However, I have to press the checkout session button twice and then it will give me an alert if I want to leave the page and then redirects to checkout session.

Any idea why I need to press the button twice?

7

Yeah, I’m using the script on element on the page and then simply using the toolbox plugin to execute the javascript:

image
image1350×882 67.8 KB

Will do some research. That’s definitely an interesting one.

Test App:

8

Awesome man, I really appreciate it. It’s working now. I was on it for the past two days trying to solve it myself.

How can I buy you coffee?

9

Haha no problem. I had the same thoughts a while back. After frustration, I figured I’d try the toolbox method and it’s worked since. Glad you got this working though.

Re: coffee - Not necessary, but sure appreciate you! :slight_smile:

1 Like
10

Done, thanks a lot @lantzgould

1 Like
11

Refused to connect https://q.stripe.com/?event=... means that you need to add https://q.stripe.com host-source into connect-src directive, because stripe.js script performs XMLHttpRequest to this source

On the printscreen showed there is a second error: Unrecognized Content-Security-Policy directive https://hooks.stripe.com.
This means you have an error in the CSP - , or ; is used before the https://hooks.stripe.com host-source.

If you use rules from this Stripe CSP example, it contains a fatal error - comma is contained after directive names.