CORS

fetch에 대해서 공부해보다가 CORS라는 말이 나와서 궁금해서 찾아보았다.

https://developer.mozilla.org/en-US/docs/Web/API/fetch#exceptions

fetch() - Web APIs | MDN

이 글을 읽다가 이 부분이 갑툭튀해서 찾아본 것이다.

그래서 same-origin이 뭔데..

---

다음의 글을 번역한 글입니다(오역 많음) 하지만 파파고와 함께 했음

레퍼런스 https://www.hackedu.com/blog/same-origin-policy-and-cross-origin-resource-sharing-cors

Same-Origin Policy And Cross-Origin Resource Sharing (CORS)

우선 origin이라는 단어의 의미에 대해 명확하게 하자면, 특정한 리소스의 위치라는 맥락을 나타낸다. origin은 세 요소로 구성되어 있다. 프로토콜, 호스트네임, 그리고 포트다.

브라우저가 same-origin check를 수행할 때, 브라우저는 리소스가 존재하는 위치(originated location)와 요청한 리소스의 위치와 비교한다. 만약 두 개가 일치한다면, origin은 같고 브라우저는 요청한 리소스가 로드되는 것을 허락한다.

eg : http://hackedu.io/about 와 http://hackedu.io/contact 는 다른 호스트네임을 가지고 있기 때문에 origin이 다르다고

할 수 있다.

same-origin 정책은 모-던 웹브라우저에서 매우 중요한 보안장치(안전장치)이다. same-origin policy는 문서나 스크립트, 미디어 파일 사이의 cross-origin 상호작용(리소스를 요청하는 쪽의 위치와 리소스가 실제로 위치한 곳의 위치가 다를 때 리소스를 요청하는 경우)을 막기 위한 것이다.

HTTP 프로토콜은 처음 만들어졌을때에는 매우 간단했다. (그 때가 언제냐면...웹사이트들이 사용자와 상호작용하지 않고 정적으로 만들어졌을 때) 애니메이션이나 메뉴, 그리고 시강(시선을 강탈하는) 인터렉티브 페이지 따윈 없었던 것이다

웹이 인기있어질 때쯤 사용자의 요구를 따라가야 했다. 그래서 HTTP프로토콜의 새로운 버전이 필요했고, 이것은 뉴-테크놀로지의 도래에 박차를 가했다(의역 100%)

두 가지 가장 중요한 발전이라 한다면 JS와 DOM API의 등장이다. JS와 DOM API를 통해 사용자가 상호작용하는 방식에 따라 실시간으로 컨텐츠를 업데이트하는 인터렉티브한 웹 페이지를 만들 수 있게 된 것이다 이는 내가 지금 삽질하고 있는 비동기 요청과 관련이 있는 것 같지만 뇌피셜이니까 일단 여기서 멈추고

만약에 누군가가 가짜 faceboook을(o가 1개 더 있다!) 만들어서 접속하게 했다고 가정해보자. 가짜 사이트는 (원래의) facebook 컨텐츠를 로드하는 iframe이 존재한다.

이제 악의적인 웹 사이트(http://faceboook.com)는 몇 개의 AJAX(Asynchronous JavaScript and XML) 요청만으로 사용자의 DM를 읽거나 작업을 수행할 수 있다(...!) 이런 공격 중 하나는 사이트 간 요청 위조(CSRF)이다.

하지만 same-origin 정책이 모든 cross-origin 리소스를 차단하는 것은 아니다. (만약 그렇다면 CDN은 존재하지 않는다.) 일반적으로 내장된(embedded) cross-origin 리소스를 허용하는 여러 HTML 태그가 있다.

그래서 CORS란? CORS(직역 : 교차 오리진 리소스 공유)를 통해 서버는 cross-origin 요청에 사용할 수 있는 신뢰할 수 있는 origin을 지정할 수 있다.

만약 HTTP메소드가 {GET,POST 또는 HEAD}이고 {Content-Type이 text/plain, application/x-www-form-urlencoded 또는 multipart/form-data}라면, 이건 간단한 요청이기 때문에 사전 검사 없이 (요청을) 보낼 수 있다.

 

예시request

response

브라우저가 HTTP 응답을 수신하면 요청 origin이 Access-Control-Allow-Origin 헤더 값과 일치하는지 확인한다. 검사에 실패하면 응답이 즉시 차단된다.

---