来自 @stripe/stripe-js 的 loadStripe 会导致 FireFox 中使用 NextJS 出现 CSP 错误

Question

我有一个用 NextJS 编写的应用程序。我需要运行以下代码来连接到条带进行事务，但当我将其添加到任何位置时，它会在 FireFox 中引发多个警告。该代码仍然有效，但我想解决这个问题。我尝试在 _docuemnt.tsx 中添加元标记，但它们使情况变得更糟。有谁知道如何正确实施 CSP 以使其在没有警告的情况下工作？

这也会导致 cookie 警告。

标准 loadStripe 实现

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>
    );
};

由此发出的警告：

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

您应该访问此页面并在您的网页中使用 Stripe.js 的 CSP 指令。