[네트워크] CORS

CORS에 대해 알아보자

CORS란?

• Cross-Origin Resource Sharing : 교차 출처 리소스 공유
• 브라우저에서 현재 다른 출처의 리소스를 공유하는 방법

출처

• origin이라고 함
• 프로토콜(http,https), 도메인(host), 포트 번호가 똑같을 경우 동일 origin이다.
• 브라우저는 동일 출처 정책(SOP : Same Origin Policy)을 준수한다.
  • 현재 사이트의 origin과 요청하는 곳의 origin이 다를 경우 통신을 막음
  • XSS나 CSRF 등의 공격을 방어하기 위함
    • XSS(Cross-Site Scripting) : 클라이언트에 스크립트를 삽입하여 공격
    • CSRF(Cross-Site Request Forgery) : 인증된 사용자 정보를 가로채 다른 사이트에서 사용하는것
  • 외부 리소스를 사용하기 위한 SOP의 예외 조항이 CORS

동작 원리

단순요청 (Simple Request)

• 단순요청의 경우 실제요청과 CORS 판단이 동시에 이루어짐
• 브라우저는 특정조건을 만족할 경우에만 단순요청으로 판단한다
  • HTTP Method : GET, POST, HEAD
  • HTTP Header : Accept, Accept-Language, Content-Language, Content-Type, DPR, Downlink, Save-Data, Viewport-Width, Width
  • Content-Type Header : application/x-www-form-urlencoded, multipart/form-data, text/plain
• Content-Type이 json일 경우 단순요청이 아니므로, Rest API에서 단순요청이 거의 사용되지 않음

1. 클라이언트에서 서버로 요청
   • 브라우저는 Cross-Origin 요청인지 확인하고, 맞다면 Origin 헤더를 추가함
2. 서버는 Origin 헤더를 보고, 허용된 origin인지 판단 후 HTTP 응답에 Access-Control-Allow-Origin 헤더를 담아 보냄
   • 브라우저에서 응답 헤더를 보고 CORS 여부를 판단함

예비요청 (Preflight Request)

• 브라우저에서는 단순요청이 아닌 경우 예비요청을 통해 먼저 CORS를 판단하고 실제 요청을 보냄
  • 예비요청은 OPTIONS 메소드로 보낸다

1. 클라이언트에서 서버로 요청
   • 브라우저는 Cross-Origin 요청인지 확인하고, 맞다면 Origin 헤더를 추가함
   • 허용된 HTTP Method를 확인하기 위해 Access-Control-Request-Method 헤더를 추가함
   • 허용된 헤더를 확인하기 위해 Access-Control-Requset-Headers 헤더를 추가함
2. 서버는 헤더를 보고, 허용 여부를 판단 후 HTTP 응답에 CORS 결과 헤더를 담아 보냄
3. 브라우저에서 응답 헤더를 보고 CORS가 허용되었다면 실제 요청 보냄
4. 서버에서 리소스 응답

정리

• 서버에서하는 CORS 설정은 브라우저의 요청을 허용하기 위한 것이다.
  • 서버에서 CORS 설정에 origin을 제한했다고 해서 모든 요청을 검사하지는 않는다.
  • 브라우저의 요청에만 필수적으로 CORS 허용 관련 헤더가 포함되기에 서버에서 CORS설정을 따로 해주는 것
• 서버와 서버간 통신은 CORS 에러가 발생하지 않는다 (ex. 포스트맨에서는 로컬호스트 서버에서 보내기때문에 발생하지 않음)

참고링크

• https://evan-moon.github.io/2020/05/21/about-cors/