한 사이트에서 주소가 다른 서버로부터 API로 정보를 받아오기 위해 프론트(브라우저)에서 HTTP 요청을 보냈을 때, 미리 CORS 설정을 해주지 않으면 SOP로 인해 브라우저가 받아올 정보를 막아버린다.
이때, 이러한 문제를 해결해주는 것이 CORS이다.
💡 SOP(Same-Origin Policy, 동일 출처 정책)
: 다른 출처의 리소스를 사용하는 것에 제한 하는 보안 방식이다.
- 출처 : URL의
Protocol
,Host
,Port
- 다음의 악용 사례를 막기위해 SOP가 필요하다.
- 사용자는 페이스북 로그인을 통해 토큰을 얻어온다.
- 해커가 메일을 통해 피싱 사이트 접속을 유도한다.
- 피싱 사이트의 스크립트에는 사용자의 토큰을 불러와 페이스북에 게시글을 등록하는 코드가 있다.
- 사용자가 피싱 사이트에 접속한다.
- 피싱 사이트에선 사용자의 토큰으로 페이스북에 로그인을 시도한다.
- 페이스북에선 origin(피싱 사이트 =/= 페이스북)이 다르므로 SOP를 통해 요청을 제한한다.
- 위의 사례가 존재하기 때문에 Postman이나 스프링 같은 백엔드에서 API로 HTTP 요청을 보내면 정보를 잘 받아오고 프론트(브라우저)에서 요청을 보낼때만 SOP로 제한한다.
추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 어플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다.
- 출처 : URL의
Protocol
,Host
,Port
GET
, POST
, HEAD
Request Method로 요청GET
, POST
, HEAD
요청을 보낸다.UPDATE
나 DELETE
같은 서버의 상태가 변경되는 요청OPTIONS
Request Method를 통해 다른 도메인의 리소스에 요청이 가능한 지 확인한다.UPDATE
나 DELETE
같은 실제 요청을 보낸다. Access-Control-Allow-Origin
을 *
로 설정하면 안된다.Access-Control-Allow-Credentials
또한 true
로 설정한다.Reference
웹개발 짜증유발자! CORS가 뭔가요?
[10분 테코톡] 나봄의 CORS