
Research
Malicious fezbox npm Package Steals Browser Passwords from Cookies via Innovative QR Code Steganographic Technique
A malicious package uses a QR code as steganography in an innovative technique.
@amadeus-it-group/microfrontends
Advanced tools
The Amadeus Toolkit for Micro Frontends provides a messaging system that allows micro frontends to communicate with each other. The messaging system is based on the Channel Messaging API and works across iFrames. It can also be used in the same document for talk to MFE packaged as a Web Component for example.
MessagePeers
MF1
to everybody)MF4
to MF3
)MF5
disconnected, MF3
connected)You can create several message peers and connect them to each other in any way avoiding loops. You need to provide some options when creating a peer. Only id
is technically required.
import { Message, MessagePeer } from '@amadeus-it-group/microfrontends';
// 'one' is unique identifier for this peer in the network
const peer = new MessagePeer({ id: 'one' });
A peer can either wait for incoming connections from another peer via .listen()
or initiate a connection itself via .connect()
.
import { MessagePeer } from '@amadeus-it-group/microfrontends';
// Create two peers.
// First peer waits for any incoming connection
const one = new MessagePeer({ id: 'one' });
one.listen();
// Second peer connects to the first one
const two = new MessagePeer({ id: 'two' });
const disconnect = two.connect('one');
// if connection crosses iFrames, you might need to provide
// expected window and origin for `connect` and `listen` methods
two.connect('one', {
window: oneWindow,
origin: 'https://example.com',
});
// Disconnecting
disconnect(); // 'two' disconnects from 'one'
one.disconnect('two'); // 'one' disconnects from 'two'
one.disconnect(); // 'one' disconnects from all connected peers
A peer can decide which incoming connections to accept. Simplest usage is to listen for all connections without any filtering:
const stop = peer.listen(); // start listening
stop(); // stop listening; can restart anytime
More advanced usage allows you to filter incoming connections based on the peer id, source window, origin or a custom logic.
// 1. Using simple peer ids
peer.listen('two');
peer.listen(['two', 'three']);
// 2. Using matching objects
// ex. from peer 'two' from a specific iframe of the expected origin
peer.listen({
id: 'two',
source: iframe.contentWindow,
origin: 'https://example.com',
});
// ex. any connection from this particular iframe
peer.listen({
source: iframe.contentWindow,
});
// ex. any connection from this origin
peer.listen({
origin: 'https://example.com',
});
// 3. Using a combination of ids and objects
peer.listen(['one', 'two', { id: 'three', origin: 'https://example.com' }]);
// 4. Using a custom function
// ex. filter connections based on the handshake message and where it comes from
peer.listen((message, source, origin) => {
return true; // you decide whether to accept the connection
});
This is optional, but allows for type checking during development when sending and receiving messages.
import { Message } from '@amadeus-it-group/microfrontends';
interface HelloMessage_1_0 extends Message {
type: 'hello';
version: '1.0';
greeting: string;
}
interface HelloMessage_2_0 extends Message {
type: 'hello';
version: '2.0';
greetings: string[];
}
export type MyMessage = HelloMessage_1_0 | HelloMessage_2_0;
import { MessagePeer } from '@amadeus-it-group/microfrontends';
// Receiving messages
const one = new MessagePeer<MyMessage>({ id: 'one' });
// An observable-like interface consuming messages
one.messages.subscribe(({ payload }: MyMessage) => {
if (payload.type === 'hello') {
switch (payload.version) {
case '1.0':
console.log(payload.greeting); // string
break;
case '2.0':
console.log(payload.greetings); // string[]
break;
}
}
});
// Broadcast a message. Message will be type checked.
two.send({
type: 'hello',
version: '1.0',
greeting: 'Hello, world!',
});
// Send a message to a specific peer. Other peers will not receive it.
two.send(
{
type: 'hello',
version: '2.0',
greetings: ['Hello', 'world!'],
},
{
to: 'one',
},
);
There are some lifecycle messages (ServiceMessage
) that are automatically sent by the library. You can listen to them using the .serviceMessages
stream to avoid polluting your own messages in .message
stream.
import { MessagePeer, ServiceMessage } from '@amadeus-it-group/microfrontends';
const peer = new MessagePeer({ id: 'one' });
peer.serviceMessages.subscribe(({ payload }: ServiceMessage) => {
switch (payload.type) {
case 'handshake':
// instance of `HandshakeMessage`
break;
case 'connect':
// instance of `ConnectMessage`
break;
case 'disconnect':
// instance of `DisconnectMessage`
break;
case 'error':
// instance of `ErrorMessage`
break;
}
});
Simple logging can be enabled via enableLogging()
method. It will log all messages sent and received for debugging purposes.
import { enableLogging } from '@amadeus-it-group/microfrontends';
enableLogging();
// List all known peers and their accepted messages
one.knownPeers; // a map of known peers and messages they accept
one.knownPeers.get('two'); // a list of message types peer 'two' accepts
FAQs
Amadeus Micro Frontend Toolkit
The npm package @amadeus-it-group/microfrontends receives a total of 198 weekly downloads. As such, @amadeus-it-group/microfrontends popularity was classified as not popular.
We found that @amadeus-it-group/microfrontends demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
A malicious package uses a QR code as steganography in an innovative technique.
Research
/Security News
Socket identified 80 fake candidates targeting engineering roles, including suspected North Korean operators, exposing the new reality of hiring as a security function.
Application Security
/Research
/Security News
Socket detected multiple compromised CrowdStrike npm packages, continuing the "Shai-Hulud" supply chain attack that has now impacted nearly 500 packages.