CORS(교차 출처 리소스 공유) 란 무엇일까?

교차 출처 리소스 공유 (Cross-Origin Resource Sharing)

CORS란 한 출처에서 실행중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제 입니다. 

여기서 출처(Origin)는 프로토콜,호스트,포트번호를 기반으로 구분합니다. 즉 프로토콜,호스트,포트번호가 동일하다면 이는 동일한출처(Same-Origin) 입니다.

 

교차출처 예시 : https://domain-a.com 의 프론트 엔드 자바스크립트 코드가 https://domain-b.com/data.json 을 요청하는경우

 

보안상의 이유로 브라우저는 프론트엔드측 에서 시작한 HTTP 요청을 제한합니다.

XMLHttpRequest 와 FetchAPI 는 동일 출처 정책(Same-Origin Policy)을 따르기 때문에 웹 애플리케이션은 자신의 출처와 동일한 리소스만 불러올 수 있으며 다른 출처의 리소스를 불러오려면 불러오려면 그 출처에서 올바른 CORS 헤더를 포함한 응답을 반환해야합니다.

 

CORS 작동 방식은 다음과 같습니다.

1. 클라이언트가 다른 출처의 리소스에 접근하는 요청을 보냅니다.
2. 서버는 응답 헤더에 CORS 관련 정보를 포함하여 응답합니다.
3. 클라이언트의 브라우저는 응답을 확인하고, CORS 관련 헤더를 분석하여 요청을 허용할지 여부를 결정합니다.
4. 클라이언트의 브라우저가 요청을 허용하는 경우, 클라이언트는 서버에서 받은 리소스를 사용할 수 있습니다. 그렇지 않은 경우, 클라이언트는 오류를 받게 됩니다.

CORS 는 일반적으로 이럴때 발생합니다!

1. 다른 도메인에서 API를 호출하는경우 
2. 다른 도메인에서 AJAX 요청을 보내는 경우
3. 다른 도메인에서 폰트,이미지,스타일시트 등의 리소스를 가져오는 경우

CORS는 왜 사용하는걸까?

그냥 자유롭게 서로 소통하면 될텐데 왜 사용하는걸까? 이유는 "보안"입니다.

 

SOP 정책이 없을시 해커의 공격방법

1. 사용자가 악성 사이트에 접속한다
2. 이때 해커가 몰래 심어놓은 악의적인 자바스크립트가 실행되어, 사용자가 모르는 사이에 어느 포털 사이트에 요청을 보낸다.
3. 그럼 포털 사이트에서 해당 브라우저의 쿠키를 이용하여 로그인을 하거나 등 상호작용에 따른 개인 정보를 응답 값을 받은뒤, 사이트에서 해커 서버(hacker.example.com)로 재차 보낸다.
4. 이외에도 사용자가 접속중인 내부망의 아이피와 포트를 가져오거나, 해커가 사용자 브라우저를 프록시처럼 악용할 수도 있다.