본문 바로가기

언어(JS,TS)/그룹스터디

그룹스터디 [보안 : CORS란?]

CORS

Cross-Origin Resource Sharing(CORS)은 추가적인 HTTP header를 사용해서

한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는

권한을 부여하도록 브라우저에 알려주는 체제입니다.

즉, 브라우저는 SOP(동일 출처 정책)에 의해 기본적으로 다른 출처의 리소스 공유를 막지만,

CORS를 사용하면 접근 권한을 얻을 수 있게 되는 것입니다.

 

CORS 동작 방식

CORS의 동작 방식은 크게 세가지로

심플 리퀘스트프리플라이트 요청, 인증정보를 포함한 요청이 있습니다.

프리플라이트 요청

프리플라이트 요청은 실제 요청을 보내기 전, OPTIONS 메소드로 사전 요청을 보내

해당 출처 리소스에 접근 권한이 있는지부터 확인하는 것을 말합니다.

심플 리퀘스트

심플 리퀘스트의 경우 간단한 요청임을 확인할 수 있는 특정 조건이 만족되면

프리플라이트 요청을 생략하고 요청을 보내는 것을 말합니다.

인증정보를 포함한 요청

인증정보를 포함한 요청은 요청 헤더에 인증 정보를 담아 보내는 요청입니다.

출처가 다를 경우에는 별도의 설정을 하지 않으면 쿠키를 보낼 수 없습니다. 민감한 정보이기 때문입니다.

이 경우에는 프론트, 서버 양측 모두 CORS 설정이 필요합니다.

 

CORS 설정

CORS를 설정하려면 직접 Access로 시작하는 CORS 관련 헤더를 설정하거나 express를 이용하여 서버를 구축하는 경우

cors 미들웨어를 사용하여 CORS 설정을 적용할 수 있습니다.

 

 

HTTP 요청에서 Origin 헤더를 통해 cross-site 접근 요청이 가능하며 HTTP 응답에서 Access-Control-Allow-Origin 헤더를 통해 다른 출처의 접근을 허용할 수 있습니다.