[Network] CORS(Cross Origin Resource Sharing)

채린·2023년 3월 7일

network

CS

목록 보기

2/5

❣️ Intro

CORS error : 한 사이트에서 주소가 다른 서버로 요청을 보낼 때 자주 접하게 되는 오류

보통 Postman 이나 Swagger 에서는 요청이 보내지는데 브라우저에서 CORS error를 볼 때가 많다
이는 브라우저에서 막고 있기 때문인데 왜 막고 있을까? 브라우저에서 막지 않으면 발생할 문제들에 대해 알아보자
- 우리가 보통 어떤 사이트에 로그인을 하면 다음에 접속했을 때 다시 아이디와 비밀번호를 입력할 필요가 없도록 로그인이 유지되고 있는 경우가 많음 (내 브라우저에 토큰 등의 정보가 쿠키로 저장이 돼서 로그인 했던 사이트에 접속할 때 요청에다가 실어보내면 그 사이트에서 이 쿠키를 보고 내가 거기에 로그인이 돼있다고 판단을 함)
- 즉, 사이트에 로그인을 하고 그 상태가 유지되고 있다는 건 내가 그 사이트에 접속하거나 API 요청 등을 보낼 때마다, 해당 요청들이 나에게로 왔음을 증명하기 위해 같이 보내지는 이 인증정보가 브라우저에 저장이 되어있다는 것임
- 만약, 그 사이트에서 사용자들의 정보를 빼내기 위해서 다른 사이트를 만들었다고 생각해보자. 예를 들면, 사용자들에게 링크가 담긴 메일을 보내거나 그럴듯한 게시물로 유인하거나 해서 자신들의 사이트에 접속하도록 유도함
- 즉, 내 의지와는 상관없이 브라우저에 저장된 내 정보들을 가지고 악의적인 일을 할 수 있음

다른 출처간의 리소스 공유를 막고 있는 건 SOP, 풀어주는 걸 CORS 라고 함

❓ Origin

Protocol + Host + Port Number(:80, :443) => 출처(Origin)
Port Number는 생략 가능함

❓ Sop (Same Origin Policy)

동일 출처라는 건 말 그대로 동일한 출처,URL 끼리만 API 등의 데이터 접근이 가능하도록 막는 것이고 개발자도구에 오류가 뜨는 건 '이게 되게 하려면 CORS란 걸 허용해주던가 해라' 라는 뜻

즉, CORS 정책을 지킨 리소스 요청에 대해 예외 조항을 두고 허용하기로 한 것임
간단하게는 응답의 Access-Control-Allow-Origin 헤더와 자신의 출처가 같다면 유효하고 안전한 응답이라고 판단되어 리소스에 접근할 수 있다.

동일 출처의 반대 개념 (다른 출처간에 리소스를 공유할 수 있도록 하는 걸 말함) -> 원래 다른 출처간의 요청을 주고받는건 안 되는게 기본값임
CORS를 위반하더라도 서버는 정상적으로 응답, 응답의 파기 여부는 브라우저가 결정함
출처는 보내고 받는 각각의 위치 - 즉, 웹사이트랑 API의 주소, 리소스는 주고 받아지는 데이터라고 생각하면 됨
요청을 받는 백엔드쪽에서 이걸 허락할 다른 출처들을 미리 명시해두면 됨 (Access-Control-Origin 헤더에 알맞은 값을 세팅해주면 해결할 수 있음)
브라우저는 다른 출처끼리의 요청이 보내질 때는 요청에 Origin이라는 header를 추가함, header는 데이터가 다른 곳으로 전송될 때 데이터의 맨 앞쪽에 붙은 보충 정보라고 보면 됨 (받는 쪽의 IP 주소, 사용할 프로토콜이나 옵션 등이 담김), 이 header의 origin 항목에는 요청하는쪽의 scheme 와 도메인, 포트가 담김