CORS 란

라이브 스트리밍과 채팅을 한 페이지에 동시에 보여주려고 하다가 CORS error를 마주치고 잊지 않기 위해 정리해놓는다.

 

교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다. 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행합니다.

 

보안 상의 이유로 브라우저는 기본적으로 스크립트에서 시작한 교차 출처 HTTP 요청을 제한합니다. 

 

보안상의 이유? 란 어떤 보안상의 이유일까 

 

CORS를 보기 전에

SOP 라는 것이 있다.

SOP : 다른 출처의 리소스를 사용하는 것에 제한하는 보안 방식

 

예를 들어보자

1. 인스타그램 이용자가 로그인하여 사용
2. 해커가 이용자에게 DM으로 수상한 링크를 보냈는데 이용자가 클릭을 해버림.
3. 링크를 통해 이상한(❓) 사진을 피드에 박제하는 자동 기능이 실행됨

이를 방지하기위해 SOP가 중요한 역할을 수행한다. 

인스타그램 입장에서는 Origin 출처가 다르므로 Cross Origin이 발동된 관계에 따라 SOP의 절대적 룰이 위반되어 해당 요청을 무시하게 된다.

 

이처럼 SOP 정책에 위배되는 행동들을 기본적으로 방지하게 되는데, 우리는 Ajax, REST API 등 많은 서비스를 다른 서버에서 가져오는 부분이 필요하기 때문에 HTTP 헤더를 추가하여 다른 출처의 리소스를 가져오게 허용하겠다는 것이 CORS 이다. 

 

 

출처는 URL에서 Protocol, Host, Port를 통해 동일한 출처인지 다른 출처인지 판별이 가능하다.

같은 출처인 경우 Same Origin, 다른 출처인 경우 Cross Origin

 

Same Origin인 경우와 Cross Origin 경우 예시

 

 

SOP 정책에 따라 Same Origin 은 성공 부분들이고 실패 부분들은 Origin이 다르기 때문에 불러올 수 없다는 것이다.

 

 

하지만 우리가 img 태그나 src 태그에 동영상 같은 URL을 입력할 때는 아무 문제가 없지 않은가?

그래서 어떤 상황에는 Cross Origin이 가능하고, 어떤 리소스는 안되는지 조금 알아봤다.

 

허용하는 부분

교차출처 쓰기는 보통 허용한다.  ex) 링크, 리다이렉트, 양식 제출

교차출처 삽입은 보통 허용한다. ex) 밑의 삽입할 수 있는 리소스의 일부 예제

 

 

다음은 교차 출처로 삽입할 수 있는 리소스의 일부 예제입니다.

• <script src="..."></script>로 추가하는 JavaScript. 그러나 구문 오류에 대한 상세 정보는 동일 출처 스크립트에서만 확인 가능합니다.
• <link rel="stylesheet" href="...">로 적용하는 CSS. CSS의 느슨한 구문 규칙으로 인해, 교차 출처 CSS는 올바른 Content-Type 헤더를 필요로 합니다. 브라우저 별 제한은 다릅니다. Internet Explorer, Firefox, Chrome, Safari(CVE-2010-0051), Opera
• <img>로 표시하는 이미지.
• <video>와 <audio>로 재생하는 미디어.
• <object>와 <embed>로 삽입하는 외부 리소스.
• @font-face로 적용하는 글씨체. 하지만 일부 브라우저는 동일 출처를 요구할 수도 있습니다.
• <iframe>으로 삽입하는 모든 것. X-Frame-Options 헤더를 사용해 교차 출처 프레임의 대상이 되는 것을 방지할 수 있습니다.

출처 : https://developer.mozilla.org/ko/docs/Web/Security/Same-origin_policy

 

이런식으로 이미지나, 링크, video 등은 SOP 정책이 알아서 보안을 유지해주기 때문에 사용이 가능하다. 

 

하지만 이런 것들이 아닌 다른 포트, 프로토콜, 호스트의 리소스를 가져오려면 꼭 CORS를 설정해줘야 한다. 

 

CORS 설정에 대한 부분은 

https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

교차 출처 리소스 공유 (CORS) - HTTP | MDN

해당 글을 읽으면 잘 이해가 될 것 같다.