Origin, SOP 그리고 CORS

Origin

Origin이란 URI 스키마(프로토콜), 호스트 이름(도메인), 포트 번호의 조합을 말한다.

 

 

SOP

Same-origin policy

 

SOP에 의해 웹 브라우저는 하나의 웹 페이지에서 다른 웹 페이지의 데이터에 접근하기 위한 스크립트가 있을 때, 두 웹페이지가 같은 origin일 때만 이를 허가한다. 이로써 한 웹 페이지에서 다른 웹 페이지의 Document Object Model(DOM)*을 통하여 민감한 정보에 대한 접근을 얻기 위해 작성한 악의적인 스크립트를 막는다.

 

* DOM is an API for HTML, XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated.

(https://www.w3.org/TR/REC-DOM-Level-1/introduction.html)

 

CORS

Cross-origin resource sharing

 

도메인에서 다른 도메인의 웹 페이지 속 제한된 리소스에 요청할 수 있도록 하는 메커니즘이다. SOP를 완화하는 테크닉 중 하나로, CORS라는 이름으로 표준화되었다. 이 표준은 HTTP를 상속받아 새로운 origin 요청 헤더와 새로운 Access-Control-Allow-Origin 응답 헤더를 추가하였다. Access-Control-Allow-Origin 헤더는 서버가 요청을 허락할 origin에 대한 리스트를 명시하는 곳이다.

 

https://en.wikipedia.org/wiki/Cross-origin_resource_sharing

 

플로우 차트의 오른쪽 아래를 보면 서버 응답의 Access-Control 헤더를 확인하는 것을 볼 수 있다. 클라이언트의 요청이 Bad Request가 아니었다고 하더라도, 서버가 허락한 origin에 클라이언트의 origin이 없다면 에러가 발생한다.

 

이와 같은 예외가 발생하면 크롬 콘솔에 아래와 같은 메시지가 찍힌다.

 

Failed to load {server origin}: No ‘Access-Control-Allow-Origin’ header is present on the requested source. Origin ‘{client origin}’ is therefore not allowed access.

 

따라서 위와 같은 에러가 발생했다면, 서버 쪽에 클라이언트의 origin을 허락하도록 처리해주면 된다. 서버 코드가 Spring Boot로 작성되었다면 해당 Controller에 @CrossOrigin 어노테이션을 붙인 뒤, 어노테이션의 origins에 허용하고자 하는 origin을 적어주면 된다.

 

@CrossOrigin(origins = “protocol://hostname:port”)

@Controller

public class SampleController { … }

 

CORS는 cross-origin 요청을 허락하는 것이 안전할지를 결정할 수 있도록 브라우저와 서버가 서로 소통할 수 있는 방법을 정의한다. 이로써 순수한 same-origin 요청 보다 자유도가 높고 더 많은 일을 할 수 있으며 단순히 모든 cross-origin 요청을 허용하는 것보다는 훨씬 안전하다.

 

Reference

https://en.wikipedia.org/wiki/Same-origin_policy

https://en.wikipedia.org/wiki/Cross-origin_resource_sharing

https://www.w3.org/Security/wiki/Same_Origin_Policy