cross domain issue

1. cross domain issue

---

XMLHttpRequest(XHR)은 웹 브라우저와 웹 서버 간에 메서드가 데이터를 전송하는 객체 폼의 API이다.

XHR은 AJAX요청을 생성하는 JS(JavaScript) API인데 다른 도메인 간에는 보안을 이유로 요청이 안 된다(SOP). 이를 cross domain issue라 한다.

 

즉 A도메인에서 B도메인으로 XHR통신, Ajax 통신을 할 수 없는데 이를 회피하기 위해서 JSONP라는 방식과 CORS가 널리 사용되고 있다.

 

※동일 출처 정책(Same-Origin Policy)

주로 XHR부터의 데이터 접근에 적용된다. 다른 웹페이지에 접근할 때 같은 출처의 페이지에만 접근이 가능하다. 일치하는 HTML 태그를 경유하는 이미지, CSS, 스크립트 등 출처를 경유하여 리소스를 임베드하는 것은 제한되지 않는다.

 

2. JSONP(JSON with Padding)

---

SOP에 영향을 받지 않는 CSS, script는 로딩이 가능한데 이를 이용하여 HTML의 script에 src를 호출한 결과를 javascript를 불러와서 실행시키는 태그이다. 즉, JSNOP는 데이터 타입 요청이 아닌 <script> 호출 방식이다. GET메서드로 읽어오기에 GET방식의 API만 요청이 가능하다.

 

jsnop 자세한 정보: blog.kingbbode.com/26

 

3. CORS(Cross-Origin Resource Sharing)

---

교차 출처 리소스 공유(Cross-origin resource sharing, CORS), 교차 출처 자원 공유는 웹 페이지 상의 제한된 리소스를 최초 자원이 서비스된 도메인 밖의 다른 도메인으로부터 요청할 수 있게 허용하는 구조이다.

 

기본적으로 웹 클라이언트 애플리케이션이 다른 출처의 리소스를 요청할 때는 HTTP 프로토콜을 사용하여 요청을 보내게 되는데, 이때 브라우저는 요청 헤더에 Origin이라는 필드에 요청을 보내는 출처를 함께 담아 보낸다.

 

CORS가 동작하는 방식은 4가지의 시나리오에 따라 동작한다.

1) Simple Request

아래 조건을 모두 만족하면서, 브라우저와 서버가 요청과 응답을 한 번씩만 주고받는 HTTP 요청은 Simple Request

 

1. GET, POST, HEAD 중 하나의 HTTP Method로 요청한 경우
2. POST인 경우 Content-type이 셋 중 하나일 경우
   - application/x-www-form-urlencoded
   - multipart/form-data
   - text/plain

2) Preflight Request

 웹 애플리케이션을 개발할 때 가장 마주치는 시나리오이다. 이 시나리오에 해당하는 상황일 때 브라우저는 요청을 한 번에 보내지 않고 예비 요청과 본 요청으로 나누어서 서버로 전송한다. 이때 브라우저가 본 요청을 보내기 전에 보내는 예비 요청을 Preflight라고 부르는 것이며, 이 예비 요청에는 HTTP 메서드 중 OPTIONS 메서드가 사용된다. 예비 요청의 역할은 본 요청을 보내기 전에 브라우저 스스로 이 요청을 보내는 것이 안전한지 확인하는 것이다.

출처: https://evan-moon.github.io/2020/05/21/about-cors/#preflight-request

예비 요청을 받은 서버는 HTTP 응답 헤더에 허용하고 싶은 부분만 Access-control- 로 지정해서 브라우저로 전달하면 본 요청 시 브라우저는 서버에서 허용한 부분만 요청할 수 있다.

 

3) Credential(자격 증명)

HTTP Cookie, HTTP Authhentication정보를 다른 도메인의 서버로 전달하기 위해서는 이 방식을 사용해야 한다.

 

1. 1. 클라이언트에서 비동기 요청 시 xhr.withCredentials = true로 설정해서 Credential요청을 한다.
2. 2. 서버에서도 Access-Control-Allow-Credentials: true로 설정한 뒤 Access-Control-Allow-Origin의 헤더로는 *가 아닌 다른 구체적인 도메인(https://test.com)이 와야 정상 동작한다.

4) Non Credential(비 자격 증명)

기본적으로 브라우저(CORS요청은 기본적으로)는 Non Credential모드로 동작한다. 따라서 withCredentials = true로 설정하지 않으면 이 방식대로 동작한다.

 

 

출처

ko.wikipedia.org/wiki/XMLHttpRequest

XMLHttpRequest - 위키백과, 우리 모두의 백과사전

 

blog.kingbbode.com/26

JSONP 알고 쓰자

ko.wikipedia.org/wiki/%EB%8F%99%EC%9D%BC-%EC%B6%9C%EC%B2%98_%EC%A0%95%EC%B1%85

 

동일-출처 정책 - 위키백과, 우리 모두의 백과사전

ko.wikipedia.org/wiki/%EA%B5%90%EC%B0%A8_%EC%B6%9C%EC%B2%98_%EB%A6%AC%EC%86%8C%EC%8A%A4_%EA%B3%B5%EC%9C%A0

교차 출처 리소스 공유 - 위키백과, 우리 모두의 백과사전

 

cors

simsimjae.medium.com/cors%EC%99%80-jsonp%EC%97%90-%EB%8C%80%ED%95%B4%EC%84%9C-aa3ec0456e97

CORS와 Jsonp에 대해서

brownbears.tistory.com/336

CORS

evan-moon.github.io/2020/05/21/about-cors/#preflight-request

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