Cross Origin Resource Sharing

LUCY·2022년 4월 7일

Origin 💬

Origin(출처): <Protocol> "://" <hostname> [ ":" <port> ]
- Protocol + Host + Port
- <Protocol> : [ HTTP, HTTPS ]
- <hostname> : 서버의 고유한 이름 또는 IP
- <port> : 서버와 연결을 맺기 위한 TCP 포트 번호, [ Default : 80 ]

🚨 Access to fetch at https://blah.blah.blah/yadda Visit Website from origin http://localhost:1234 has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

🚨 원본http://localhost:1234에서 https://blah.blah.blah/yadda 웹사이트를 가져오는도중 CORS정책에 의해 차단되었습니당. 요청한 리소스에 Access-Control-Allow-Origin 헤더가 없습니다. 만약 응답이 필요한 경우 request’s 모드를 no-cors로 변경해서 CORS가 비활성화된 리소스를 가져와주세여!

이런 오류가 생기는 이유는 HTTP요청에서 어떤 요청을 하냐에 따라 다른 정책을 따르기 때문!

<HTML> 👉🏻 Cross-Origin 정책을 따름

<Script> 👉🏻 Same-Origin 정책을 따름
JS는 서로 다른 도메인에 대한 요청을 보안상 제한한다. 

다른 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다. - MDN

웹 애플리케이션이 외부 리소스를 요청할 때는 HTTP 프로토콜을 사용해서 보낸다. 이때 브라우저는 Origin에 출처를 함께 담아서 보낸다.

Preflight Request💬

만약 내가 자바스크립트의 Fetch API를 사용하여 브라우저에게 리스소를 받아와! 라고 시킨다면
- Fetch API는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스가 정의되어 있다.
브라우저는 서버에게 예비 요청(Preflight)을 보낸다.
서버는 이 예비 요청에 대한 응답으로 정책을 담은 정보를 브라우저로 다시 보내준다.
이후 브라우저는 자신이 보낸 예비요청과 서버가 보내준 정보를 토대로 비교후 본 요청을 보낸다.
이후 서버가 본 요청에 대한 응답을 하면 최종적으로 응답 데이터를 JS로 넘겨준다 .

Simple Request💬

특정 조건을 만족하면 예비요청을 생략할수 있다. 하지만 이 조건이 까다로워서 일반적인 방법으로 웹 어플리케이션 아키텍처를 설계한다면 거의 충조시키기 어려워 거의 사용되지 않는다.

요청의 메소드는 GET, HEAD, POST 중 하나여야 한다.
Fetch가 "CORS-safelisted request-header"로 정의한 헤더만 사용할 수 있다.

Content-Language Content-Type Accept Accept-Language
Save-Data Viewport-Width DPR Downlink Width

만약 Content-Type를 사용하는 경우에는 아래 값들만 허용된다.

application/x-www-form-urlencoded multipart/form-data text/plain

Credentialed Request💬

이 방법은 다른 방법보다 좀 더 보안을 강화하고 싶을 때 사용하는 방법이다.
기본적으로 브라우저가 제공하는 비동기 리소스 요청 API인 XMLHttpRequest 객체나 fetch API는 별도의 옵션 없이 브라우저의 쿠키 정보나 인증과 관련된 헤더를 함부로 요청에 담지 않는다.
만약 요청에 인증과 관련된 정보를 담아야 한다면 credentials 옵션을 사용해야한다.

Credentials 옵션

same-origin(기본값): 같은 출처 간 요청에만 인증 정보를 담을 수 있다.
include: 모든 요청에 인증 정보를 담을 수 있다.
omit: 모든 요청에 인증 정보를 담지 않는다.

만약 same-origin , include 옵션을 사용해 리소스 요청에 인증 정보가 포함된다면 한다면 브라우저는 빡빡한 조건들을 추가하여 검사해야한다.

Access-Control-Allow-Origin: 모든 요청을 허용하는 (*)은 사용불가, 명시적인 URL 요구
응답 헤더에는 반드시 Access-Control-Allow-Credentials: true가 존재해야함

Chrome 확장프로그램은 CORS 문제를 해결하기 위한 확장 프로그램인 Allow CORS 을 제공한다.

Reference: CORS는 왜 이렇게 우리를 힘들게 하는걸까?

LUCY

이전 포스트

URL

다음 포스트

Cross Origin Resource Sharing

Origin 💬

Preflight Request💬

Simple Request💬

Credentialed Request💬

URL

Head Tag

0개의 댓글

Cross Origin Resource Sharing

Origin 💬