TIL98. HTTP : CORS 란?

🌈 CORS 란?

🔥 Origin(출처) 란?

🔥 동일 출처 정책(SOP)

🔥 교차 출처 자원 공유(CORS)

🔥 CORS 시나리오

1. Origin(출처) 란?

🤔 같은 출처란 무엇일까?

✔️ 같은 출처(same origin)은 프로토콜, 호스트, 포트가 일치할 때는 의미하고 이 판단은 클라이언트나 서버가 아닌, 브라우저에서 판단한다.

✔️ RFC 표준에서 HTTPS나 HTTP 프로토콜에서는 포트 생략이 가능하지만, 이 또한 불일치하면 같은 출처로 인정되지 않는다.

✔️ 예를 들어, 아래 1번은 같은 origin이지만, 2번은 다른 origin이다. 프로토콜이 다르기 때문이다.

1. "https://jaewon.com/products" == "https://jaewon.com/rooms/1"
2. "https://jaewon.com/products" != "http://jaewon.com/products"

✔️ 해당 페이지에 대한 origin은 브라우저 console창에 아래 명령어를 통해 확인 가능하다.

$ console.log(location.origin)

🤔 같은 출처를 어떻게 확인할까?

✔️ 클라이언트에서 request를 보내면, header에 origin에 출처를 담아 보내고, 서버에서 response를 줄 때, Access-Control-Allow-Origin라는 header의 필드값에 origin을 담아 보낸다.

✔️ 이 때, request의 origin 값과 response의 Access-Control-Allow-Origin의 값이 일치하면 같은 출처라고 브라우저가 인식할 수 있다.

2. 동일 출처 정책(SOP)

🤔 동일 출처 정책(Same-Origin Policy)

✔️ SOP는 어떤 출처(origin)에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용 하는 것을 제한하는 중요한 보안 방식이다.

✔️ 즉, SOP는 동일한 출처의 origin만 리소스를 공유할 수 있도록하는 보안 정책으로 이 정책을 지키면 XSS나 XSRF 등의 보안 취약점을 방어할 수 있다.

• XSS(Cross Site Scription, 사이트 간 스크립팅) : 관리자가 아닌 권한이 없는 사용자가 웹 사이트에 스크립트를 삽입하는 공격 행위

• XSRF(Cross Site Request Forgery, 사이트 간 요청 위조) : 사용자가 자신의 의지와는 무관하게 공격자가 이도한 행위(수정, 삭제, 등록 등)를 웹사이트에 요청하게하는 공격 행위

✔️ 단, SOP 때문에 외부 리소스를 가져오지 못하는 불편이 발생한다. 이에 많은 개발자들이 JONP, Reverse Proxy, Flash Socker 등 우회하는 방법을 만들었지만 Cross Domain 이슈를 해결하는 표준의 필요성이 커지게 되었다.

✔️ 이에 W3C의 권장사항으로 CORS 정책을 발표하게 된다.

3. 교차 출처 자원 공유(CORS)

🤔 Cross-Origin Resource Sharing

✔️ CORS는 웹 브라우저에서 외부 도메인 서버와 통신하기 위한 방식을 표준화한 정책이다.

✔️ 이 정책에 의거해서 서버와 클라이언트가 정해진 헤더를 통해 서로 요청이나 응답에 반응할지, 웹브라우저에 의해 평가되고 결정된다.

✔️ 즉, 같은 출처가 아니더라도, CORS 정책에 의해 통신할 수 있게 되었다.

2. CORS 시나리오

🤔 Preflight Request

✔️ Preflight Request는 본 요청 이전에 이뤄지는 예비 요청 개념이다. 이 사전 요청은 OPTIONS라는 매서드를 통해 이뤄진다.

✔️ 이 예비 요청에서 request의 origin값과 response의 Access-Control-Allow-Origin이 일치하면, 브라우저에서는 같은 출처라 인식해서 본 요청을 보내게 된다.

✔️ 이에 브라우저는 같은 출처라 인식하게 되면 CORS 정책에 위반되지 않았다 판단하고, 본 요청에 제대로된 응답을 받을 수 있게 된다.

✔️ 만일 예비 요청에서 origin값과 Access-Control-Allow-Origin값이 불일치하다면 본 요청은 이뤄지지 않는다.

🤔 Simple Request

✔️ Simple Request는 Preflight Request 요청이 별도로 존재하지 않고, Simple Request 때 모두 포함되어있는 개념이다.

✔️ 이 또한 origin과 Access-Control-Allow-Origin을 비교해서 동일 출처인지 브라우저를 통해 판단되고 동일할 경우, 요청에 대한 응답을 처리한다.

✔️ 단, Simple Request는 HEAD, GET, POST 중 하나의 메서드 일 때만 사용가능하고, 사용할 수 있는 header의 종류가 제한적이다. 특히, Content-Type으로 application/json을 사용할 수 없다.

🤔 Credentialed Request

✔️ Credentialed Request는 보다 보안을 강화시킨 방식으로 쿠기를 담기 위해 옵션이다. 이 옵션으로 same-origin(기본값), include, omit을 줄 수 있다.

✔️ same-origin은 같은 출처 간 요청에만 인증 정보를 담겠다는 옵션 값이고, include는 모든 요청에 인증 정보를 담을 때 사용한다. omit은 모든 요청에 인증 정보를 담지 않을 때 사용한다.

✔️ 참고로 위 옵션값들은 fetch를 줄 때, 사용하는 옵션이다.

fetch('https://jaewon.com/products/1', { credentials: 'include'})

✔️ 단, Access-Control-Allow-Origin에 *을 사용할 수 없고, 명시적인 URL을 지정해야 한다. 또한 응답 header에 Access-Control-Allow-Credentails:true가 존재해야 한다.