Search code examples
c#blazor-webassemblywebassemblyadyen

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

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

Solution

  • 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 flow-chart of dropin

    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.