PayPal JavaScript SDK – understand security problems on the client-side

I´ve recently implemented the PayPal JavaScript SDK in my Angular 11 project (implementation reference). It seems to work flawlessly, however, I started to think that it might be possible to modify the pricing amount on the client-side. Additionally, there seems to be no further validation on PayPal´s side if the payed amount actually matches the requested amount.

        paypal.Buttons({
          style: {
            layout: 'vertical',
            color: 'gold',
            shape: 'pill',
            label: 'paypal'
          },
          createOrder: (data, actions) => {
            console.log(data);
            return actions.order.create({
              purchase_units: [
                {
                  reference_id: this.id,
                  description: this.description,
                  amount: {
                    currency_code: 'EUR',
                    value: this.pricing
                  }
                }
              ]
            });
          },
          onApprove: (data, actions) => {
            console.log(data);
            return actions.order.capture();
          },
          onError: error => {
            console.error(error);
          },
          onCancel: error => {
            console.error(error);
          }
        }).render(this.paypalElement.nativeElement);

Therefore my research for client-side security, especially for the PayPal SDK began. In the process, I found several interesting posts on stackoverflow like:

1. PayPal express checkout security with silent ajax call
2. How can I secure transactions made with client-side PayPal Smart Checkout buttons?
3. Secure PayPal Checkout Client-side?
4. PayPal Checkout: Is it safe to receive a payment with only client-side code?

The overall consensus was pretty much: “You´re right, it´s not secure, you need to do this on the backend.”

However, while I realize now that this doesn´t seem to be a secure long-term solution, none of the answers in the posts above provided some additional information on how attackers would practically modify the client-side code. I´m fairly inexperienced when it comes to modifying client-side JavaScript code, so I would really appreciate to understand the process and learn to what degree I have to secure my application.

Answer

how attackers would practically modify the client-side code. I´m fairly inexperienced when it comes to modifying client-side JavaScript code, so I would really appreciate to understand the process and learn to what degree I have to secure my application.

A debugger checkpoint and modifying variables from the browser Developer Tools debugger or console is one obvious way, for someone who knows their way around the normal tools that ship with all major browsers.

If you don’t, the most straightforward way to modify client-side JS is to download the JS file or HTML-with-JS document, make whatever changes you want, then serve up your replacement with an extension like Resource Override and go through the flow again.

On the opposite end of practicality, the client could be a custom browser executable written from scratch in whatever language, with its own or a modified JavaScript interpreter. Or simply an open source browser like Firefox or Chromium, modified and then compiled.

Essentially the client has the potential to send and receive and execute whatever commands it (and hence, an attacker) wants. It’s completely non-secure, and your server must validate everything you want validated. Not some things, every thing.

So, always assume the client _could_ be a 100% malicious actor, and trust absolutely nothing just because it supposedly came from “your own” client-side code.