서문
ffmpeg를 사용하기 위해선 내부의 worker thread를 사용해야만 합니다.
이 과정에서는 sharedArrayBuffer를 사용해야만 했는데요, 이 과정에서 겪었던 이슈들, 그리고 이를 어떻게 해결 했는지에 대해서 담고 있습니다.
SharedArrayBuffer 에 대해서
FFmpeg는 비디오와 오디오 처리에 있어 멀티스레딩을 통해 높은 성능을 제공합니다. 멀티스레딩은 작업을 여러 스레드에 분산시켜 처리 시간을 단축시킵니다. 하지만 이 과정에서 스레드 간 메모리 공유가 필요한데, 바로 여기서 SharedArrayBuffer가 핵심적인 역할을 합니다.
SharedArrayBuffer는 HTML5와 JavaScript의 최신 표준에서 도입된 데이터 구조로, 다양한 워커 또는 스레드 간에 메모리를 공유할 수 있는 기능을 제공합니다. 이는 메모리의 복사나 전송 없이 데이터를 공유할 수 있게 해주어, 웹 애플리케이션의 성능을 크게 향상시킬 수 있습니다.
SharedArrayBuffer is not defined
만약 별도의 설정이 없이 sharedArrayBuffer 를 사용하려 한다면 다음과 같은 이슈에 직면하게 됩니다.
해당 error가 발생하는 이유는 Spectre 와 Meltdown 이후 많은 브라우저가 SharedArrayBuffer의 사용을 제한하거나 비활성화한 것은 주로 보안과 관련된 문제 때문입니다.
SharedArrayBuffer는 JavaScript에서 멀티 스레딩을 가능하게 하는 객체입니다. 이를 통해 웹 페이지 내에서 멀티 스레딩을 수행하는 웹 애플리케이션들이 메모리를 공유할 수 있게 됩니다. 하지만 Spectre와 Meltdown 취약점은 이러한 메모리 공유 메커니즘을 이용한 공격 가능성을 드러냈습니다.
이로 인해 모든 브라우저들은 다음과 같은 조치를 취했습니다.
SharedArrayBuffer의 기본 비활성화
일부 브라우저에서는 기본적으로 SharedArrayBuffer를 비활성화하고, 명시적인 사용자 동의나 특정 조건이 충족될 때만 활성화하는 방식을 채택했습니다.
CORS 보안 강화
브라우저들은 SharedArrayBuffer를 사용하기 위한 보안 요구사항을 강화했습니다. 예를 들어, Cross-Origin Resource Sharing (CORS) 정책을 엄격하게 적용하거나, Secure Contexts(HTTPS 연결 등)에서만 SharedArrayBuffer를 사용할 수 있도록 제한했습니다.
해결하기 위한 _header 방식
CloudFlare 서비스를 사용중이었기 때문에 HTTP 헤더에 특정 보안 관련 헤더를 추가해야 합니다. 이는 웹 애플리케이션의 보안을 강화하고, SharedArrayBuffer를 안전하게 사용할 수 있도록 합니다. 주로 추가해야 하는 헤더는 Cross-Origin-Opener-Policy (COOP)와 Cross-Origin-Embedder-Policy (COEP)입니다.
Cross-Origin-Opener-Policy (COOP)
- 목적: 다른 출처에서 열린 팝업 윈도우 간의 상호작용을 제한합니다. 이는 공격자가 취약점을 이용하여 사용자 데이터에 접근하는 것을 방지합니다.
- Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy (COEP)
- 목적: 웹사이트가 리소스를 다른 출처에서 불러올 때, 이 리소스들이 CORS와 같은 보안 정책을 준수하도록 요구합니다. 이것은 외부 리소스가 웹사이트의 보안을 약화시키지 않도록 합니다.
- Cross-Origin-Embedder-Policy: require-corp
그렇다면 지금까지, sharedArraybuffer를 사용하기 위해서는 두가지 http 헤더에 보안 관련 정책을 추가해야한다는 것을 알게 되었습니다.
그렇다면 이 과정이 과연 어떤 역할을 수행하는지 확인해보도록 하겠습니다.
웹 애플리케이션을 배포할 때, 웹 서버나 호스팅 서비스는 웹 페이지에 방문하는 사용자의 브라우저에 어떤 정보를 보내야 하는지를 결정해야 합니다. 이 정보 중 하나가 바로 HTTP 헤더입니다. HTTP 헤더는 웹 페이지의 데이터와 함께 전송되며, 보안 설정, 콘텐츠의 종류, 캐싱 정책 등 다양한 지시사항을 담고 있습니다.
_headers 파일은 이러한 HTTP 헤더를 미리 정의해둔 파일입니다. 웹 애플리케이션 개발자는 이 파일에 필요한 헤더 설정을 작성해두고, 이 파일을 웹 애플리케이션과 함께 배포합니다.
배포 후, 웹 서버나 호스팅 서비스는 _headers 파일에 정의된 내용을 읽어, 이 설정대로 HTTP 헤더를 구성합니다. 예를 들어, _headers 파일에 보안 관련 헤더가 설정되어 있다면, 웹 서버는 이 보안 설정을 따라 웹 페이지를 사용자의 브라우저에 전송합니다.
이 과정은 자동으로 이루어지기 때문에, 개발자는 웹 서버의 복잡한 설정을 직접 건드릴 필요 없이, 단순히 _headers 파일에 원하는 설정을 기록함으로써 웹 애플리케이션의 HTTP 헤더를 관리할 수 있습니다. 이 방식은 특히 정적 사이트를 배포할 때 유용하며, 보안, 성능 최적화, 리소스 관리 등 다양한 측면에서 중요한 역할을 합니다.
따라서 다음과 같이 설정함으로서, _headers 파일에 있는 설정이 배포될때, 유저에게 보안 설정에 따른 웹페이지를 전송할 수 있게 되어, sharedArrayBuffer 기능을 수행할 수 있도록 합니다.
