#Enis

1 messages · Page 1 of 1 (latest)

short echoBOT
runic tangle
#

Could you share how your csp code look like?

lethal python
#

I will simplify it . If you want all code, I can share it all

// stripe MODAL
const [isStripeModal, setIsStripeModal] = useState(false);
// STRIPE
const [stripePromise, setStripePromise] = useState(null);
const [stripeClientSecret, setStripeClientSecret] = useState("");

useEffect(() => {
const getKey = async () => {
const { publisableKey } = await getPublisableKey();
if (!publisableKey) return null;
setStripePromise(loadStripe(publisableKey));
return publisableKey;
};
getKey();
}, []);

useEffect(() => {
// fetch config | publisable key
const getPaymentIntent = async () => {
const { clientSecret } = await paymentIntent();
if (!clientSecret) return null;
setStripeClientSecret(clientSecret);
return clientSecret;
};
getPaymentIntent();
}, []);

return (
<div>
... more staf

  <Modal isModalOpen={isStripeModal} customeStyles={styleModal}>
    {stripePromise && stripeClientSecret && (
      <Elements
        stripe={stripePromise}
        options={{ clientSecret: stripeClientSecret }}
      >
        <CheckOutForm />
      </Elements>
    )}
  </Modal>

</div>
)

#

sorry I think misunderstood . I don't use any rule right now. Because non of them worked

#

I tried each one by one bellow:
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self' * .stripe.com;
style-src 'self' 'unsafe-inline';
script-src * 'self' 'unsafe-inline' 'unsafe-eval';
img-src 'self' https://.stripe.com"
/>

<meta
  http-equiv="Content-Security-Policy"
  content="
     default-src *; 
     style-src 'self'  'unsafe-inline'; 
     img-src 'self' https://*.stripe.com; 
     script-src * 'self' *.stripe.com 'unsafe-inline'; 
     connect-src  * 'self' *.stripe.com  ; 
     frame-src * 'self' *.stripe.com ; "
/>
<meta
  http-equiv="Content-Security-Policy"
  content="require-trusted-types-for 'script'; script-src 'self' https://js.stripe.com https://maps.googleapis.com 'unsafe-inline';
"
/>
<meta
  http-equiv="Content-Security-Policy"
  content="require-trusted-types-for 'script'; script-src 'self' https://js.stripe.com 'unsafe-inline';
"
/>
<meta
  http-equiv="Content-Security-Policy"
  content="script-src 'self' *stripe.com/;"
/>
<meta
  http-equiv="Content-Security-Policy"
  content="script-src 'self' *.stripe.com/v3 https: 'unsafe-inline' ;"
/>
<meta
  http-equiv="Content-Security-Policy"
  content="script-src 'self' *.stripe.com/v3 'unsafe-inline' ;"
/>

<meta
  http-equiv="Content-Security-Policy"
  content=" script-src 'self' stripe.com"
/>
autumn lava
#

are you able to provide a test URL for me to access and take a look?

#

it could be the security on your webserver as pointed out by one of the answers on a similar SO question : https://stackoverflow.com/questions/37298608/content-security-policy-the-pages-settings-blocked-the-loading-of-a-resource

Stack Overflow
Content Security Policy: The page's settings blocked the loading of...

I am using CAPTCHA on page load, but it is blocking because of some security reason.
I am facing this problem:

Content Security Policy: The page's settings blocked the loading
of a resourc...
lethal python
#

change lang from top right corner
once login go dashboard > add balance > pay with stripe

autumn lava
#

it just hangs on this page forever for me

image.png
lethal python
#

yes content security is blocking the modal

#

it doesn't load the checkout component

#

that the code inside that modal that doesn't load

import React, { useState, useEffect } from "react";

// STRIPE
// import { loadStripe } from "@stripe/stripe-js";
import { useStripe, useElements } from "@stripe/react-stripe-js";
import { PaymentElement } from "@stripe/react-stripe-js";

function CheckOutForm() {
// Stripe
const stripe = useStripe();
const elements = useElements();

const [message, setMessage] = useState(null);
const [isProcessing, setIsProcessing] = useState(false);

const handleSubmit = async (e) => {
e.preventDefault();
};

return (
<form id="payment-form" onSubmit={handleSubmit}>
<button disabled={isProcessing} id="submit">
<PaymentElement />
<span>{isProcessing ? "Processing..." : "Pay now"}</span>
</button>
</form>
);
}

export default CheckOutForm;

#

I can do screen share if you like to see

autumn lava
#

how do you know that content security is blocking the modal?

#

from what i understand, you're seeing the CSP errors, only when you define a CSP policy. If you don't, there's no such error

lethal python
#

when ever I import {loadStripe} from "@stripe/stripe-js/ then my checkout page does'nt load also getting CSP error. if I comment out the import {loadSctipe} everything works

autumn lava
#

so you're saying that even without defining any CSP policy, you're seeing those CSP errors?

lethal python
#

yes, correct

autumn lava
#

can you give us the exact URL you're using?

#

we aren't able to see the same in the site url you provided

lethal python
#

it doesn't show you on chrome

#

chrome doesnt tell you the CSP but still doesn't work on chrome. It show on firefox

autumn lava
#

nope, we don't see it either on firefox

lethal python
#

hmm

autumn lava
#

i'm sorry, but if we can't replicate the issue, there's very little that we can do to help. maybe you may want to try downloading one of our demos / sample code and try running it to see if that works. If it does, then it may be something in your current code. If it doesn't it's entirely possible that it might be something in your server that's causing the issue and that's not something that we have expertise in i'm afraid

lethal python
#

thank you very much for your help. I will figure it out

#

I just solved it. You helped me to focus somewhere else. So that was a typo issue 😄
Thats why I should use TS not JS

autumn lava
#

aaah, whew, glad to know that you managed to figure things out