[웹] cors, Cross-origin resource sharing

📌 cors 란?

Cross-origin resource sharing, 교차 출처 리소스 공유 정책

 

cors 개념

- 보안상의 이유로 브라우저들이 다른 도메인에 요청 보내는 것을 제한함

- 웹 애플리케이션은 보안상의 이유로 자신의 출처와 동일한 리소스만 불러올 수 있음

- 다른 출처의 리소스를 불러오려면 그 출처에서 올바른 cors 헤더를 포함한 응답을 반환

 

 

 

📌 출처란 무엇인가?

origin 출처

- 포트번호는 생략되어있지만, 일반적으로 포트번호까지 모두 일치해야 같은 출처라고 인정(ex.https://google.com:443)

- 같은 출처 규칙 : SOP(Same-Origin Policy)

- 웹 특성 상 위 규칙을 지키기 어렵다면, cors(교차 출처 리소스 공유)라도 지키자

 

 

📌 cors 정책

- 브라우저에서 작동, 서버는 cors를 위반하더라도 정상적으로 응답한다

 

[동작과정 - 서로 다른 출처를 가진 리소스를 사용할 수 있게 되는 과정] 

1. 클라이언트에서 다른 출처의 리소스를 요청할 때 http 프로토콜을 사용하여 요청

2. 브라우저는 요청 헤더에 origin이라는 필드에 요청을 보내는 출처를 담아 보냄

3. 서버가 요청에 응답할 때 응답헤더의 Access-Control-Allow-Origin 값에 '리소스를 접근하는 것이 허용된 출처' 를 담아서 응답

4. 브라우저는 자신이 보냈던 요청의 origin과 서버가 보내준 응답의 Access-Control-Allow-Origin을 비교후 유효 응답인지 아닌지를 결정

 

[동작방식1 - Preflight Request]

- 가장 일반적

- 브라우저가 요청을 예비요청(Preflight)과 본 요청으로 나누어서 서버로 보냄

- 예비 요청에는 OPTIONS 메소드가 사용

- 예비 요청으로 본 요청 전에 브라우저 스스로 예비 요청의 안전성을 확인

- 예비 요청에서 브라우저는 Access-Control-Request-Headers를 사용해서 본 요청에서 사용할 헤더(ex. content type)를 미리 알려주거나, Access-Control-Request-Method에서 사용할 메소드를 미리 서버에 알려줌

- 응답 헤더에 유효한 Access-Control-Allow-Origin이 존재해야 cors 정책에 위반되지 않는 것, 요청의 성공 여부와 관련 없음

Preflight Request

 

 

[동작방식2 - Simple Request]

- 예비요청이 없음

- 단, 예비요청이 없기 위한 조건이 있음(공식 mdn 참고)

Simple Request

 

[동작방식3 - Credentialed Request]

- 요청에 인증 기능 추가

- 다른 출처 간 통신에서 좀 더 보안을 강화하고 싶을 때

- 기본적인 브라우저의 비동기 리소스 요청API인 XMLHttpRequest객체나 fetch API는 별도 옵션 없이 브라우저의 쿠키 정보나 인증과 관련된 헤더를 함부로 요청에 담지 않음
- 인증과 관련된 정보를 담을 수 있게 해주는 옵션이 credentials 옵션

옵션 값	설명
same-origin(디폴트)	같은 출처 간 요청에만 인증 정보를 담을 수 있음
include	모든 요청에 인증 정보를 담을 수 있음
omit	모든 요청에 인증 정보를 담지 않음

- same-origin, include등의 방식을 사용하면 Access-Control-Allow-Origin 뿐만 아니라 더 빡빡하게 인증을 확인

- 브라우저는 인증모드가 include일 경우, 두가지 조건이 더 빡빡하게 추가됨

• 1. Access-Control-Allow-Origin에는 * 를 사용할 수 없음, 명시적이 URL 필요
• 2. 응답 헤더에는 반드시 Access-Control-Allow-Credentials: true 가 존재해야함

 

 

참고

Evans Library, CORS는 왜 이렇게 우리를 힘들게 하는걸까?

https://evan-moon.github.io/2020/05/21/about-cors/#%EC%9A%94%EC%B2%AD%EC%9D%84-img-%ED%83%9C%EA%B7%B8%EC%97%90-%EB%84%A3%EC%9C%BC%EB%A9%B4-%EC%96%B4%EB%96%A8%EA%B9%8C

CORS는 왜 이렇게 우리를 힘들게 하는걸까?