CSP 问题执行内联脚本 Paypal 按钮

Question

我使用 Braintree javascript v3 sdk 并为我的商店使用 paypal 结账按钮。
代码示例：

braintree.client.create({
      authorization: 'sandbox_xxxx'
    }, function(err, clientInstance) {
      if (err) {
        console.log(err);
        return;
      }
braintree.paypalCheckout.create({
            client: clientInstance
          }, function (paypalCheckoutErr, paypalCheckoutInstance) {

            if (paypalCheckoutErr) {
              console.error('Error creating PayPal Checkout:', paypalCheckoutErr);
              return;
            }

            paypal.Button.render({
              env: 'sandbox',
              commit: true,
              buttonStyle: {
                  color: 'blue',
                  shape: 'rect',
                  size: 'medium'
                },      
              payment: function () {
                return paypalCheckoutInstance.createPayment({
                    flow: 'checkout', 
                    amount: '10.00', 
                    currency: 'EUR'
                });
              },

              onAuthorize: function (data, actions) {
                return paypalCheckoutInstance.tokenizePayment(data, function (err, payload) {
                    document.getElementById("paynonce").value = payload.nonce;
                    document.getElementById("paymentform").submit();
                });
              },

              onCancel: function (data) {
                console.log('checkout.js payment cancelled', JSON.stringify(data, 0, 2));
              },

              onError: function (err) {
                console.error('checkout.js error', err);
              }
            }, '#paypal-button').then(function () {

            });

          });
    });

为了保护我的应用程序，我使用我的内容安全策略：

    add_header Content-Security-Policy "default-src 'none'; 
    img-src 'self' *.paypal.com data:;
    manifest-src 'self'; 
    style-src 'self' 'unsafe-inline' *.braintreegateway.com *.braintree-api.com https://www.gstatic.com https://fonts.googleapis.com; 
    script-src 'self' 'nonce-xxxx' *.paypal.com *.paypalobjects.com *.braintreegateway.com https://www.gstatic.com; 
    font-src 'self' https://fonts.gstatic.com; 
    connect-src 'self' *.paypal.com *.paypalobjects.com *.braintreegateway.com *.braintree-api.com https://fonts.googleapis.com https://www.google-analytics.com https://www.gstatic.com https://fonts.gstatic.com; 
    object-src 'none'; 
    base-uri 'self'; 
    form-action 'self'; 
    frame-src *.paypal.com *.braintreegateway.com *.braintree-api.com; 
    frame-ancestors 'none';";

该按钮工作正常，但问题是我仍然收到报告和错误，因为 PayPal 执行内联 Javascript：

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'nonce-xxxx' *.paypal.com *.paypalobjects.com *.braintreegateway.com https://www.gstatic.com". Either the 'unsafe-inline' keyword, a hash ('sha256-xxx='), or a nonce ('nonce-...') is required to enable inline execution.

[Report Only] Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' 'nonce-xxxx' *.paypal.com *.paypalobjects.com *.braintreegateway.com https://www.gstatic.com".

正如你所看到的，我将所有重要的网址列入白名单。我还添加了一个随机数来运行脚本：

<script nonce="xxxx" src="https://www.paypalobjects.com/api/checkout.js" data-version-4 log-level="warn"></script>
<script nonce="xxxx" src="https://js.braintreegateway.com/web/3.55.0/js/paypal-checkout.min.js"></script>

不确定它与以下内容有关：
对于我使用的跨站点 cookiesession.cookie_samesite = Strict
收到此警告：

A cookie associated with a cross-site resource at http://developer.paypal.com/ was set without the `SameSite` attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.
A cookie associated with a cross-site resource at http://www.paypal.com/ was set without the `SameSite` attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.

总共 9 个 paypal 子域。

编辑：我检查了我的 html，发现有多个内联脚本渲染到 paypalbutton html 检查我的附件。

我该如何解决这个问题？

Answer 1

对于 cookie 警告，这些警告与 PayPal 的域相关联，他们有责任更新它们。在当前稳定的 Chrome 中，这些警告纯粹是信息性的，不会影响行为。但是，如果您使用 Canary、Dev 或 Beta 版本，您可能会遇到这些 cookie 被阻止的情况。

更多背景信息请访问：

• https://web.dev/samesite-cookie-recipes
• https://www.chromium.org/updates/same-site

听起来好像这些 PayPal 脚本正在尝试在页面中注入其他脚本。您可能需要考虑'strict-dynamic'允许信任传播到其他资源：

script-src 'nonce-xxxx' 'strict-dynamic';

这将导致白名单或源表达式，例如'self'或'unsafe-inline'，但您也可以将它们包含在不支持的浏览器中strict-dynamic。

您的错误专门与'unsafe-inline'和相关'unsafe-eval'，因此对于较旧的浏览器，您可能还需要考虑这些错误。不过，我会先测试一下，strict-dynamic看看是否满足您的需求。

script-src 'nonce-xxxx' 'strict-dynamic' 'unsafe-inline' 'unsafe-eval' 'self' *.paypal.com *.paypalobjects.com *.braintreegateway.com https://www.gstatic.com; 

我还要验证您在页面中肯定没有任何您错过的内联脚本（无论是来自您自己的代码还是来自 PayPal 以外的其他第三方服务），以防这些是错误的根源。