[파트7] React 비디오 에디터 만들기 CORS 에러 정리

실습중 에러 내용

React로 비디오 에디터 만드는 실습 중 Ffmpeg 라이브러리 사용하다가

SharedArrayBuffer 찾을수 없다는 에러가 나온상황

 

 

에러 원인 이해

SharedArrayBuffer를 사용할 때 "찾을 수 없다"는 오류와 CORS 관련 에러가 발생하는 이유는 브라우저의 보안 정책 때문이라고 한다..

SharedArrayBuffer는 고성능 멀티스레딩 기능을 지원하지만, Spectre와 Meltdown 같은 보안 취약점으로 인해 엄격한 보안 조치가 필요 이로 인해 SharedArrayBuffer를 사용할 때는 특정 HTTP 헤더를 설정해야 한다고 한다.

 

왜 SharedArrayBuffer가 기본적으로 비활성화되었는가?(GPT)

2018년에 발견된 Spectre 및 Meltdown 취약점은 현대의 대부분의 프로세서에서 발생하는 심각한 보안 문제입니다. 이 취약점들은 악성 웹사이트가 다른 웹사이트의 메모리 내용을 읽어올 수 있게 합니다. SharedArrayBuffer는 고성능 멀티스레딩을 가능하게 하는 구조이지만, 이 취약점에 의해 악용될 수 있어 주요 브라우저들에서 기본적으로 비활성화되었습니다.

 

왜 CORS 에러가 발생하는가?

CORS(Cross-Origin Resource Sharing) 에러는 브라우저가 한 출처에서 실행되는 웹 페이지가 다른 출처의 자원에 접근하려 할 때 발생합니다. 이는 보안상의 이유로 기본적으로 차단되며, 서버가 이를 명시적으로 허용해야 합니다.

SharedArrayBuffer를 사용할 때는 브라우저가 보안 상의 이유로 위에서 언급한 COOP와 COEP 헤더를 요구합니다. 이러한 헤더들이 설정되지 않으면 브라우저는 SharedArrayBuffer 사용을 차단하고 "찾을 수 없다"는 오류를 발생시킵니다.

 

SharedArrayBuffer 사용을 위한 보안 헤더

브라우저에서 SharedArrayBuffer를 활성화하려면, 보안 헤더를 통해 사이트가 높은 보안 정책을 따르고 있음을 명시해야 합니다. 이 헤더들은 다음과 같습니다:

 

Cross-Origin Opener Policy (COOP):

• same-origin: 동일 출처에서만 리소스를 열 수 있게 합니다.

Cross-Origin-Opener-Policy: same-origin

 

Cross-Origin Embedder Policy (COEP):

• require-corp: 모든 자원들이 동일 출처 정책을 따르거나, CORS를 통해 허용되어야 함을 명시합니다.

Cross-Origin-Embedder-Policy: require-corp

 

해결법

우선 강사님이 작업한 프로젝트 파일을 살펴보니 

src -> setupProxy.js에 크로스 관련 헤더 설정이 셋팅되어 있는 코드를 찾을 수 있었다.

이 코드 그대로 복사하여 내프로젝트 동일경로에 붙여넣기 하였더니 정상적으로 동작하였다.

 

 

**의문점**

setupProxy.js는 어떻게 실행되는지 궁금하였다

GPT답변

create-react-app은 개발 서버를 설정할 때 src 디렉토리의 setupProxy.js 파일을 자동으로 감지하고 실행합니다.

라고 한다.

 

위 설명으로는 부족해서 GPT한테 계속 물어보면서 동작되는 코드까지 집접 까보았다.

 

npm start 시 react-scripts 실행

*package.json 에 셋팅 되어 있음

 

node_modules 안에 설치된 react-scripts 구조는 아래와 같았다.

 

start.js 안에 webpack-dev-server 실행하여 리액트 애플리케이션을 제공한다고 하며

webpackDevServer.config.js 파일이 setupProxy.js 파일을 감지하고 로드하는 역할을 한다고 한다.

 

webpackDevServer.config.js  파일을 까서 아래  paths.proxySeup 가동적으로 실행되는 코드를 찾았다.

주석도 위와 같이 써있었다.

 

 // This registers user provided middleware for proxy reasons

// 프록시 이유로 사용자가 제공한 미들웨어를 등록합니다.

 

paths.proxySeup 컨트롤 클릭하여 봐보니 아래 처럼 src/setupProxy.js 절대경로로 고정되어 있는걸 볼 수 있었다.

 

리액트 실행시 setupProxy.js 가 어떻게 감지되어 실행되는지 알 수 있었다!!

 

여기서 드는 의문점 하나더..

 

middleware 서버 설치 없이 왜 헤더 값만 넣었나?

setupProxy.js 셋팅시 대부분 인터넷 글에서는 middleware 서버를 설치후 셋팅 까지 해주라고 되어있다 

그러나 강사님 프로젝트에서는 package.json 에 middleware서버 설치한 이력도 없고 관련 셋팅은 찾아 볼 수 없었다. 

 

그래서 다시 GPT한테 물어보았다.

 

http-proxy-middleware 없이도 잘 작동하는 이유는 setupProxy.js에서 단순히 보안 헤더를 설정하는 기능만 추가했기 때문입니다. http-proxy-middleware는 필요 없지만, 보안 헤더를 추가하는 부분은 리액트 개발 서버에서 제대로 작동하게 한다라고 한다.

 

즉 SharedArrayBuffer 사용할려면  서버 실행시 보안헤더만 넣어주면된다라고 이해 하였다.

 

궁금중은 어느 정도 해결이 되었다.

 

 

확인

마지막으로 헤더부분에 cross-Origin-Opener-Policy 및 Cross-Origin-Embedder-Policy 박혀 있는지만 확인해 보았다.

 

setupProxy.js 를 제외후 npm start 하였을시 네트워크 탭

cross-Origin-Opener-Policy , Cross-Origin-Embedder-Policy  찾을 수 없다

 

 

setupProxy.js 를 포함후 npm start 하였을시 네트워크 탭

헤더에 cross-Origin-Opener-Policy , Cross-Origin-Embedder-Policy  셋팅값이 잘 박혀 있는것을 확인 할 수 있다.

요약

Ffmpeg 라이브러리 사용시 SharedArrayBuffer  찾을수 없다는것은 크로스 보안 이슈 때문에며,

이는 서버 실행과정에서 보안헤더를 넣어주면 해결된다.

 

느낀점

처음에 setupProxy.js 동작하기까지의 코드 까지 찾아볼까 그냥 넘어갈까 고민했다.

괜한 시간낭비 일것 같아서

 

근데 하나하나 파고들다보니 나름 배운점도 있고 재미있었던것 같다.

 

내가 찾은 내용이 맞는건지도 정확히 모르겠어서 시간될때 공식문서?를 한번 찾아봐야 할 것 같다. 

 

GPT를 너무 많이 사용하는 것 같다.