-
open api를 사용하던 중 cors가 "no"로 제공되는 애들이 있다.
CORS 정책에 의해 막혔다고 나오는 것을 종종 볼 수 있다.
CORS가 뭐고, 어떻게 흘러가는지 알아보자
결론은 무료api기 때문에 CORS가 `no`로 되어있어도 사용 가능하다!
그래서 CORS가 뭔데?
CORS를 이해하기전에 SOP에 대해 이해해야 할 필요가 있다.
SOP(Same Origin Policy) - 같은 출발지 정책
CORS (Cross Origin Resource Sharing)
SOP방식
SOP방식은 이미지로 쉽게 설명하자면 다음 브라우저와 다음 백엔드 컴퓨터만 사용 가능하다.
즉, 다른 브라우저들은(네이버 구글)등 다음의 백엔드 컴퓨터를 사용할 수 없다. (유연하게 사용할 수 없다)
같은 회사의 백엔드 컴퓨터만 접속할 수 있다고 생각하면 된다.
CORS방식
하지만 CORS방식을 보면, 다음 백엔드 컴퓨터에서 CORS방식을 허용하고, CORS에 네이버를 들어올 수 있도록 넣으면
네이버 브라우저에서는 다음 백엔드 컴퓨터에 접속할 수 있다.
먼저 `Preflight`를 보내면 다음 백엔드 컴퓨터에서는 get, post, cors가 ok라고 응답이 오면
내가 다시 원하는 내용(get, post)로 요청을 보낼 수 있다.
여기서 다음 백엔드 컴퓨터에서 CORS를 금지 설정을 해버리면,
네이버 브라우저는 다음 백엔드 컴퓨터를 들어갈 수 없다.
`Preflight`는 미리 너네 컴퓨터 접속할거야! 하고 미리 먼저 보내는 것이라고 생각하면 된다. (사전요청)
여기서 CORS에서 막아버렸으면, 네이버 브라우저는 다음 백엔드 컴퓨터를 접속할 수 없지만 백엔드 컴퓨터에서 막는것이 아니고,
`브라우저`자체에서 막아버리는 것이다.
브라우저 자체에서 막아버린다고? 그럼 어떻게 해야함?
브라우저 자체에서 막아버렸으니, 우리는 다음 백엔드 컴퓨터로 접속하려면 우회해서 접속하는 방법이 있다.
그럴때 네이버 백엔드 컴퓨터에서 다음 백엔드 컴퓨터에 연결해주는 api를 만들어줘! 하면
네이버 백엔드에서 다음 백엔드 컴퓨터로 들어가는 api를 만들어주고, 우리는 네이버 백엔드 컴퓨터에서 만들어준 api를 사용하면 된다.
이럴때 지칭하는 용어는 `프록시 서버`라고 한다. (프록시는 대리인이야!)
결국 백엔드가 대신 일을 해주고, 프록시 서버를 통해 가져올 수 있다!
여기서 CORS는 브라우저 자체에서 막는 것이기 때문에 모바일앱에서는 접속이 가능하다.
⭐️⭐️⭐️ CORS는 브라우저를 보호하기 위해서 사용한다고 생각하면 된다.
CORS의 순기능
사용자가 로그인을 했다고 가정하고 백엔드 컴퓨터에서는 로그인의 증표를 같이 응답해서 보내준다.
그럼 로그인한 유저는 게시글을 등록, 삭제, 수정 api요청을 해도 로그인 증표와 같이 들어간다고 생각하면 된다. (다음에서 발급받은 증표임)
로그인 증표같은 애들은 필수로 같이 있는 애라고 생각하면 된다!
브라우저에서 로그인하고나서 내가 게시글을 삭제했다고 가정하면, 백엔드 컴퓨터에 같이 게시글삭제와 함께 로그인 증표가 같이 들어간다.
그럼 브라우저에서는 쿠키에 로그인 증표를 저장한다.
그럼 똑같이 생긴 `다은`이라는 해커 사이트가 있다고 가정한다.
로그인해서 다음 사이트를 잘 사용하고 있는데, 내가 실수로 `다은`이라는 사이트를 들어가서 게시글 삭제를 누르거나, 생성할 수 있다.
그러면 결국 쿠키에 로그인 증표가 들어가있고, `엔드포인트`는 같기 때문에 로그인 증표와 함께 보내기 때문에
나도 모르게 다른 사이트지만 요청은 똑같이 들어간다는 것이다.
즉, CORS를 사용하면 CORS에서 허용한 링크만 사용할 수 있어 해킹의 위험을 줄일 수 있다.
해커의 백엔드가 어떻게든 뚫어보려고 백엔드에서 프록시 서버를 만들어서 접속해도,
이미 로그인 증표가 다음에서 받은 내용이기 때문에 증표가 안날라가고,
해커의 백엔드에서는 로그인 증표가 없으니 로그인을 해달라는 요청이 나온다.
결국 프록시 사이트도 안전하고, 브라우저에서도 안전한 것이다.
'📚 이론정리 > JS & TS' 카테고리의 다른 글
이벤트 버블링과 이벤트 캡처링 (0) 2024.09.26 타입스크립트의 유틸리티 타입 (0) 2024.09.20 타입스크립트 제네릭 타입 (0) 2024.09.10 타입스크립트의 as const (0) 2024.03.10 ✏️ 인증, 인가, JWT토큰 (0) 2024.03.09 댓글