Paypal-checkout-components: Paypal v5 sdk checkout button still have problems with -unsafe-inline- unsafe-eval script [csp]

[Deam94]

Description

EDIT

I found data-csp-nonce is now available to add:
https://developer.paypal.com/docs/checkout/reference/customize-sdk/#csp-nonce

But this does not solve unsafe-eval errors.

Im using the latest paypal sdk v5, i got told csp inline-script problems should be resolved, but i still got errors refused to evaluate and execute inline script:

[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-xxx' *.google.com *.paypal.com *.paypalobjects.com *.braintreegateway.com https://www.gstatic.com".
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-xxx' *.google.com *.paypal.com *.paypalobjects.com *.braintreegateway.com https://www.gstatic.com".
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'nonce-xxx' *.paypal.com *.paypalobjects.com *.google.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 execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'nonce-xxx' *.google.com *.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.

Now even a new ressource popped up to bloat my site "tracking.ga.paypal.com".
I added all needed resources to my csp and nonces to my script. The button is working tough csp problems.

Code:

braintree.client.create({
  authorization: 'xxx'
}).then(function (clientInstance) {
  return braintree.paypalCheckout.create({
    client: clientInstance
  });
}).then(function (paypalCheckoutInstance) {
  return paypal.Buttons({
      style: {
        layout:  'horizontal',
        color:   'blue',
        shape:   'rect',
        tagline: 'true'
      },
    createBillingAgreement: function () {
      return paypalCheckoutInstance.createPayment({
        flow: 'vault'
      });
    },

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

    onCancel: function () {
    },

    onError: function (err) {
    }
  }).render('#paypal-button');
}).catch(function (err) {
 console.error('Error!', err);
});

Affected browsers

• [ Version 78.0.3904.87 (Offizieller Build) (64-Bit)] Chrome

[bluepnume]

Hi -- @vishakha94 can you please take a look and make sure the nonce passed in data-csp-nonce is making it into all of the style tags? Thanks!

[sekanitembo]

I'm also running into this issue. Any updates/workarounds?

[phattranky]

Same issue right now. I'm following this link https://developer.paypal.com/docs/checkout/troubleshoot/support/#mobile

I'm implementing in Chrome Extension

[amjedomar]

By following this https://developer.paypal.com/docs/checkout/troubleshoot/support/#content-security-policy-rules

I sent a nonce for both script-src and style-src directives, then I passed it to the PayPal script tag

<script src="https://www.paypal.com/sdk/js?client-id=sb" data-csp-nonce="xxx">

After I do that the javascript errors gone

However the inline-style error still

Refused to apply inline style
because it violates the following Content Security Policy directive:
"style-src 'self' *.paypal.com 'nonce-xxx'".
Either the 'unsafe-inline' keyword, a hash ('sha256-xxxx'),
or a nonce ('nonce-...') is required to enable inline execution.

[amjedomar]

@bluepnume Can any one of contributors looks into this issue please?

[mohdhallal]

+1

[abishekmuthian]

data-csp-nonce seems to be passing the nonce to the JS and not to styles, resulting in

Content Security Policy: The page’s settings blocked the loading of a resource at inline (“style-src”).

Although response headers from paypal does contain nonce for style-src as well,

content-security-policy: default-src 'self' https://*.paypal.com https://*.paypalobjects.com; connect-src 'self' https://*.paypal.com https://*.paypalobjects.com https://*.qualtrics.com; frame-src 'self' https://*.paypal.com https://*.paypalobjects.com https://*.qualtrics.com; script-src 'nonce-gG832wS6UfS0Of+7eF5gd0QJd7kEXlDtwI8/L5E4J7lSaWNJ' 'self' https://*.paypal.com https://*.paypalobjects.com 'unsafe-inline'; style-src 'nonce-gG832wS6UfS0Of+7eF5gd0QJd7kEXlDtwI8/L5E4J7lSaWNJ' 'self' https://*.paypal.com https://*.paypalobjects.com 'unsafe-inline'; object-src 'none'; img-src https: data:; form-action 'self' https://*.paypal.com; base-uri 'self' https://*.paypal.com; block-all-mixed-content;; report-uri https://www.paypal.com/csplog/api/log/csp

I'm trying to understand how this is just a medium-priority issue and has stayed open for over a year? Anyone using a standard security mechanism wouldn't be able to use PayPal SDK @bluepnume @vishakha94?

[github-actions[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[abishekmuthian]

bump, Come on guys is a proper CSP support too much to ask for from a Payment Gateway company?

[mnicpt]

@BriceShatzer I thought this was fixed with your change. Can you take a look at this?

[BriceShatzer]

@mnicpt https://github.com/paypal/paypal-checkout-components/pull/1513 will resolve this once it's merged in. There was back and forth on that PR because the nonce value needs to pass through multiple places and there was some differing thoughts as to where the default value decision should be made. This is mostly done, it just ended up getting lost in the shuffle with some of the other things.

[tdias25]

merge it already, goddamnnnnnnnnnnnnnnnnnnnnn

[scstonick]

How much longer will this patch take? I dont want to use an insecure checkout system...

[BriceShatzer]

If you can show me a reasonable attack vector for the sort of CSS CSP mismatch error that this is producing, I'll work through the weekend to fix it 👍

[abishekmuthian]

If you can show me a reasonable attack vector for the sort of CSS CSP mismatch error that this is producing, I'll work through the weekend to fix it

@BriceShatzer The issue is not about exploiting Paypal SDK, it's about making our services vulnerable to XSS attacks by disabling CSP because Paypal SDK doesn't work with CSP due to this bug and therefore putting our business, customers and our-self at risk.

I cannot believe that the issue needs to be clarified after nearly 1.5 years.

[scstonick]

@BriceShatzer

I'm with him. When I saw "medium-priority" I was kinda shocked.

A solid Content Security Policy is a key part of good security for web applications nowadays. PayPal is supposed to be famous for its security but anybody who uses their checkout integration is forced to disable their CSP completely because the nonce is not properly passed to everything it needs to be even when you pass the nonce to the checkout script exactly the way the documentation says to.

Not to mention the issue has been public for over a year now...

I won't allow my company to run a website without a CSP so I am currently in the process of switching to Stripe unless this issue is fixed impressively fast.

[gregjopa]

Hi Everyone, this is indeed a bug with the PayPal JS SDK. I apologize for the delay. We want merchants to be able to trust our SDK and this bug is preventing that. We are discussing internally to get this prioritized and fixed asap. I'll post an update on this thread on Monday 4/19.

[gregjopa]

Here's an update. The team has prioritized this work for the upcoming sprint. We are going to break up this work up into small PRs and release it over the next couple weeks. We will be adding integration tests to prevent future regressions. Here's the first PR: https://github.com/paypal/paypal-checkout-components/pull/1613

[liberat0r]

bump...

[scstonick]

Was this issue ever fixed? @gregjopa

[gregjopa]

Hi folks, we are still working on fixing this issue and have the overlay fix going out in the next JS SDK release:

• https://github.com/paypal/paypal-sdk-client/pull/71
• https://github.com/paypal/paypal-common-components/pull/23
• https://github.com/paypal/paypal-checkout-components/pull/1645

After the next release, we expect data-csp-nonce to work end-to-end with the smart buttons.

[gregjopa]

We released version 5.0.231 yesterday which fixes the csp errors when using data-csp-nonce with the JS SDK. I'll leave this issue open for a few days. Please let us know if you are still seeing issues.

[katendeglory]

How is this still an issue? We've tried what was shown here https://developer.paypal.com/docs/checkout/troubleshoot/support/#content-security-policy-rules but is still isn't working.

[gregjopa]

@katendeglory what error are you seeing locally? Is it this one?

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'nonce-'"

We have a fix going out this week for fixing an inline style error here: https://github.com/paypal/paypal-checkout-components/pull/1668

[katendeglory]

That's the error I'm getting.

[souldia1]

🔥

[souldia1]

😉

[gregjopa]

The inline style fix is in production and this should be resolved.

I just tested again using this simple express.js server example and it's working as expected (no csp errors): https://gist.github.com/gregjopa/271fee004f570760c61c5bb91ebedb92