微前端架构的安全考量

微前端架构在近年来逐渐成为大型前端应用的主流解决方案，通过拆分单体应用为多个独立子应用，实现团队自治与技术栈解耦。然而，这种分布式架构也引入了新的安全挑战，需要从代码隔离、通信机制、依赖管理等多个维度进行防护。

隔离机制的安全性

微前端的核心安全依赖在于子应用间的隔离能力。常见的隔离方案包括：

1. 沙箱隔离：通过Proxy实现JavaScript执行环境隔离

class Sandbox {
  constructor(context) {
    const proxy = new Proxy(context, {
      has(target, key) {
        return true
      },
      get(target, key) {
        if (key === Symbol.unscopables) return undefined
        return target[key]
      }
    })
    return proxy
  }
}

// 使用示例
const fakeWindow = { document: {} }
const sandbox = new Sandbox(fakeWindow)
with(sandbox) {
  console.log(document) // 访问隔离环境
}

2. CSS隔离问题尤为突出：

• Shadow DOM的兼容性问题
• 样式选择器污染（如.button全局冲突）
• 推荐采用CSS-in-JS方案或命名空间约定：

/* 子应用专属前缀 */
.app1-btn {
  color: red;
}

跨应用通信风险

主子应用间的通信需要严格验证：

1. postMessage安全实践：

// 主应用监听
window.addEventListener('message', (event) => {
  // 验证来源
  if (event.origin !== 'https://trusted-domain.com') return
  
  // 验证数据类型
  if (!validMessageTypes.includes(event.data.type)) return
  
  // 处理逻辑
})

2. 自定义事件的风险：

• 避免直接暴露全局事件总线
• 采用权限控制中间件：

interface SecureEvent {
  type: string
  payload: unknown
  origin: string
  timestamp: number
}

class EventBus {
  private validate(event: SecureEvent): boolean {
    return crypto.subtle.verify(
      'RSASSA-PKCS1-v1_5',
      publicKey,
      event.signature,
      event.data
    )
  }
}

依赖管理漏洞

共享依赖可能导致严重问题：

1. 重复加载风险：

• React多实例会导致hooks系统崩溃
• 解决方案示例：

// 共享库加载检查
if (!window.React) {
  await import('react@17.0.2')
}

2. 第三方包验证：

• 子应用的package.json需审计
• 自动化检测方案：

# 使用npm audit进行依赖检查
npm audit --production --json | jq '.metadata.vulnerabilities'

认证与会话管理

分布式身份验证的挑战：

1. JWT令牌传递：

• 避免localStorage跨域读取
• 推荐HttpOnly Cookie + CSRF Token

# Nginx配置示例
add_header Set-Cookie "token=$jwt; Path=/; HttpOnly; Secure; SameSite=Strict";

2. 权限边界划分：

• 子应用路由守卫示例：

// Vue子应用路由配置
router.beforeEach((to, from, next) => {
  if (to.meta.requiresAdmin && !store.getters.isAdmin) {
    next('/forbidden')
  }
})

构建部署安全

CI/CD流程中的关键点：

1. 子应用完整性校验：

// 主应用加载子应用时验证hash
const manifest = await fetch('/asset-manifest.json')
const expectedHash = 'a1b2c3d4'
const script = await fetch(manifest['main.js'])

if (sha256(await script.text()) !== expectedHash) {
  throw new Error('Invalid subapp checksum')
}

2. CSP策略配置：

<!-- 严格的CSP策略 -->
<meta http-equiv="Content-Security-Policy" 
      content="default-src 'self';
               script-src 'self' 'unsafe-inline' cdn.example.com;
               style-src 'self' 'unsafe-inline';
               connect-src api.example.com;">

监控与应急响应

生产环境必备措施：

1. 异常行为检测：

// 子应用错误边界捕获
class ErrorBoundary extends React.Component {
  componentDidCatch(error) {
    sendToMonitoring({
      app: 'checkout',
      error: error.stack,
      timestamp: Date.now()
    })
  }
}

2. 快速下线机制：

• 动态配置中心示例：

{
  "apps": {
    "payment": {
      "active": false,
      "fallback_url": "/maintenance"
    }
  }
}

浏览器特性滥用防护

现代API需要特别关注：

1. 存储隔离：

// 子应用使用前缀隔离localStorage
const scopedStorage = {
  getItem(key) {
    return localStorage.getItem(`app1_${key}`)
  }
}

2. 敏感API拦截：

// 重写危险API
const originalGeolocation = navigator.geolocation
navigator.geolocation = {
  getCurrentPosition: (success, error, options) => {
    if (!userPermissions.geolocation) {
      return error(new Error('Permission denied'))
    }
    return originalGeolocation.getCurrentPosition(success, error, options)
  }
}