인프런 커뮤니티 질문&답변
작성한 질문수
Cross Origin 관련 질문 있습니다.
해결된 질문
24.06.30 21:07 작성
·
146
0
강의명 : S3 액세스 제어-버킷정책, CORS, 액세스포인트. pre-signed URL
에서 4분 22초 부분의 설명 중
왜 정적 웹사이트 https://a.com과 S3 Bucket의 origin이 다른건가요???
S3 Bucket으로 요청을 하는 https://a.com의 프로토콜, 포트번호, 도메인은 모두 Browser의 프로토콜, 포트번호, 도메인 인건가요?
orgin은 프로토콜, 도메인(=호스트), 포트번호 이 3개가 같아야 동일한 것으로 인식을 한다고 하는거 같은데.... 3개 중 뭐가 달라서 오리진이 달라지는 건가요?
답변 2
0
0
2024. 06. 30. 22:03
여기서 질문자님께서 오해하고 계신 것이 정적 웹사이트가 S3 버킷으로 구현되었을거라고 생각하고 있다는 것입니다. 설명에서 예를 들은 https://a.com은 s3 버킷이 아니라 AWS와는 별개로 구현된 웹서버라고 생각해보세요. 즉 브라우저가 S3 버킷이 아닌 다른 웹서버에서 HTML 문서와 Javascript 코드를 로딩하여 실행하고 있고, 브라우저의 자바스크립트 코드가 S3 버킷의 어떤 데이터를 HTTP로 요청해서 다운로드해가는 상황입니다.
정적 웹사이트 기반의 애플리케이션은 React, Vue와 같은 프론트엔드 프레임워크로 개발된 HTML과 javascript 코드만으로 이루어진 애플리케이션입니다. 이런 앱은 브라우저에서 https://a.com과 같은 주소로 요청해 HTML과 Javascript 코드를 받아옵니다. HTML과 Javascript 코드를 받아온 브라우저는 자동으로 오리진이 "https://a.com"으로 설정됩니다. 오리진은 HTML 문서를 받아온 원천지를 의미합니다.
이 상태에서 HTML 문서를 통해 로딩된 Javascript 코드가 다른 오리진의 json 데이터 등(예: s3 버킷 상에 있는 json 데이터)을 http 통신으로 데이터를 요청하여 수신하는 상황이 Cross Origin 상황입니다.
기본적으로 브라우저내에는 SOP(Same Origin Policy)라는 보안 정책이 설정되어 있는데, 이 정책의 내용은 "브라우저 자신의 오리진과 다른 오리진과의 통신을 허용하지 않는다"라는 것입니다. 대신 CORS(Cross Origin Resource Sharing)라는 기법으로 브라우저가 통신하는 다른 오리진의 서버라 할지라도 통신이 가능하도록 데이터를 제공하는 서버측에서 "Access-Control-Allow-Orogin" 이라는 HTTP 헤더를 이용해 통신이 가능하도록 설정할 수 있는데, 이것은 정적 웹사이트를 호스팅하고 있는 서버가 아닌 데이터를 제공하는 서버(영상 속 설명에서는 S3 버킷)에서 설정되어야 합니다.
오리진은 요청 URL의 가장 앞에서 포트번호까지의 문자열입니다.
https://a.com:8080/abc/def 와 같이 요청했다면 "https://a.com:8080" 이 오리진이 됩니다. 자바스크립트로 HTTP 요청을 통해 데이터를 받아가려는 서버의 주소 중 오리진이 브라우저의 오리진 문자열과 단 한 글자라도 다르면 Cross Origin 상황이 됩니다. 즉 프로토콜, 호스트, 포트 번호 중 하나라도 다르면 다른 오리진입니다.