cornerstone 관련오류 SharedArrayBuffer is NOT supported in your browser 해결

코너스톤이 로컬에서는 잘 되는데 

AWS cloudfront + s3 으로 배포하니까 아래처럼 뜬다. 

 

SharedArrayBuffer is NOT supported in your browser see https://developer.chrome.com/blog/enabling-shared-array-buffer/

 

알고 보니 AWS 클라우드프론트 설정을 해줘야 하는거였다. 

 

 

 

이 오류는 AWS CloudFront와 S3로 배포한 후 브라우저에서 SharedArrayBuffer가 지원되지 않아 발생하는 문제입니다. 이는 CloudFront와 같은 콘텐츠 전송 네트워크(CDN)를 통해 콘텐츠를 제공할 때 적용되는 보안 제한 때문입니다.


SharedArrayBuffer
는 보안상의 이유로 현대 브라우저에서 안전한 컨텍스트(HTTPS)와 위에서 언급한 특정 헤더가 필요하다는 점을 기억하세요.

 

 

 

 

해결방법:

AWS S3와 CloudFront를 사용하는 프로덕션 환경에서

Cross-Origin-Opener-Policy와

Cross-Origin-Embedder-Policy 헤더를 설정해야 한다.

 

 

CloudFront에서 이 헤더를 설정하는 방법:

a. CloudFront 콘솔로 이동합니다.

b. 왼쪽 사이드바에서 "정책"을 클릭합니다.

c. "응답 헤더 정책 생성"을 클릭합니다.

d. 위에서 언급한 두 헤더를 추가합니다.

e. 이 정책을 CloudFront 배포에 연결합니다.

 

 

 

S3 버킷 설정

 

S3를 오리진으로 사용하는 경우,

S3 버킷에 CORS(Cross-Origin Resource Sharing) 구성을 설정해야 한다.

 

 

• AWS 관리 콘솔에 로그인합니다.
• S3 서비스로 이동합니다.
• CORS를 설정하려는 버킷을 선택합니다.
• "권한" 탭을 클릭합니다.
•  

 

 

• 아래로 스크롤하여 "CORS(Cross-origin resource sharing)" 섹션을 찾습니다.
• "편집" 버튼을 클릭합니다.

[
        {
            "AllowedOrigins": ["*"],
            "AllowedMethods": ["GET", "HEAD"],
            "AllowedHeaders": ["*"],
            "ExposeHeaders": ["Access-Control-Allow-Origin"]
        }
    ]

 

 

 

---

Cross-Origin Isolated 환경은 웹 애플리케이션이 특정 보안 요구사항을 충족했을 때 활성화되는 특별한 실행 컨텍스트입니다. 이 환경에서는 일반적으로 제한되는 몇 가지 강력한 기능(예: SharedArrayBuffer, 고정밀 타이머 등)을 사용할 수 있게 됩니다.

 

Cross-Origin Isolated 환경의 주요 특징:

1. 보안 강화: 다른 출처(origin)와의 상호작용을 제한하여 잠재적인 보안 위협을 줄입니다.
2. 특별한 기능 접근: SharedArrayBuffer와 같은 강력하지만 잠재적으로 위험할 수 있는 API에 대한 접근을 허용합니다.
3. 격리된 실행: 웹 페이지와 그 안에 포함된 프레임들이 서로 완전히 격리되어 실행됩니다.

Cross-Origin Isolated 환경을 활성화하기 위해서는 다음과 같은 HTTP 헤더를 설정해야 합니다:

1. Cross-Origin-Opener-Policy: same-origin
2. Cross-Origin-Embedder-Policy: require-corp

이 헤더들의 의미는 다음과 같습니다:

• Cross-Origin-Opener-Policy: same-origin: 같은 출처의 문서만 창(window)에 접근할 수 있도록 합니다.
• Cross-Origin-Embedder-Policy: require-corp: 모든 리소스(이미지, 스크립트 등)가 명시적으로 로드를 허용하지 않는 한 로드되지 않도록 합니다.

이러한 헤더는 서버 측에서 설정해야 합니다.

---

CloudFront에서 헤더를 설정하는 단계

 

• AWS Management Console에 로그인합니다.
• CloudFront 서비스로 이동합니다.
• "Policies" 섹션으로 이동하여 "Response headers policies"를 선택합니다.
• "Create response headers policy( 응답 헤더 정책 생성 )"를 클릭합니다.
• 정책 이름을 입력합니다 (예: "COOP-COEP-Headers").

 

• "Add header"를 클릭하고 다음 헤더를 추가합니다:
  • 헤더 이름: Cross-Origin-Opener-Policy
  • 값: same-origin
  • 헤더 이름: Cross-Origin-Embedder-Policy
  • 값: require-corp

 

 

• "Create policy"를 클릭하여 정책을 생성합니다.
• 생성된 정책을 CloudFront 배포에 연결합니다:
• CloudFront 배포 목록으로 이동합니다.
• 해당 배포를 선택하고 "Edit( 편집 )" 버튼을 클릭합니다. 
• "Behaviors( 동작 )" 탭으로 이동합니다.
• 기본 행동(Default (*) behavior)을 선택하고 "Edit"(편집)를 클릭합니다.

 

 

• "Response headers policy" 섹션에서 방금 생성한 정책을 선택합니다.
• "Save changes"를 클릭하여 변경사항을 저장합니다.