![Malicious npm Package Typosquats react-login-page to Deploy Keylogger](https://cdn.sanity.io/images/cgdhsj6q/production/007b21d9cf9e03ae0bb3f577d1bd59b9d715645a-1024x1024.webp?w=400&fit=max&auto=format)
Research
Security News
Malicious npm Package Typosquats react-login-page to Deploy Keylogger
Socket researchers unpack a typosquatting package with malicious code that logs keystrokes and exfiltrates sensitive data to a remote server.
@module-federation/node
Advanced tools
Readme
A package to bring the concept and power of module federation to NodeJS.
To install the plugin run one of the following commands in your terminal for your application.
# npm
npm install @module-federation/node
# yarn
yarn add @module-federation/node
There are two approaches to using the plugins exported from this package, dependent on your use case.
module-federation/enhanced
supports runtime plugins.
const { ModuleFederationPlugin } = require('@module-federation/enhanced');
const options = {
target: 'async-node',
output: {
chunkFilename: '[id]-[chunkhash].js' // important to hash chunks
},
plugins: [
new ModuleFederationPlugin({
name: 'app1',
exposes: {},
remotes: {
app2: 'app2@http://'
},
runtimePlugins: [
require.resolve('@module-federation/node/runtimePlugin')
],
remoteType: 'script',
library: { type: 'commonjs-module', name: 'app1' }
})
]
};
or you can enable it with some presets via UniversalFederation
new UniversalFederationPlugin({
name: 'website2',
library: { type: 'commonjs-module' },
isServer: true, // or false
remotes: {},
filename: 'remoteEntry.js',
useRuntimePlugin: true, // uses the module-federation/enhanced runtime plugin api
exposes: {
'./SharedComponent': './remoteServer/SharedComponent',
},
})
This plugin is an abstraction over both NodeFederationPlugin
and ModuleFederationPlugin
. It will alternate between which it uses based on where the build is intended to be used.
If the build is intended to be used on the browser
, it will use the standard ModuleFederationPlugin
and bundle your code accordingly, however, if it is intended for server
usage, it will use NodeFederationPlugin
to create the bundle.
This simplifies the code required in your webpack.config.js
to enable SSR Module Federation. It determines which platform it needs to build for based on two things:
isServer: true
server
It accepts the other standard options from ModuleFederationPlugin
as well. You can see an example usage below:
const { UniversalFederationPlugin } = require('@module-federation/node');
const config = {
target: isServer ? false : 'web',
plugins: [
new UniversalFederationPlugin({
name: 'website2',
library: { type: 'commonjs-module' },
isServer: true, // or false
remotes: {},
filename: 'remoteEntry.js',
useRuntimePlugin: true, // uses the module-federation/enhanced runtime plugins
exposes: {
'./SharedComponent': './remoteServer/SharedComponent',
},
}),
],
};
You can also use each of the underlying plugins individually if you need more control over when they are used.
At build time, you need to be aware if you're building for the server
or for the browser
.
If it's building for server, we need to set target: false
to allow the plugins to function correctly.
The NodeFederationPlugin
follows the same API as the Module Federation Plugin and therefore should be a drop-in replacement if you already have it set up in your webpack.config.js
.
An example configuration is presented below:
const { NodeFederationPlugin, StreamingTargetPlugin } = require('@module-federation/node');
const config = {
target: isServer ? false : 'web',
plugins: [
new NodeFederationPlugin({
name: 'website2',
library: { type: 'commonjs-module' },
remotes: {},
filename: 'remoteEntry.js',
exposes: {
'./SharedComponent': './remoteServer/SharedComponent',
},
}),
new StreamingTargetPlugin({
name: 'website2',
library: { type: 'commonjs-module' },
remotes: {},
}),
],
};
This package also exposes a few utilities to help with the setup of your federated application.
Used to "hot reload" the federated application.
import { revalidate } from '@module-federation/node/utils';
// we automatically reset require cache, so the reload callback is only if you need to do something else
revalidate().then((shouldReload) => {
// do something extra after revalidation
if (shouldReload) {
// reload the server
}
});
Note: To ensure that changes made to files in remotes are picked up revalidate
, you can set the remotes webpack output.filename to [name]-[contenthash].js
(or similar). This will cause the remoteEntry.js file to be regenerated with a unique hash every time a new build occurs. The revalidate method intelligently detects changes by comparing the hashes of the remoteEntry.js files. By incorporating [contenthash] into the remote's webpack configuration, you enable the shell to seamlessly incorporate the updated files from the remotes.
Hot reloading Express.js
Express has its own route stack, so reloading require cache will not be enough to reload the routes inside express.
//express.js
const app = express();
global.clearRoutes = () => {
app._router.stack = app._router.stack.filter((k) => !(k && k.route && k.route.path));
};
// in some other file (within the scope of webpack build)
// wherever you have your revalidation logic
revalidate().then((shouldReload) => {
if (shouldReload) {
global.clearRoutes();
}
});
const chunkFetcher = globalThis.webpackChunkLoad || globalThis.fetch || fetchPolyfill;
// then it will pass one argument to the function, the url to fetch
chunkFetcher(url)
.then((res) => res.text())
.then((text) => {
// do something with the text
});
If you want to use your own custom fetch, or add fetch headers, either in the entrypoint of webpack or outside of webpack scope, like in express server you can override the default chunk fetcher by setting the globalThis.webpackChunkLoad
variable.
globalThis.webpackChunkLoad = async (url) => {
const res = await fetch(url, {
headers: {
'x-custom-header': 'custom-header-value',
},
});
return res.text();
};
List of our amazing contributors 💥
FAQs
Unknown package
We found that @module-federation/node demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 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
Security News
Socket researchers unpack a typosquatting package with malicious code that logs keystrokes and exfiltrates sensitive data to a remote server.
Security News
The JavaScript community has launched the e18e initiative to improve ecosystem performance by cleaning up dependency trees, speeding up critical parts of the ecosystem, and documenting lighter alternatives to established tools.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.