Cors

이진석·2022년 10월 24일
0

Cors란?

브라우저에서는 보안상의 이유로 Cross-Origin HTTP 요청들을 제한한다. 이러한 제한된 요청들은 서버의 동의가 있을 경우 허락되는데 이러한 매커니즘을 CORS라고 한다

Cross-Orgin
cross-origin 이란 다음 중 한가지라도 다른 경우를 말한다.

  • 프로토콜 (ex) http와 https)
  • 도메인
  • 포트 번호

Cors의 필요성

Cors가 없이 모든 곳에서 데이터를 요청 할 수 있다면 다른 사이트에서 기존 사이트를 흉내 낼 수 있게 되고 이를 이용해 사용자를 속여 악의적으로 정보를 탈취하는 등의 공격을 할 수 있다. 이러한 공격에 대해서 브라우저를 보호하고 필요한 경우에만 서버와 협의하여 요청 할 수 있도록 하기 위해 필요하다.

Cors의 동작

Simple request인 경우

  1. 서버로 요청을 한다.
  2. 서버의 응답이 왔을 때 브라우저가 요청한 Origin과 응답한 헤더의 값을 비교하여 유효한 요청이라면 응답하고 유효하지 않으면 브라우저가 이를 막고 에러가 발생.

Simple Request

  • HTTP method가 다음 중 하나이면서 (GET, HEAD, POST)
  • 자동으로 설정되는 헤더는 제외하고, 설정 할 수 있는 다음 헤더들만 변경하면서 (Accept, Accept-Language, Content-Language)
  • Content-Type이 다음과 같은 경우 (application/x-www-form-urlencoded, mulipart/form-data, text/plain)

이러한 요청들은 추가적으로 확인하지 않고 바로 본 요청을 보낸다.

preflight

Simple requests가 아닌 cross-origin 요청은 모두 preflight 요청을 하게 되는데, 실제 요청을 보내는 것이 안전한지 확인하기 위해 먼저 OPTIONS 메소드를 사용하여 cross-origin HTTP 요청을 보낸다.

요청 헤더 목록

  • Origin
  • Access-Control-Request-Method
    • preflight 요청을 할 때 실제 요청에서 어떤 메소드를 사용 할 것인지 서버에 알리기 위해 사용
  • Access-Control-Request-Headers
    • 요청을 할 때 실제 요청에서 어떤 header를 사용 할 것인지 서버에게 알리기 위해 사용

응답 헤더 목록

  • Access-Control-Allow-Origin
    • 브라우저가 해당 origin이 자원에 접근할 수 있도록 허용합니다. 혹은 *은 credentials이 없는 요청에 한해서 모든 origin에서 접근이 가능하도록 허용합니다.
  • Access-Control-Expose-Headers
    • 브라우저가 액세스할 수 있는 서버 화이트리스트 헤더를 허용합니다.
  • Access-Control-Max-Age
    • 얼마나 오랫동안 preflight요청이 캐싱 될 수 있는지를 나타낸다.
  • Access-Control-Allow-Credentials
    • Credentials가 true 일 때 요청에 대한 응답이 노출될 수 있는지를 나타냅니다.
    • preflight요청에 대한 응답의 일부로 사용되는 경우 실제 자격 증명을 사용하여 실제 요청을 수행할 수 있는지를 나타냅니다.
    • 간단한 GET 요청은 preflight되지 않으므로 자격 증명이 있는 리소스를 요청하면 헤더가 리소스와 함께 반환되지 않으면 브라우저에서 응답을 무시하고 웹 콘텐츠로 반환하지 않습니다.
  • Access-Control-Allow-Methods
    • preflight 요청에 대한 대한 응답으로 허용되는 메서드들을 나타냅니다.
  • Access-Control-Allow-Headers
    • preflight요청에 대한 대한 응답으로 실제 요청 시 사용할 수 있는 HTTP 헤더를 나타냅니다.
profile
고양이 두마리의 집사이자 행복 코딩을 추구하는 주니어 개발자입니다!

0개의 댓글