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

Question

我正在使用braintree javascript v3 sdk，并为我的商店使用贝宝结帐按钮。代码示例：

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';";

该按钮工作正常，但问题是我仍然收到报告和错误，因为贝宝执行了内联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>

不确定是否与以下内容有关：对于跨站点Cookie，我使用session.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'以允许信任传播到其他资源：

'strict-dynamic'

这将导致白名单或源表达式，例如script-src 'nonce-xxxx' 'strict-dynamic'; 或'self'，但是对于不支持'unsafe-inline'的浏览器，您也可以包括它们。

您的错误专门关于strict-dynamic和'unsafe-inline'，因此对于较旧的浏览器，您可能还需要考虑这些错误。但是，我将首先使用'unsafe-eval'进行测试，看看是否满足您的需求。

strict-dynamic

我还将验证您绝对不会在页面中丢失任何内联脚本（无论是您自己的代码还是其他非PayPal的第三方服务），以防这些是错误的根源。