CORS 정리
CORS란?
주소가 (A닷컴인) 웹사이트에서 URL이 (B닷컴인 서비스에) API로 정보를 받아오기 위해
프론트에서 HTTP 요청을 보냈을 때 미리 어떤 설정을 해주지 않으면 CORS 문제로 막히게 됨
이것은 즉 브라우저, 프론트엔드에서 일어나는 문제임
(A닷컴을 못믿어서)
만약 good 닷컴이 있고, 내가 거기에 로그인을 하면 보통 자동으로 저장되는 경우가 많음
이것은 내 브라우저의 토큰 등의 정보가 쿠키로 저장이 되어
로그인 했던 사이트에 접속할 때 요청에 실어보내면
그 사이트에서 쿠키를 보고 로그인이 되어있다 판단하는 것
그런데 누군가 bad 닷컴을 만들어 접속하도록 유인해 들어가면
그들이 만든 html, css, js 코드가 들어오는 것
그래서 good 닷컴으로부터 개인정보를 조회하는 요청에
크롬에 저장된 good 닷컴 토큰을 실어 good 닷컴에 보낸 후
그걸로 탈취한 정보를 bad 닷컴 서버로 보낼 수 있음
= 내 의지와 상관 없이 내 브라우저에 저장된 내 정보를 탈취할 수 있고,
다른 api에 무슨 짓을 할지 모르기 때문에 브라우저가 방지하고 있는 것
정확히는 이걸 막는 건 SOP가 막는 것이고, CORS는 이걸 풀어주는 역할임
SOP는 동일 출처 정책인데, 말 그대로 동일 출처, URL끼리만 API 등의 데이터 접근이 가능하도록 막는 것이고
개발자 도구에 오류가 뜨는 건 CORS를 허용해주든가 해라 라는 의미
CORS는 동일 출처의 반대 개념으로, 다른 출처 간의 리소스를 공유할 수 있도록 하는 것
출처(보내고 받는 각각의 위치 -> 웹사이트, API 주소를 말함)
리소스(주고 받아지는 데이터)
= 내가 만든 A 닷컴과 네이버 지도 API, 이 서로 다른 출처끼리 정보 요청과 반환이 가능하도록 하는 게 CORS임
서로 다른 출처끼리 데이터를 주고 받는 건 애초에 금지가 기본값.
근데 이걸 되게 하려고 CORS라는 것을 만듦
이걸 우회해서 사용했었는데 어떤 기준을 충족시키는 것을 조건으로 공식적으로 풀어준 것
= 요청을 받는 백엔드 쪽에서 이걸 허락할 다른 출처들을 미리 명시해두면 됨
허용할 사이트(A닷컴)을 적어주면 됨
이제 A닷컴에서 네이버 지도 API로 요청을 보내면 다른 출처로의 요청이니 cross - origin 요청인 것
브라우저는 이처럼 다른 출처끼리의 요청이 보내질 때는 요청에 origin이라는 헤더를 추가함
(헤더 -> 데이터가 다른 곳으로 전송될 때 데이터의 맨 앞쪽에 붙는 보충 정보라고 보면 됨
이 헤더에는 요청하는 쪽의 scheme과 도메인, 포트가 담김)
(scheme -> 요청한 자원에 접근할 방법 (http, ftp, telent 등을 말함 = 프로토콜))
= 이 요청을 받은 네이버 지도 api 서버는 답장의 헤더에 지정된 access-control-allow-origin 정보를 실어 보냄
그럼 크롬이 이 둘을 비교해 origin에서 보낸 출처값이 서버의 답장 헤더에 담긴 access-control-allow-origin에 똑같이 있으면 안전한 요청으로 간주
* 사용자 식별 정보가 담긴 요청에 대해서는 보다 엄격
정리
cors에서 요청들은 두 종류임
1. 심플 리퀘스트
= 요청을 다 보냄, 통과 못하면 답장 못함
2. 프리 플라이티드
= 요청 보낼 때도 허락을 받아야 함
출처