CORS에 대해 알아보자 (Cross-Origin Resource Sharing)

CORS (Cross-Origin Resource Sharing)
교차 출처 리소스 공유. 여기서 교차출처는 다른 출처를 의미
도메인이 다른 서버끼리 리소스를 주고 받을 때 보안을 위해 설정된 정책

악성 URL로 접속하는 상황 등을 막기위해 하나의 웹은 하나의 서버(동일 출처)로의 연결만을 허용하는 정책
HTTP 추가 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이선이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제
웹 애플리케이션은 리소스가 자신의 출처와 다를 때 CORS 요청을 실행

- 예시
웹 사이트 A가 API 서버 B에서 데이터를 가져오려 할 때
API 서버 B에서 CORS허용 설정이 되어있지 않으면 웹 브라우저에서 API접근이 거부될 수 있다
이는 프론트엔드와 백엔드 간 각자 서버를 띄우게 되었을때에도 발생할 수 있다

- 동일 출처(Origin)의 조건
프로토콜 / 호스트(도메인) / 포트번호 3가지가 동일해야 동일 출처로 인정한다





SOP (Same-Origin Policy)
같은 출처에서만 리소스를 공유할 수 있다라는 개념의 보안 정책
서버의 구조가 다양해짐에 따라 이 정책의 예외 상황임을 명시하는 CORS가 탄생하게됨





CORS의 필요성
웹에서 돌아가는 클라이언트 애플리케이션은 개발자 도구만 열어도 DOM이 어떻게 작성 되어 있는지, 어떤 서버와 통신하는지, 리소스의 출처는 어디인지와 같은 정보들을 쉽게 열람할 수 있다
이런 상황 속에서 서로 다른 출처의 애플리케이션이 서로 통신하는 것에 대해 아무런 제약도 존재하지 않는다면 악의를 가진 사용자가 CSRF나 XSS와 같은 방법을 사용하여 사용자의 애플리케이션에서 코드가 실행된 것처럼 꾸며서 사용자의 정보를 탈취하기가 쉬워진다

- CSRF (Cross-Site Request Forgery,  사이트 간 요청 위조)
사용자가 자신의 의지와는 무관하게 공격자가 의도한 행위 (데이터 수정, 삭제, 등록 등)을 특정 웹사이트에 요청하게 하는 공격

- XSS (Cross-Site Scriptng)
게시판이나 웹 메일 등 웹 요소에 자바스크립트와 같은 스크립트 코드를 삽입하여 개발자가 고려하지 않은 기능이 작동하게 할 수 있는 공격

위와 같은 보안 취약점을 CORS로 "`특정 도메인`에서 호출한 요청만 나의 리소스를 사용하는 것을 허용한다"라는 설정을 두는 것이다






CORS 오류 해결 방법
Acess-Control-Allow-Origin 키를 response 헤더에 넣어 접근 권한 설정을 해준다

- 모든 origin 요청 허용 (모든 요청에 대해 사용을 허용하기 때문에 보안 취약)
"Access-Control-Allow-Origin": "*"

- 특정 origin에서 오는 요청만 허용
"Access-Control-Allow-Origin": "http://localhost:8080"








Reference

CORS란 무엇인가?

CORS는 왜 등장했나

CORS는 왜 이렇게 우리를 힘들게 하는걸까?