CORS (Cross Origin Resource Sharing)

KIMA·2022년 12월 4일
1

security

목록 보기
1/1
post-thumbnail

CORS가 나타난 이유 : SOP(Same-Origin Policy, 동일 출처 정책)

한 사이트에서 주소가 다른 서버로부터 API로 정보를 받아오기 위해 프론트(브라우저)에서 HTTP 요청을 보냈을 때, 미리 CORS 설정을 해주지 않으면 SOP로 인해 브라우저가 받아올 정보를 막아버린다.
이때, 이러한 문제를 해결해주는 것이 CORS이다.

💡 SOP(Same-Origin Policy, 동일 출처 정책)
: 다른 출처의 리소스를 사용하는 것에 제한 하는 보안 방식이다.

  • 출처 : URL의 Protocol, Host, Port
  • 다음의 악용 사례를 막기위해 SOP가 필요하다.
    1. 사용자는 페이스북 로그인을 통해 토큰을 얻어온다.
    2. 해커가 메일을 통해 피싱 사이트 접속을 유도한다.
      • 피싱 사이트의 스크립트에는 사용자의 토큰을 불러와 페이스북에 게시글을 등록하는 코드가 있다.
    3. 사용자가 피싱 사이트에 접속한다.
    4. 피싱 사이트에선 사용자의 토큰으로 페이스북에 로그인을 시도한다.
    5. 페이스북에선 origin(피싱 사이트 =/= 페이스북)이 다르므로 SOP를 통해 요청을 제한한다.
  • 위의 사례가 존재하기 때문에 Postman이나 스프링 같은 백엔드에서 API로 HTTP 요청을 보내면 정보를 잘 받아오고 프론트(브라우저)에서 요청을 보낼때만 SOP로 제한한다.

CORS(Cross Origin Resource Sharing)란?

추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 어플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다.

  • 출처 : URL의 Protocol, Host, Port

CORS 접근 제어 시나리오

  • 단순 요청 (Simple Request) : GET, POST, HEAD Request Method로 요청
    1. 바로 GET, POST, HEAD 요청을 보낸다.
    2. 이 요청은 CORS 설정에 따라 허용될 수도 허용이 안될 수도 있다.
  • 프리플라이트 요청 (Preflight Request) : UPDATEDELETE 같은 서버의 상태가 변경되는 요청
    • 만약 CORS 에러가 발생한다면 클라이언트는 서버의 상태가 변경된 후 해당 사실을 인지하므로 실제 요청을 보내기 전에 요청 가능 유무를 확인하는 사전 요청을 먼저 보낸다.
    1. OPTIONS Request Method를 통해 다른 도메인의 리소스에 요청이 가능한 지 확인한다.
    2. 요청이 가능하다면 UPDATEDELETE 같은 실제 요청을 보낸다.
  • 인증정보 포함 요청 (Credentialed Request) : 인증 관련 헤더를 포함하는 요청
    • 서버측에서 Access-Control-Allow-Origin*로 설정하면 안된다.
    • 반드시 특정 origin을 등록해줘야 한다.
    • Access-Control-Allow-Credentials 또한 true로 설정한다.

CORS 설정 방법

  • 서버에 CORS 설정을 추가한다.
    • 특정 URL로 요청이 들어왔을 때 요청을 허용할 origin URL와 Request Method를 추가한다.

Reference
웹개발 짜증유발자! CORS가 뭔가요?
[10분 테코톡] 나봄의 CORS

profile
안녕하세요.

0개의 댓글