피드로 돌아가기
Dev.toFrontend
원문 읽기
COOP/COEP 설정을 통한 Wasm Multithreading 활성화 및 SharedArrayBuffer 복구
Fix 'SharedArrayBuffer is not defined': a practical guide to cross-origin isolation
AI 요약
Context
Spectre와 같은 Side-channel attack으로 인한 보안 취약점 해결을 위해 브라우저가 SharedArrayBuffer 접근을 기본적으로 차단한 상황. 이로 인해 Multithreaded WebAssembly가 Single thread로 Fallback 되며 런타임 성능 저하가 발생하는 한계 존재.
Technical Solution
- COOP(Cross-Origin-Opener-Policy)를 'same-origin'으로 설정하여 Top-level window 간 연결을 차단하고 독립적인 Browsing Context Group 확보
- COEP(Cross-Origin-Embedder-Policy)를 'require-corp'로 설정하여 모든 Subresource의 명시적 허용 여부를 검증하는 격리 환경 구축
- 브라우저가 self.crossOriginIsolated 상태를 true로 전환함으로써 SharedArrayBuffer 및 Wasm Threading 기능 복원
- COEP 적용 후 로드되지 않는 외부 리소스 해결을 위해 CORP(Cross-Origin-Resource-Policy) 설정 또는 CORS 정책 적용
- 서버 헤더 설정이 불가능한 정적 호스팅 환경에서 coi-serviceworker를 통한 Client-side 헤더 주입 shim 전략 활용
실천 포인트
1. self.crossOriginIsolated 값으로 실제 격리 여부 우선 확인
2. Document 레벨(COOP, COEP)과 Subresource 레벨(CORP) 헤더의 역할 구분 및 적용
3. COEP 활성화 시 외부 CDN 리소스의 CORP/CORS 설정 누락으로 인한 로드 실패 가능성 사전 검토
4. 서버 설정 변경이 불가한 경우 Service Worker 기반의 Header Injection 방안 고려