Service Worker消息通道与来源治理（MessageChannel/clients）最佳实践

背景与价值SW与页面通信易被滥用。来源与结构校验可提升安全性并减少不当消息影响。统一规范白名单来源：仅允许受控origin页面通信。消息结构：校验类型与payload格式。广播治理：使用clients.matchAll定向通信。核心实现SW侧来源与消息校验const allowOrigins = new Set(['https://app.example.com']) self.addEventListener('message', (event: any) => { const origin = event.origin || event.source?.origin || '' if (!allowOrigins.has(origin)) return const data = event.data if (!data || typeof data.type !== 'string') return }) 页面侧通道与发送async function sendToSw(msg: any) { if (!('serviceWorker' in navigator)) return false const reg = await navigator.serviceWorker.ready const ch = new MessageChannel() reg.active?.postMessage(msg, [ch.port2]) return true } 落地建议SW与页面的通信均使用白名单与结构校验，广播时定向匹配clients。验证清单来源是否命中白名单；消息结构是否校验；是否通过MessageChannel定向通信。