CORS란 무엇일까?
웹 개발을 하면서 항상 많이 보는 오류이면서 잘 몰랐던 부분이다.
우선 CORS를 알기전에 SOP를 먼저 알아보자
SOP란?
SOP란 (Same-Origin Policy) : 다른 출처의 리소스를 사용하는 것에 제한 하는 보안 형식이다.
SOP에서 출처의 의미(Origin=)
출처란 링크로, 동일 출처는 Protocol , Host , Port 3개가 전부 일치해야 동일 출처라고 할 수 있다.
왜 SOP 를 사용하는가?
- 유저가 페이스북에 로그인하여 페이스북 인증 토큰을 받아온다
- 해커가 유저에게 링크 혹은 메일을 보낸다
- 유저가 해커의 링크에 접속하는 순간 링크에 포함되어있는 자바스크립트 코드를 통해 유저의 페이스북 인증 토큰을 이용하여 페이스북의 권한을 사용할 수 있음
위와 같은 상황에서 SOP가 작동하게 된다.
유저가 페이스북에서 접속하게 아닌 다른 외부 링크에서 접속하여 페이스북의 토큰을 사용할 때 페이스북에서는 Origin(출처)를 확인하여 다를 경우 ⇒ Cross-Origin이라 생각하여 스크립트를 실행하지 않는다
그럼 다른 리소스가 필요하다면? ⇒ CORS
어떤 사이트에서 다른 사이트의 리소스가 필요할일이 생기면?
ex) 내가 만든 사이트에서 네이버지도의 리소스가 필요하다. ⇒ CORS 설정을 해줌으로써 다른 사이트에서 네이버 리소스를 사용가능
오늘의 메인인 CORS
CORS의 약자는 Cross-Origin Resource Sharing의 약자로 교차 출처 리소스 공유를 의미한다.
교차 출처 리소스 공유는 추가 HTTP 헤더를 사용하여 Origin에서 실행중인 웹 어플리케이션이 다른 Origin의 선택한 자원에 접근할 수 있는 권한을 브라우져에 알려주는 체제
CORS 접근제어 시나리오
CORS를 이용하는 방법은 3가지종류가 있다.
- 프리플라이트 요청 (Preflight Request)
- 단순 요청 (Simple Request)
- 인증정보 포함 요청 (Credentialed Request)
Prefligth 요청
options method를 통해 본 요청을 보내기 전에 서버에 물어보는 것
⇒ 1. preflight 요청
⇒ 2. fetch 요청
Preflight 는 다음과 같은 단계로 된다.
- Prefligth Request 에 담긴 내용
- origin : 원본 출처 사이트
- Acess-control-Request-Method : 실제 요청 메소드
- Acess-control-Request-Header : 실제 요청 헤더
- Preflight Response 에 대한 답변
- Acess-Control-Allow-Origin : 서버 측 허가 출처
- Acess-Control-Allow-Methods : 서버 측 허가 메소드
- Acess-Control-Allow-Headers : 서버 측 허가 헤더
- Acess-Control-Allow-Max-Age : Preflight 응답 시간
이 이후로는 일반적인 request와 response가 이뤄진다.
Simple Request 요청
Preflight 요청과는 다르게 바로 요청을 보내는것 그 즉시 cross-origin 여부를 확인하는것
Simple Request는 다음과 같은 조건을 무조건 포함하여야한다.
- GET, POST, HEAD 메서드 중 1개
- Content-Type
- application/x-www-form-urlencoded
- multipart/form-data
- text
- Accept, Accept-language, Content-language, Content-Type 만 허용
Simple Request가 있는데 왜 Preflight 를 쓰는가?
CORS를 모르는 서버를 위해서이다.
Credentialed Request
인증 관련 헤더 포함할 때 사용하는 요청이다. ex) cookie , JWT
client에서 담아서 보낼때
CORS 해결하는 방법
- 서버 프록시 이용하여 해결
- cors 라이브러리 이용하여 해결
- 서버에서 처리해줄 것!