Module Federation Access/Security

[danielsdesk]

Hi, I haven't seen much discussion related to security and access considerations when using Module Federation, so I thought I'd start one here. As an example scenario: say you have a long living host with remote components on it, and other hosts consume from it. Is there any consideration to how to control access to the remote components? E.g. someone starts their own improper host to consume from the remote. My thoughts here are to build in some kind of token auth within components so even if they are exposed and someone starts an improper host using the same config, the code isn't useful without authenticating with a service first. Any other thoughts along these lines? Is there prior art in the Webpack domain that I'm missing that would be applicable?

[jacob-ebey]

I get it, but is this really a concern? I could consume your code at any point regardless of if its a federated module. That's just how the web works.

[danielsdesk]

Sure, and I get that. This may be a domain-specific concern instead but I was curious if there was any pre-existing thought or prior art on limiting by auth or by request (e.g. CSP). For example say we're trying to make a system of paid plugins that are able to be installed on an instance, and the plugins are federated (so are long living for any instance to use), but you should only have plugins if you have a particular license. I'll be doing my own thought process on this since it's a domain-specific concern regardless but I was just curious to ask the question to the community as I'm still figuring out what webpack does inherently.

[jacob-ebey]

Ah, gotcha. You can could use startup code to override the "init" and or "get" method on the container and do some auth logic there when initializing or retrieving a module: https://gist.github.com/jacob-ebey/23aee3036c0c0c78a0b9369a5d8286ff

new FederatedStartupCodePlugin({
  name: "containerName",
  code: `
const doGlobalAuth = async () => true;
const doModuleAuth = async (modId) => true;

const ogInit = module.exports.init;
module.exports.init = async (...args) => {
  // This will most likely totally blow up the consuming application
  if (!await doGlobalAuth ()) throw new Error("Not authorized");
  return ogInit(...args);
};

const ogGet = module.exports.get;
module.exports.get = async (modId, ...rest) => {
  // This could be more easily handled gracefully by a consumer via dynamic importing
  if (!await doModuleAuth(modId)) throw new Error("Not authorized");
  return ogGet(modId, ...rest);
};
`
})

[danielsdesk]

this is exactly what I was looking for! Thank you so much for pointing this out to me

[jacob-ebey]

Good question, thanks for clarifying it for me.