ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • CORS 정리
    ETC 2024. 10. 6. 23:18

    CORS에 대한 사전 지식

    CORS에 대해 서술하기 전에 사전에 알아둬야 할 내용을 정리해봤습니다.

    CORS 란?

    CORS(Cross-Origin Resource Sharing)로 한국어로 해석하면 "교차 출처 자원 공유"입니다.
    의미를 풀자면 서버가 다른 출처로 부터의 접근을 허용하거나 제한하는 HTTP 기반 보안 정책입니다.

    CORS가 생긴 이유

    해킹 기법중 하나인 XSS(Cross Site Scripting)과 CSRF(Cross Site Request Forgery)라는 공격과 관련이 있습니다.
    XSS와 CSRF 공격을 막기 위해 SOP(Same Origin Policy)라는 정책이 브라우저에 적용이 되었는데
    이로 인해 서버 <-x-> 클라이언트(브라우저) 통신이 불가능하자 이 문제를 해결하기 위해 CORS가 생겨난 것입니다.

    SOP란 "동일 출처 정책"으로 똑같은 Origin(Host)의 리소스만 사용하는 정책입니다.

    CORS의 동작 원리

    리소스의 출처 검증

    CORS는 Origin(출처)의 프로토콜, 도메인, 포트를 검증합니다.
    {프로토콜}://{도메인}:{포트}로 URL이 구성되어 있는데
    브라우저가 https://www.naver.com에 있을 때 https://api.cat.com 으로 요청을 보낼 경우 CORS 제한이 발생합니다.

    예시

    • 도메인이 다를 때 cat.com -> dog.com
    • 서브 도메인이 다를 때 cat.com -> big.cat.com
    • 포트가 다를 때 cat.com -> cat.com:8080
    • 프로토콜이 다를 때 http://cat.com -> https://cat.com

    CORS With Preflight

    CORS는 크게 두 가지로 나누면 Simple Request와 Preflighted Request가 존재합니다.
    하지만 Credentialed Request도 존재하는데 일단, 앞서 언급한 두 요청의 차이를 먼저 정리하면 다음과 같습니다.

    Simple Request

    • HTTP Method가 GET, HEAD, POST 일 떄
      • Post의 경우에는 Origin 이란 헤더가 필요합니다.
    • Header가 아래 외의 값이 없을 때
      • Accept
      • Accept-Language
      • Content-Language
      • Content-Type
      • Range
    • Content-type이 다음과 같을 때
      • text/plain
      • multipart/form-data
      • application/x-www-form-urlencoded

    Preflighted Request

    Simple Request를 정의 한 내용 외의 모든 요청은 Preflighted Request로 진행됩니다.

    Preflighted 란?

    실제로 HTTP 요청을 보내기 전에 서버의 CORS 설정을 확인하기 위해
    HTTP Method 중에 Options 라는 Method를 사용해서 사전에 다른 서비스에 요청을 보냅니다.
    이후 CORS 정책에 적합하다면 실제 요청을 전송하게 됩니다.

    preflight request


    말로만 하기엔 이해가 어렵기에 시퀀스 다이어그램 이미지를 넣어봤습니다.

    Credentialed Request

    이는 브라우저에서 서버에게 Credential 값을 담아 요청을 할 때 사용됩니다.

    여기서 Credential 값이란 쿠키, 토큰 등의 자격 인증 정보를 말합니다.

    알아둬야 할 부분

    CORS 관련 HTTP 헤더 종류

    • Access-Control-Allow-Origin
    • Access-Control-Request-Methods
    • Access-Control-Allow-Headers
    • Access-Control-Max-Age
    • Access-Control-Allow-Credentials
    • Access-Control-Expose-Headers

    Access-Control-Allow-Origin 값을 설정하기 귀찮아서 가끔 와일드카드("*")로 퉁치는 경우가 있는데 실제 운영 환경에서는 꼭 개별 값으로 설정하길 권장합니다.

    Server to Server

    "서버와 서버간에 HTTP 통신을 하게 될 경우에도 CORS가 필요한가요?"
    -> X
    CORS는 브라우저의 SOP 정책을 유연하게 하기 위한 정책으로
    브라우저가 아닌 서버와 서버간의 HTTP 통신에는 SOP 정책이 적용되지 않으므로 필요 없습니다.

    "Eureka Client 끼리 통신할 때 CORS를 설정해줘야 하는가?" 갑자기 지식에 혼동이 와서 CORS에 대해 정리 해봤습니다.


    참고 자료:

    https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

    https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-CORS-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95-%F0%9F%91%8F

    댓글

Designed by black7375.