Approach for secure API keys on Web Assembly WASM SPA's? Client or Server?

Question

I have a functioning WASM (Blazor) SPA and I want to add payments to it. Obviously this requires the use of secure API keys and so I don't think they should be stored in the App itself..

I am debating with myself and have a couple of choices. I can:

a. Run the payment process on a (say) Razor Page on the server and somehow, get the result back to the client. or

b. run the payment (JS drop-in) on the client, but go and get the API keys from the server as they are being used and delete them afterwards.

I am favouring b. but wondering if that is going to open up some massive security hole I am not aware of?

If I use a. I can get to a razor page on the server ok. But I think that will lose the application flow and not be a great user experience.

Which approach should I use? Thanks in advance

Answer 1

Summary: The set of API keys should never be exposed on the client side. It should be part of your server that handles the requests from the client.

I am debating with myself and have a couple of choices. I can:

a. Run the payment process on a (say) Razor Page on the server and somehow, get the result back to the client. or

Your client should communicate with your backend that holds your API keys. You can find an example of the sessions-endpoint in C# on github/adyen-example.

In the WebhookController, you can also find the example on how to receive notifications on your backend

b. run the payment (JS drop-in) on the client, but go and get the API keys from the server as they are being used and delete them afterwards. This is a no-go. You should never expose your API keys here.

Here's a flow chart that gives a nice overview of the flow

Taken from: https://docs.adyen.com/online-payments/web-drop-in#how-it-works

The 'Merchant Client' is where you should have the Web-dropin. You can serve your content from your Blazor server to the client here.

The 'Merchant Server' is where you handle your API keys safely as well as where you get your webhooks from the Adyen server.

Answer 2

A Blazor SPA presents all the same security concerns as any other SPA or a desktop app. You always have to assume that the client app can and will be compromised. Like they told Indiana Jones, "trust no one!"

If you fetch the key from the server, it will be visible through the browser debugger when inspecting the API calls. The only way to keep it safe is to keep it server side. So you basically need to make another API layer just for your SPA and have that be a go-between to your real APIs. Otherwise if your SPA has access to it, so does the world. In other words, go with (a) but it doesn't have to be a Razor page. It can just be a private API dedicated to your SPA.