Security considerations for micro-frontend architecture

Micro frontend architecture has gradually become a mainstream solution for large-scale frontend applications in recent years. By breaking down monolithic applications into multiple independent sub-applications, it achieves team autonomy and technology stack decoupling. However, this distributed architecture also introduces new security challenges that require protection across multiple dimensions, including isolation mechanisms, communication security, and dependency management.

Design of Isolation Mechanisms and Breakout Risks

Core isolation techniques in micro frontends include sandboxing, style isolation, and routing isolation. In sandbox implementations, the limitations of Proxy can lead to escape vulnerabilities:

// Example of an incomplete sandbox implementation
class IncompleteSandbox {
  constructor(context) {
    return new Proxy(context, {
      get(target, key) {
        return target[key]
      },
      set(target, key, value) {
        // Fails to handle Symbol-type properties
        target[key] = value
        return true
      }
    })
  }
}

// Attackers can exploit Symbols to bypass restrictions
const maliciousCode = () => {
  const secretKey = Symbol('escape')
  window[secretKey] = 'access parent context'
}

Common issues with style isolation include:

1. Dynamic selector generation rules in CSS-in-JS being overridden
2. Abuse of Shadow DOM's piercing selector ::part()
3. Layout corruption in sub-applications due to global style resets

Security Protection for Cross-Application Communication

Communication between sub-applications typically uses custom events or state management, requiring safeguards against:

• Event injection attacks: Malicious message execution due to unverified event sources
• Serialization vulnerabilities: Maliciously constructed payloads parsed via JSON.parse

// Implementation of a secure communication middleware
interface SecureMessage {
  origin: string
  signature: string
  payload: string
}

class CommunicationHub {
  private registeredApps = new Map<string, CryptoKey>()

  async verifyMessage(msg: SecureMessage): Promise<boolean> {
    const key = this.registeredApps.get(msg.origin)
    if (!key) return false
    
    const valid = await crypto.subtle.verify(
      'HMAC',
      key,
      hexToBuffer(msg.signature),
      new TextEncoder().encode(msg.payload)
    )
    return valid
  }
}

Supply Chain Security for Third-Party Dependencies

Micro frontends are particularly vulnerable to dependency pollution:

1. Independent bundling of sub-applications leads to duplicate dependencies (e.g., multiple versions of lodash)
2. Increased risk of CDN resource tampering
3. Unaudited shared utility libraries becoming attack vectors

Recommended security practices:

# Use npm audit for dependency scanning
npm audit --production --audit-level=critical

# Example of locked dependency versions
{
  "dependencies": {
    "react": "18.2.0",
    "vue": "3.2.47"
  },
  "overrides": {
    "lodash": "4.17.21"
  }
}

Special Challenges in Authentication and Session Management

Typical issues in micro frontend architectures:

• JWT token sharing strategies between the main application and sub-applications
• Configuration of SameSite attributes for cross-origin cookies
• Whitelist management for OAuth2.0 callback URLs

Example of secure token distribution:

// Main application token distribution center
class TokenDistributor {
  constructor() {
    this.tokens = new Map()
    this.cryptoKey = await crypto.subtle.generateKey(
      { name: 'AES-GCM', length: 256 },
      true,
      ['encrypt', 'decrypt']
    )
  }

  async issueToken(appId) {
    const iv = crypto.getRandomValues(new Uint8Array(12))
    const token = await crypto.subtle.encrypt(
      { name: 'AES-GCM', iv },
      this.cryptoKey,
      new TextEncoder().encode(JSON.stringify({
        appId,
        exp: Date.now() + 3600000
      }))
    )
    return { token, iv }
  }
}

Protection Measures in Build and Deployment

Security points to reinforce in CI/CD pipelines:

1. Integrity verification of sub-application build artifacts
2. Integration of automated security scanning
3. Security audits for version rollback mechanisms

Example of a secure Dockerfile:

# Multi-stage build to reduce attack surface
FROM node:18-alpine as builder
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
RUN npm run build

FROM nginx:1.23-alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY --from=builder /app/nginx.conf /etc/nginx/conf.d/default.conf
RUN rm -rf /usr/share/nginx/html/*.map

Monitoring and Incident Response Systems

Micro frontend-specific monitoring dimensions:

• Detection of sudden increases in sub-application resource load failure rates
• Identification of abnormal patterns in cross-application API calls
• Collection of sandbox violation logs

Example Sentry configuration:

Sentry.init({
  dsn: 'https://example.com',
  integrations: [
    new Sentry.Integrations.Breadcrumbs({
      dom: false // Disable global DOM monitoring
    })
  ],
  beforeSend(event) {
    if (event.extra?.originApp !== currentApp.id) {
      return null // Filter cross-application errors
    }
    return event
  }
})

Adaptation to Browser Security Policies

Browser features requiring special attention:

• Multi-layered configuration of Content Security Policy (CSP)
• Constraints of Trusted Types on dynamic DOM operations
• Impact of Cross-Origin Opener Policy on window communication

Example CSP configuration:

<!-- Main application meta tag -->
<meta http-equiv="Content-Security-Policy" 
  content="default-src 'self';
           script-src 'self' 'unsafe-inline' https://cdn.example.com;
           style-src 'self' 'unsafe-inline';
           connect-src https://api.example.com;
           frame-src 'self' https://micro-app-*.example.com">

Balancing Performance Optimization and Security

Common security-performance tradeoffs and solutions:

1. Sub-application preloading vs. resource tampering risks
   • Use Subresource Integrity (SRI) verification

   <link rel="preload" href="https://cdn.example.com/micro-app.js"
     integrity="sha384-5f4X0bl4M8+p5fq6..."
     crossorigin="anonymous">
   

2. Shared dependency caching vs. version inconsistency vulnerabilities
   • Use import maps for controlled sharing

   <script type="importmap">
   {
     "imports": {
       "react": "/shared/react/18.2.0/index.js"
     }
   }
   </script>
   

Special Handling for Compliance Requirements

Considerations under regulations like GDPR and Level 2 Protection:

• Tracking user data flow between sub-applications
• Geographic consistency for privacy data storage
• Cross-application correlation analysis of audit logs

Example data access control implementation:

class DataGovernance {
  private dataTags = new WeakMap()

  tagSensitiveData(data, classification) {
    this.dataTags.set(data, classification)
  }

  checkAccess(appId, data) {
    const classification = this.dataTags.get(data)
    return classification <= this.getAppClearance(appId)
  }
}