Stripe error : Refused to execute inline script because it violates the CSP

Question

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

Answer 1

First of all you have some inline script. This could come from a third party package. Note that inline event handlers (onclick etc) also counts as inline script, and unless you want to get advanced with CSP, the only option is to replace them with event listeners. So first you should try to identify the inline script and where it comes from. There is usually a link in the error message that will show you what the problem is. If the inline code is static, you should be able to successfully add a hash.

You have added your CSP as a meta tag. This CSP has a script-src directive that is different from the one in the error message. This means that you have two policies, and any content will need to pass both. You will need to identify where the other policy is set (you will find it in a response header) and modify it.

Answer 2

I've finally found a way to resolve that. The error was caused by using VueJsDevTools as a Chrome dependency. Because the plugin injects JavaScript code to check the application state, it can raise security problems, specifically with the Content Security Policy. Thanks.