CORS 탄생 배경
Cross Origin Resource Sharing (교차 출처 자원 공유)
HTTP Request는 기본적으로 Cross-Site HTTP Requests가 가능하다.
이는 다른 도메인 주소의 이미지 파일이나 CSS를 가져올 수 있고,
하지만 </script> 태그안의 스크립트에서 생성된 Cross-Site HTTP Requests는 SOP (Same Origin Policy)를 적용 받기 때문에 사용이 불가능하다.
출처(Origin)란 무엇인가?
사전적으로 출처는 “사물이나 말 따위가 생기거나 나온 근거”라고 되어 있다. 여기서도 출처는 동일한 의미로 “리소스 요청의 근거” 정도로 해석하면 된다.
Cross-Site HTTP Requests 를 통해 사이트에 다양한 콘텐츠들을 게시할 수 있는 것은 좋지만 ‘출처’가 명확하지 않은, 다시말해 ‘인가’되지 않은 콘텐츠도 게시될 수 있음을 의미한다. 이를 통해 나타나는 대표적인 해킹 기법이 XSS와 CSRF이며, 이들 공격은 정상적인 페이지에서 코드가 실행된 것처럼 꾸며서 사용자의 정보를 탈취하는 등의 피해를 일으킬 수 있다.
보통 출처(Origin)라고 하면 HTTP 헤더의 속성 값 중 하나로 특정 콘텐츠(이미지,동영상 뿐만 아니라 외부 소스코드도 이에 해당)를 브라우저에 게재하도록 요청한 사이트의 URL을 표기하게 된다.
SOP나 CORS는 출처의 URL과 게재하고자 하는 콘텐츠의 URL을 비교하여 해당 콘텐츠가 정상적인지 여부를 따지는 정책을 의미한다.
그렇다면 각 URL을 비교하는 규칙은 어떻게 될까?
보통 전체 URL 중에 Protocol, HOST, Port (:80, :443 등) 를 가지고 각각의 URL을 비교 하게 된다.
여기서 :80 과 :443은 생략이 가능한데, 각각 HTTP, HTTPS 프로토콜의 기본 포트 번호로 정해져있기 때문이다 (그렇다고 80. 443 따로 사용한다고 동일 Origin으로 인정되진 않으며,
포트번호를 생략한다고 Protocol까지 다르면 안된다)
http://www.h2terran.xyz 와 같은 출처로 인정되는 예시는 다음과 같다.
| URL | 같은 출처 | 이유 |
|---|---|---|
| http://www.h2terran.xyz/main | O | 프로토콜, 호스트, 포트가 동일 |
| http://www.h2terran.xyz/main?page=1 | O | 프로토콜, 호스트, 포트가 동일 |
| https://www.h2terran.xyz | X | 프로토콜, 포트가 다름 |
| http://h2terran.xyz | X | 호스트가 다름 |
| https://h2terran.xyz:8080 | ? | 브라우저에 따라 다름 (IE를 제외한 나머지 브라우저들은 포트까지 같아야 같은 출처로 인정함) |
SOP (Same-Origine Policy) 와 CORS (Cross Origin Resource Sharing) 비교
CORS는 다른 출처에 있는 리소스를 가져와서 사용할 수 있게 하는데 비해 SOP는 같은 출처에서만 리소스를 공유할 수 있게 하는 규칙이다.
기본적으로 브라우저는 SOP를 따르도록 되어 있다. 다만 콘텐츠 제공자 측 웹 서버에 “Access-Control-Allow-Origin” 옵션 설정이 되어 있고, Origin과 비교 시 동일하다 판단되면 다른 출처지만 같은 출처처럼 받아들이게 된다.
참고자료
- CORS는 왜 이렇게 우리를 힘들게 하는걸까?
- https://evan-moon.github.io/2020/05/21/about-cors/
- 교차 출처 리소스 공유 (CORS)
- https://developer.mozilla.org/ko/docs/Web/HTTP/CORS
- CORS
- https://brownbears.tistory.com/336