前端资源隔离与Sandbox（iframe/Worker）策略最佳实践

一、风险与目标风险：同源脚本共享上下文污染、消息注入、权限过宽、资源误用与数据泄露。目标：隔离执行环境、收敛可用能力、严格来源与消息校验、可控创建与销毁。

二、iframe隔离<iframe id="app-frame" src="/sandbox.html" sandbox="allow-scripts" referrerpolicy="no-referrer" allow="geolocation 'none'; microphone 'none'; camera 'none'"></iframe>

const frame = document.getElementById('app-frame') as HTMLIFrameElement

const origin = 'https://example.com'

function sendToFrame(msg: { type: string; payload?: any; version: number }) {

frame.contentWindow?.postMessage(msg, origin)

}

function onFrameMessage(ev: MessageEvent) {

if (ev.origin !== origin) return

const m = ev.data as { type: string; payload?: any; version: number }

if (typeof m?.type !== 'string' || typeof m?.version !== 'number') return

}

window.addEventListener('message', onFrameMessage)

三、Worker隔离const worker = new Worker('/worker.js', { type: 'module' })

function sendToWorker(msg: { type: string; payload?: any; version: number }) {

worker.postMessage(msg)

}

worker.onmessage = ev => {

const m = ev.data as { type: string; payload?: any; version: number }

if (typeof m?.type !== 'string' || typeof m?.version !== 'number') return

}

function stopWorker() { worker.terminate() }

四、MessageChannel与类型守卫const ch = new MessageChannel()

function isMsg(x: any): x is { type: string; payload?: any; version: number } {

return x && typeof x.type === 'string' && typeof x.version === 'number'

}

function connectWithChannel(target: Window, origin: string) {

target.postMessage({ type: 'connect', version: 1 }, origin, [ch.port2])

ch.port1.onmessage = ev => { if (isMsg(ev.data)) {} }

}

五、策略协同Content-Security-Policy: default-src 'none'; script-src 'self'; connect-src 'self'; frame-ancestors 'none'

Cross-Origin-Opener-Policy: same-origin

Cross-Origin-Embedder-Policy: require-corp

六、验收清单iframe使用`sandbox`且最小能力集合，不授予`allow-same-origin`除非必要。Worker独立执行且通信仅接受满足类型守卫的消息。`postMessage`严格校验`origin`与结构，使用固定`version`与有限`type`枚举。CSP限制默认来源与可连接端点；COOP/COEP提升隔离与资源嵌入安全性。建立创建与销毁流程，空闲时终止Worker并释放资源。