How to Secure Communication Between Front-ends That Reside in Different Tenants?

Question

I am currently working on a solution for a client which has the following requirements:

• IDP resides in the client's tenant. User authentication will therefore happen in their side
• The main web application (contoso.com) will contain a micro-frontend (app1.contoso.com) which has an iframe embedded in it. This iframe will point to an Angular application that resides inside the provider's network.
• A JWT will be sent by the micro-frontend to the Angular application using the window.postMessage() method. This will then be used to validate if an authenticated user is using the application and to get other metadata such as language and customer Id.

Since there is no user authentication happening within the Angular application, I am thinking of hosting it inside an ASE (application service environment). Managing the communication between the micro-frontend and the Angular application will be done using Application Gateway.

Can someone advise me on whether this is the correct approach infrastructure-wise or are there things that I have forgotten to consider? Appreciate the help!

Answer 1

I recommend you look into the private endpoints option that you can explore. With this, you could establish a secure channel between multiple tenants. Refer to the below diagram

There is reference documentation available on this topic in Microsoft Learn.

https://learn.microsoft.com/en-us/azure/cloud-adoption-framework/ready/azure-best-practices/limit-cross-tenant-private-endpoint-connections

Hope this helps