[CORS]1. ORIGIN 속성

 

CORS에 대한 얕은 이해 때문에 웹 페이지 만들다가 너무 답답한 일이 발생해서, 조금 더 정확하게 이해해보자는 의미로 포스팅을 만들었다.

 

---

 

1. origin이란

위 글에서는 origin의 정의에 대해 아래와 같이 설명함.

 

origin is defined by the scheme (protocol), host (domain), and port of the URL.

---

http request를 보낼때 생기는 header의 attribute 중 하나일 뿐이다.

 

간단히 예를 들어 설명하면

 

https://spring.io:7080

같은 주소가 있다면

 

scheme attribute는 https or http 가 될 것이고,

domain attribute는 spring.io가 될 것이며

port attribute는 7080이 될 것이다.

---

2. origin은 언제 생성되는가?

origin은 XMLHttpRequest 혹은 fetch api를 사용할 때 header에 자동으로 생성된다.

이는 ajax와 axios등 XMLHttpRequest를 기반으로 한 라이브러리를 사용할 때도 동일하게 적용된다.

브라우저에 주소창을 검색 하는 방식이나 postman같은 프로그램을 이용하여 request를 보내면 생기지 않는다.

따라서 이런 상황엔 cors 정책도 적용되지 않는다. 즉, 어떤 사이트 안에 접속한 상태에서 script를 통해

request를 보내는 경우에만 생성된다.

 

origin의 domain에는 document object의 domain 값이 들어간다.

이는 접속한 사이트에서 개발자 도구를 열어 콘솔에 document.domain이라고 입력하면 확인할 수 있다.

자동으로 현재 접속한 주소에서 domain 주소만 파싱하여 보여준다. 예를들면

www.google.com/44113, www.google.com/442333 두개의 주소는 똑같이 위와같은 domain을 가진다.

물론 document.domain값은 보안상 임의로 변경할 수 없게끔 설정되어있고,

강제로 값을 변경하려고 시도해도 값이 변경되지 않는다.

---

3. origin 비교

cors는 request의 origin과 서버에서 이미 허용한 origin을 비교하여 공격을 방어하는 기법이기 때문에,

두 개의 origin을 비교하는 것이 중요하다. 

두 개의 origin 속성이 어떤 상황에 같거나 다르게 간주되는 지에 대해 따로 예시를 들어서 설명해놓았다.

https://developer.mozilla.org/en-US/docs/Glossary/origin

위 예제와 아래 예제 모두 origin 값 그 자체라기 보단 origin으로 표현되기 전 값이라고 보는게 맞는 것 같다.

 

두 번째 예제의 경우에는 하나는 포트번호가 있고 하나는 명시되어 있지 않지만, 기본 포트는 80번을 사용하기 때문에 두개는 같은 origin으로 간주한다.

 

https://developer.mozilla.org/en-US/docs/Glossary/origin

첫 번째 경우에는 프로토콜이 다르기 때문에 다른 origin이다.

두 번째 경우도 마찬가지며,

세 번째 경우에는 포트가 다르기 때문에 다른 origin이다.

 

---

참고한 자료

https://developer.mozilla.org/en-US/docs/Glossary/origin

Origin

https://html.spec.whatwg.org/multipage/origin.html#concept-origin-opaque

HTML Standard