Tips for establishing secure communication between a shell app and micro application (frontend) using pubsub technology

I have developed a shell application that serves as the main container for handling all API communications. Additionally, I have created several Micro applications that simply send API request signals to the shell application.

When it comes to security, my concern is how the shell application can verify that the API request signal is originating from a trusted micro app that belongs to me.

In simpler terms, I want to know if there is a method for the shell application to recognize that the signal is indeed being sent by one of its owned micro apps and not from an untrusted source such as hackers or XSS attacks.

Answer №1

In the realm of Micro-Frontend architecture, it is crucial for each individual Micro Frontend to independently reach out to its designated API (micro service). Nevertheless, the Shell application can offer a set of shared libraries that serve as a centralized resource for all Micro Frontends when making AJAX requests. It is important, however, that the responsibility of initiating these calls lies primarily with the respective micro frontend.

Answer №2

It's important to clarify whether your applications are running within iframes or being loaded directly onto your page from the question you've asked.

If your apps are in iframes, use postMessage and verify the origin of the received message with event.origin. Make sure it matches a list of approved domains.

On the other hand, if your micro apps are directly integrated into your page, you have full control over what content is permitted to load within them.

Answer №3

Typically, in a microfrontend architecture, each individual microapp makes its own API calls to the corresponding microservice on the backend without involving the shell app. The shell app may provide some configuration data to all microapps, such as the hostnames of different backends and a shared auth token if needed.

However, to prevent malicious code disguised as another microapp from being included in the shell app...

How do the microapps communicate with the shell? Is there a common custom event that they use? It's worth noting that relying solely on the obscurity of the event name is not a robust security measure.
Other techniques like using postMessage between window objects may not be sufficient for securing communication between the shell and microapps.

One potential solution could be leveraging the authToken shared between the shell and microapps during startup. However, this approach may not be feasible if microapps are constantly being added or removed.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize Paper.js PointText to Obtain Baseline Coordinates instead of Starting from the Bottom Left Corner

Check out this Paper.js sketch. Click on "TEXT" to view the bounding box. It's worth noting that I configured the leading property to match the font size, though by default it is typically 1.2 times the font size as stated in the documentation. Why d ...

javascript spacing paperjs

Guide to importing an npm package into a client-side file

Having some trouble importing the js-search npm package into my client-side .js file. The documentation suggests using import * as JsSearch from 'js-search';, but I keep getting a Uncaught TypeError: Failed to resolve module specifier "js-se ...

javascript npm npm-package

Retrieve the Span class value contained within a Select Option

I realize it may appear repetitive, but it is not. This is the appearance of my select: <select id="avpMy4Y7E4cH_-iIRmmAK6-2GsEOu6Sjr-0-0"> <option value="1Ltr [ <span class=money>Rs.1,495.00</span> ]">...< ...

javascript html jquery

Ways to attain a similar format - input map

After pressing the save button, I am aiming to achieve the following effect: "timeTable":{ "0": [{"from":"08:00","to":"12:00"}, {"from":"14:00","to":"18:20&q ...

angular typescript

Enhancing static SVG with dynamic tooltips using D3.js

Our challenge involves adding tooltips dynamically to a static SVG image when a hover event occurs on an object within the SVG using d3.js in the context of an AngularJS application. The SVG image we are working with is a floorplan, which is quite intrica ...

javascript angularjs d3.js svg

What is the best way to transform a JS const into TSX within a Next.js application?

Exploring the code in a captivating project on GitHub has been quite an adventure. The project, located at https://github.com/MaximeHeckel/linear-vaporwave-react-three-fiber, showcases a 3D next.js application that enables 3D rendering and animation of mes ...

javascript reactjs typescript next.js three.js

Executing Angular CLI on a Windows 7 system within an office network environment

I am employed by a large corporation that has its own infrastructure including network and firewall. I am eager to learn Angular, but unfortunately, I am unable to use Angular CLI on my Windows 7 laptop provided by the company. When I attempted to initiate ...

windows angular angular-cli

What is the best method for sending multiple parameters in a POST request using Angular 5?

In my current project, I am using Angular 5 for the front end and Spring Boot for the back end. I need to send a POST request to the REST API with two parameters: idPerson and idProject. The goal is to link the selected Person with the specified Project. H ...

angular httpclient angular5 angular2-services

AngularJS url update event

In order to gather statistical data, I am interested in tracking how many times the URL has been changed. To achieve this, I have set up a counter that will increment each time the URL is modified. Does anyone have a solution for this? ...

javascript angularjs url location

Using AngularJs to implement a $watch feature that enables two-way binding

I am in the process of designing a webpage that includes multiple range sliders that interact with each other based on their settings. Currently, I have a watch function set up that allows this interaction to occur one way. However, I am interested in havi ...

javascript angularjs

Utilizing a custom filter for object manipulation within Vuetify's v-autocomplete

When using vuetify v-autocomplete with an object where the object consists of Key-Value pairs, the search functionality is based on the item-text. In my example, I am displaying the object as {1200-Chloride Systems}. Is it possible to make the search funct ...

javascript html vue.js vuetify.js

Can jQuery be used in Chrome Extensions?

I am facing an issue with my extension. Do I need to declare permissions? The "code:" line is not working in the background file. Here is the code from the Background File: chrome.browserAction.onClicked.addListener(function(tab) { // No tabs or host p ...

javascript jquery google-chrome

How can a list be returned from an async callback in NodeJS?

Essentially, I am performing a database query to retrieve all posts with a specific id, then adding them to a list before returning. However, the list is being returned before the callback function has finished executing. How can I ensure that the list is ...

javascript node.js mongodb asynchronous express

Modifying the DOM within a getJSON callback

My current challenge involves fetching data from the YouTube API and displaying it on my website. However, I am facing an issue where the DOM changes made inside the getJSON's callback function are not reflecting on the webpage. Even though I can see ...

javascript jquery json

How can I limit the input of string values from a Node Express request query?

export type TodoRequest = { order?: 'asc' | 'desc' | undefined; } export const parseTodoRequest = (requestData: ParsedQs): TodoRequest => { return { order: requestData.order as 'asc' | 'desc' | u ...

javascript typescript express

The node version in VS Code is outdated compared to the node version installed on my computer

While working on a TypeScript project, I encountered an issue when running "tsc fileName.ts" which resulted in the error message "Accessors are only available when targeting ECMAScript 5 and higher." To resolve this, I found that using "tsc -t es5 fileName ...

node.js typescript visual-studio-code

Instructions for setting up a session where the user can input data at a later time

Is there a method to save user input so that they can return to continue filling out a form from where they left off? I am in need of assistance as I am unsure of the optimal way to achieve this. Thank you in advance for any help. ...

javascript jquery angular

Issue with fullcalendar: unable to retrieve date from clicked event

I am currently working on setting up a dynamic fullcalendar that fetches events from the backend and displays them for users. Additionally, users have the ability to drag and drop events on the calendar. My main objective is to retrieve the date of a clic ...

javascript jquery fullcalendar

Unleashing the power of ShaderMaterial for achieving the perfect shadow

When using InstancedBufferGeometry to generate multiple boxes and updating their positions with Perlin noise, I encountered an issue where the mesh was casting shadows incorrectly. How can I calculate the correct shadow for this scenario? vertexShader at ...

javascript three.js shader

How can I update data in Select2 after it has been initialized?

After initializing select2, I am trying to set an array of data in the following way: var selection = $('#selection').select2({}); selection.data([ {id: 1, text: 'value1'}, {id: 1, text: 'value1'} ]); However, I am encou ...

javascript jquery jquery-select2

TypeScripter Q&A