3

I have a shell application which is the container application that performs all the API communication. Also, I do have multiple Micro application which just broadcast the API request signal to shell application.

Now, keeping the security in mind, as a shell application how it can ensure that API request signal is coming from the trusted micro app which I own.

To be very precise, My ask is, is there a way to let shell application know that the signal is coming from the micro app that it owns and not from any untrusted(like hacking, XSS) source

surendher
  • 1,374
  • 3
  • 26
  • 52
  • your question is not precise enough. What do you mean by `shell` application? Is that some app that plays a role of backend for your JS apps? If so, then when you go to production you would rather deploy them separately, by using HTTPS and maybe JWT you would reach a sufficient level of security. If you're going to use them locally, then why bother with security? – Yuriy Kravets Sep 24 '20 at 15:35
  • @YuriyKravets Shell application - Angular application that works as a container to present the micro application(this is also angular) – surendher Sep 28 '20 at 02:38
  • 1
    security strictly on a frontend side is a fake security, there is no way in securing what is going on in the browser. I assume that you run your app in a runtime integration manner, then you would make sure that you download a trusted micro app. – Yuriy Kravets Sep 28 '20 at 08:38
  • @surendher it's not have to be an angular app, basically any app can be shell – Sh. Pavel Apr 22 '21 at 17:07

3 Answers3

3

As per the Micro-Frontend architecture each Micro Frontend should make call to it's own API (micro service). However, your Shell app can provide some common/global library which can help the Micro Frontends make the AJAX call. But the onus of making the call must remain with the individual micro frontend.

Pratik Bhattacharya
  • 3,596
  • 2
  • 32
  • 60
2

From your question it is unclear if your apps are running in iframes, or are being loaded directly into your page.

In the case of iFrames your using postMessage and you can check the origin on received message via event.origin. Compare this with a list of allowed domains.

If your micro apps are directly on your page then you just control what is allowed to load into them.

David Bradshaw
  • 11,859
  • 3
  • 41
  • 70
1

So, in most microfrontends, each microapp does its own API calls to the corresponding microservice on the backend, and the shell app is ignorant of it. The most the shell app would do relative to this is passing some app config to all microapps which has config like the hostname of the various backends, and, an auth token if all the backends are using the same auth.

But to ensure the shell app doesn't have, say, an advertisement with malicious code trying to pose as another microapp, well..

  1. how are the microapps talking to the shell? Is there a common custom event? The name of the customEvent would have to be known to the intruder, but that's only security-by-obscurity, which isn't real.

  2. other methods like postMessage are between window objects, which I don't think help your case.

You might be able to re-use the authToken that the shell and microapps both know, since it was communicated at startup. But if you have microapps that come and go that won't work either.

Ron Newcomb
  • 2,886
  • 21
  • 24