How to authenticate external web components with API calls

Question

I've been tasked with creating a suite of web components to share with customers to consume into their websites. I've come across the idea of Angular Elements, and this looks interesting, but I'm not sure if this is the best solution for our needs, or if there is something better out there.

The main concern I have is around security. The component would have to be authenticated and it would use this authentication to connect with our API to retrieve the data specifically for their site.

Something a little like this: (https://i.sstatic.net/B8TIe.png)

So we give the client the bundled JS for the component and they use a custom tag to display it. That would then pass the authkey to our external api at https://api.ourserver.com, the authentication would be done, a clientid found, and then the client data would be returned to the component for display.

I just can't find any information on the most important part: the most secure and client-friendly method for authentication in this situation. I'm considering vague notions of having a check between the "someauthkey" and the domain on the backend... but any other ideas are most welcome.

Questions are being raised on the robustness of security when using web components which call our authenticated API.

Answer 1

This type of solution is tricky these days, due to the behaviour of API credentials in the browser:

• Secure cookies in the browser will be dropped when calling out from the customer web origin to the domain of your third party APIs. This is due to restrictions to protect user privacy, as discussed in RFC6265bis.

• Using access tokens in the browser is against OAuth best practices these days, and also not recommended.

• API keys in the browser means close to zero security.

BEST SECURITY OPTION

The preferred option for a secure and reliable solution is for your JavaScript, running at https://www.customer.com to route to your APIs via a backend in the same domain as this origin, once users are authenticated on that site.

The backend can then attach a credential before forwarding the request. This can be an API key, though a stronger credential such as a client certificate would be preferred.

A reverse proxy such as NGINX can do this type of thing quite easily. One good usability point is that it prevents users from the customer having to log in twice.

SUMMARY

There are security and deployment prerequisites required to get web integrations working these days. This means some work is needed from customers as well as your company. Therefore a proposed solution should be discussed with customers during the design phase, to see if it is acceptable.