“Does violating CSP cause a Stripe error in PHP?”

i’ve got a problem witch an application build with VueJS3 front side and Symfony on the backend.I am using to proceed paiement and others transactions. When the client makes an order, an AJAX http request goes to my api, and ma STRIPE custom class build the checkout session with the whole order informations like this :

public function startPayment($cartData, $orderId, Request $request, $userId, $totalQuantity){

        // calcul de la réduction
        $discount = 0;
        if($totalQuantity >= 6){
            $discount = 0.2;
        } else if($totalQuantity >= 3){
            $discount = 0.1;
        }


        $metadata = [
            'user_id' => $userId,
        ];

            $checkout_session = Session::create([
            'line_items' => [
                    array_map( fn(array $product) => [
                        'quantity' => $product['quantity'],
                        'price_data' => [
                            'currency' => 'EUR', 
                            'product_data' => [
                                'name' => 'photo'
                            ],
                            'unit_amount' => $product['price'] * 100 * (1 - $discount),
                            // 'description' => 'Réduction de ' . ($discount * 100) . '% appliquée pour un total de ' . ($product['price'] * $discount * $product['quantity']) . ' EUR',
                        ] 
                    ], $cartData )
                ],
                'payment_intent_data' => [
                    'description' => 'Description de votre commande',
                  ],
            'mode' => 'payment',
            'success_url' => "http://localhost:5173/success/" .  $orderId ,
            'cancel_url' => "http://localhost:5173/failure",
            // 'metadata' => $metadata,
        ]);

        return $checkout_session;
    }

Ok then I catch the session ID which will include in the payload on my http response to the front-end. Finally, I redirect the client to the payment page.

    if (cart.length > 0) {

      orderService.makeOrder(formdata)
        .then((res) => {
          cartStore.trashCart();
          // window.location.replace(res.data);
          // res.redirect(res.data)
          // window.open(res.data, '_blank');
          console.log(res.data);
         
          stripe.redirectToCheckout({
            sessionId: res.data
          });
        }
        )
        .catch((err) => {
          // console.log(err.response.data);
          // let error = err.response.data;
          // let errorStatus = error.status;
          console.log(err);
          if (errorStatus == 404) {
            alert(error.message);
            router.push({ 'name': 'user-dashboard' })
          }
        }
        );
    } else {
      alert('Votre panier est vide !');
    }

As you can see i’ve made a few tests with many redirections methods like window.location.replace, window.open….

By the way, whether by retrieving the session id or the url, I always have the same follwing error message that appears relating to the CSP policy :

VM15:1 Refused to execute inline script because it violates the following Content Security Policy directive: "script-src ‘self’ https://js.stripe.com ‘sha256-qfab1QOuLBUBGJ+fPSXEniBt3ROj7X2Q4d7JLWBSVcU=’ ‘sha256-6DwLXTwuIAiFiQ/xN6K2pNzcz78YimIo/S8e2fsEfIw=’ ‘sha256-qzwF6Hw52bvaC7XI8bXNymM/G1VA5sKAddevTw8+gj8=’". Either the ‘unsafe-inline’ keyword, a hash (‘sha256-FDyPg8CqqIpPAfGVKx1YeKduyLs0ghNYWII21wL+7HM=’), or a nonce (‘nonce-…’) is required to enable inline execution.

I’ve tried to insert a meta element in the entry point of my application ( index.html ) like this :
meta http-equiv="Content-Security-Policy" content="script-src ‘self’ https://js.stripe.com/v3/ https://cdnjs.cloudflare.com ‘unsafe-inline’">

and i admit that i don’t really inderstand the "hash" or " nonce" specialy with VueJS integration.

Strangely, the payment works in dev… and don’t have any " script-inline" in my script which could occurs this kind of problem