Sub-Resource Integrity for Runtime Micro-Frontends

Micro-frontend architectures decouple web applications into independently deployable modules, but loading these external bundles dynamically at runtime exposes applications to significant supply chain risks. Sub-Resource Integrity (SRI) provides a critical defense layer by allowing the host container to cryptographically verify that fetched remote assets have not been modified, compromised, or injected with malicious code. By validating dynamic assets against known cryptographic hashes before execution, teams can safely reap the benefits of independent deployments without sacrificing application security.

The Security Vulnerability of Runtime Micro-Frontends

In a runtime micro-frontend setup, a host container shell fetches remote bundles—often hosted on distinct domains, content delivery networks (CDNs), or object storage buckets—on demand. Technologies like Webpack Module Federation, native ES modules, or dynamic script loaders typically facilitate this behavior.

This model introduces security challenges:

  • Third-Party Compromise: If an attacker compromises the server or CDN hosting a micro-frontend, they can alter the JavaScript bundle to execute unauthorized code across all host applications.
  • Man-in-the-Middle (MitM) Attacks: If transport-layer security is misconfigured or intercepted, untrusted intermediaries can inject arbitrary payloads.
  • Supply Chain Exploits: Malicious dependencies introduced during a child application’s build process propagate instantly to the host application without requiring a host rebuild.

Because micro-frontends execute with the same privileges as the host application, any tampered bundle can access DOM nodes, read cookies, hijack session tokens, and compromise sensitive user data.

How Sub-Resource Integrity Works

Sub-Resource Integrity is a security standard that enables browsers to verify that resources fetched from external servers match an expected cryptographic digest.

When a resource is loaded, the browser:

  1. Downloads the requested resource.
  2. Computes a cryptographic hash of the content using algorithms such as SHA-256, SHA-384, or SHA-512.
  3. Compares the resulting hash to the string specified in the resource's integrity attribute.
  4. Executes the script only if the hashes match exactly; otherwise, execution is blocked, and an error event is thrown.

Implementing SRI for Dynamically Loaded Bundles

While standard SRI is natively applied to static HTML via <script src="..." integrity="..." crossorigin="anonymous">, dynamic micro-frontends require runtime integration.

1. Dynamic Script Tag Injection

When loading remote entry scripts via DOM manipulation, the host application must explicitly set the integrity and crossOrigin properties before appending the script element:

function loadMicroFrontend(url, hash) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = url;
    script.integrity = hash; // e.g., "sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
    script.crossOrigin = 'anonymous';
    script.onload = resolve;
    script.onerror = () => reject(new Error(`Integrity check failed for ${url}`));
    document.head.appendChild(script);
  });
}

2. Secure Version Manifests

Because micro-frontends update independently, hardcoding hashes into the host shell undermines continuous deployment. Instead, host applications fetch a signed version manifest at startup:

  • The micro-frontend build pipeline generates the bundle and computes its SRI hash.
  • A version manifest containing the asset URL and its corresponding hash is published to a secured, authenticated endpoint or signed via public-key cryptography (e.g., JSON Web Signatures).
  • The host downloads and verifies the manifest, subsequently using the verified hashes to load the actual micro-frontend components via dynamic script injection.

3. Module Federation and Build Tools

Build tools like Webpack and Vite can automate SRI generation for dynamic chunks using specialized plugins. For Module Federation, community plugins extend the runtime to automatically propagate hash manifests from remote containers down to chunk-loading functions, ensuring child chunks loaded transitively also undergo integrity verification.

Key Requirements for SRI in Micro-Frontends

  • CORS Headers: For SRI verification to work on cross-origin scripts, the remote hosting server must respond with appropriate Cross-Origin Resource Sharing (CORS) headers, specifically Access-Control-Allow-Origin: * (or the specific host domain). Without this, the browser blocks the script by default.
  • Failure Handling: Host applications must implement fallback states. If an SRI check fails due to network corruption or bundle tampering, the container should isolate the failure, log the security event, and present a resilient fallback interface without breaking the broader application.