loadStripe from @stripe/stripe-js causes a CSP error in FireFox with NextJS

Question

I have an app written in NextJS. I need to run the following code to connect to stripe for transactions, but it throws several warnings in FireFox when I add it anywhere. The code still works, but I'd like to fix this. I tried adding meta tags in _docuemnt.tsx but they made it worse. Does anyone know how to properly implement a CSP to allow this to work without warnings?

This also causes cookie warnings.

standard loadStripe implementation

import { loadStripe } from "@stripe/stripe-js";
const PurchaseCoinsDropdownModal = ({ ...props }: Props) => {
    // calling this throws the warnings
    const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUB_KEY as string);

    return (
                            <Elements
                                options={{ clientSecret, appearance: { theme: document.body.classList[0] === "dark" ? "night" : "stripe" } }}
                                stripe={stripePromise}
                            >
                                <CheckoutForm
                                    total={usdFix(selectedCoin.price)}
                                    closeHandler={props.closeHandler}
                                />
                            </Elements>
    );
};

Warnings from this:

Content-Security-Policy: The page’s settings blocked the loading of a resource at inline (“script-src”). sandbox eval code:544:346
Content-Security-Policy: The page’s settings observed the loading of a resource at inline (“script-src”). A CSP report is being sent. sandbox eval code:544:346
Partitioned cookie or storage access was provided to “https://js.stripe.com/v3/m-outer-3437aaddcdf6922d623e172c2d6f9278.html#url=http%3A%2F%2Flocalhost%3A3000%2F&title=Explore%20-%20Factiii&referrer=&muid=52c1d508-2a86-4261-9596-931ef99d8ff21fd5ef&sid=f19e156f-257a-4e0b-accf-26ae0b7f8519fed5f9&version=6&preview=false” because it is loaded in the third-party context and dynamic state partitioning is enabled.

Content-Security-Policy: The page’s settings blocked the loading of a resource at inline (“script-src”). sandbox eval code:544:346
Content-Security-Policy: The page’s settings observed the loading of a resource at inline (“script-src”). A CSP report is being sent. sandbox eval code:544:346
Partitioned cookie or storage access was provided to “https://m.stripe.network/inner.html#url=http%3A%2F%2Flocalhost%3A3000%2F&title=Explore%20-%20Factiii&referrer=&muid=52c1d508-2a86-4261-9596-931ef99d8ff21fd5ef&sid=f19e156f-257a-4e0b-accf-26ae0b7f8519fed5f9&version=6&preview=false” because it is loaded in the third-party context and dynamic state partitioning is enabled.

A resource is blocked by OpaqueResponseBlocking, please check browser console for details. 4 csp-report
Content-Security-Policy: The page’s settings blocked the loading of a resource at inline (“script-src”).

Answer 1

You should visit this page and use the CSP directives for Stripe.js in your webpage.