[web] CORS (Cross Origin Resource Sharing)

 

🤔 목차 CORS 란 CORS 요청(Request) 의 종류 Simple Request Preflight Request Request with Credential Request without Credential Server에서 CORS 요청 핸들링하는 방법 테스트 정리

 

CORS 란

---

Cross-Origin Resource Sharing

웹 브라우저에서 외부 도메인 서버와 통신하기 위한 방식을 표준화한 specification

• 서버와 클라이언트가 정해진 헤더를 통해 서로 요청이나 응답에 반응할지 결정하는 방식
• ex) header가 “” 일때, 서버는 요청에 반응 ~, 클라이언트는 응답에 반응 ~

<aside> ❓ What is Same Origin Policy

</aside>

Same Origin Policy

웹 보안 정책 중 하나로, 한 출처(origin) 에서 로드된 문서나 스크립트가 다른 출처 자원과 상호작용하지 못하도록 제약한다.

→ 개선된 정책 : CORS

Same Origin 이란

두 페이지의 Protocol, Host, Port 가 같은 경우

ex) js에서 ajax로 resource load 할때

origin : http://aaa.yejin.com/dir/index.html

URL 결과 이유

http://aaa.yejin.com/dir/test.html	o
http://aaa.yejin.com/dir/inner/test.html	o
https://aaa.yejin.com/index.html	x	Protocol X
http://aaa.yejin.com:8888/dir/index.html	x	Port X
http://bbb.yejin.com/dir/index.html	x	Host X

CORS 요청(Request) 의 종류

---

Simple Request

조건

1. GET,HEAD,POST 중 한가지 방식을 사용해야 한다.
2. POST 방식일 경우 Content-type이 아래 셋 중에 하나여야 한다.
   1. application/x-www-form-urlencoded
   2. multipart/form-data
   3. text/plain (default type)
3. Custom header를 전송하지 말아야 한다.

예시

브라우저 url 호출 : http://domainA

domainA → ajax에서 domainB 에서 resource를 가져옴

즉, domainA (origin : domainA) 에서 resourceB (host : domainB) 를 호출

Request#1 // 요청 1
GET path HTTP/1.1
Host : <http://domainB>
Origin : <http://domainA>

Response#1 // 서버의 회신 1 origin : domainA
HTTP/1.1 200 OK
Access-Control-Allow-Origin : * // 서버에서 이 헤더의 값을 보고 결정

Preflight Request

Simple Request 조건에 해당하지 않을 시, 브라우저는 Preflight Request 방식으로 요청

조건

1. GET,HEAD,POST 외의 다른 방식으로 요청 가능
2. 다른 Content-type으로 (application/xml 등) 요청 가능
3. Custom header 사용 가능

요청 방법

1. Preflight (예비 요청)요청을 할 수 있는 권한이 있는지 확인
2. Request#1 // preflight OPTIONS path HTTP/1.1 Host : <http://domainB> Origin : <http://domainA> Response#1 // prefilght 응답 HTTP/1.1 200 OK Access-Control-Allow-Origin : <http://domainA> // domainA가 출처(domainB) 쓰는 것 allow Access-Contorl-Allow-Methods : POST,GET,OPTIONS
3. 실제로 요청하려는 경로와 같은 URL에 대해 OPTION 메소드로 요청을 미리 날려 본 후,
4. 실제 요청
5. Request#2 // 실제요청 POST path HTTP/1.1 Host : <http://domainB> Origin : <http://domainA> Respons#2 HTTP/1.1 200 OK Access-Control-Allow-Origin : <http://domainA>

Request with Credential

HTTP Cookie와 HTTP Authentication 정보를 인식할 수 있게 해주는 요청

protocol, port 가 다르게 될 경우, session이 유실 되지 않게 하는 조치

클라이언트 단
xhr.withCredential = true 

서버 단
Access-Control-Allow-Credentials:true
Access-Control-Allow-Origin : <http://domainA> // * 안됨

// Request ajax 부분
$.ajax({
	type : ,
	contentType: ,
	url: ,
	success:function(){
	},
	error:function(){
	},
	xhrFields:{
		withCredentials:true // credential 요청을 주어야 함
	},
});

Request without Credential

default로 Non-Credential 요청

( xhr.withCredentials=true 시에만 credential 요청)

 

Server에서 CORS 요청 핸들링하는 방법

---

EX1) Preflight Request

//OPTION 메서드의 요청을 받아서 컨트롤

//header 예시
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET,POST,DELETE,OPTIONS
Access-Control-Max-Age:3600
Access-Control-Allow-Header: Origin,Accept,X-Requested-With,Content-Type,Access-Control-Request-Method,Access-Control-Request-Headers,Authorization (*로 허용안됨)

Ex2) Request with Credential

// With Credential
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin : 도메인명 // * 안됨

 

테스트

---

⚠️ CORS error

host 가 다른 요청

$('#cors1__err').click(function() {
    	console.log('host diff');
		$.ajax({
			url : '<http://bbb.yejin.co.kr/DynamicWeb03/index.jsp>',
			success : function() {
				alert('success');
			},
			error : function() {
				alert('error');
			}
     	})
});

Access to XMLHttpRequest 
at '<http://bbb.yejin.co.kr/DynamicWeb03/index.jsp>' 
from origin '<http://aaa.yejin.co.kr>' 
has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

// Request Headers
GET /DynamicWeb03/index.jsp HTTP/1.1
Accept: */*
Accept-Encoding: gzip, deflate
Accept-Language: ko-KR,ko;q=0.9,en-US;q=0.8,en;q=0.7
Connection: keep-alive
Host: bbb.yejin.co.kr
Origin: <http://aaa.yejin.co.kr>
Referer: <http://aaa.yejin.co.kr/>
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) 
AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

// Response Headers
HTTP/1.1 200
Set-Cookie: JSESSIONID=0C4002012D3D81EA3F5044992558C040; Path=/DynamicWeb03; HttpOnly
Content-Type: text/html;charset=EUC-KR
Content-Length: 239
Date: Wed, 13 Jul 2022 05:12:54 GMT

 

Protocol http → https

$('#cors2__err').click(function() {
    	console.log('protocol diff');
		$.ajax({
			url : '<https://aaa.yejin.co.kr/DynamicWeb01/index.jsp>',
			success : function() {
				alert('success');
			},
			error : function() {
				alert('error');
			}
     	})
});

Access to XMLHttpRequest 
at '<https://aaa.yejin.co.kr/DynamicWeb01/index.jsp>' 
from origin '<http://aaa.yejin.co.kr>' 
has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

 

Protocol https → http : Mixed Content (It is not CORS)

Mixed Content: 
The page at '<https://aaa.yejin.co.kr/DynamicWeb01/index.jsp>' 
was loaded over HTTPS, 
but requested an insecure XMLHttpRequest endpoint 
'<http://bbb.yejin.co.kr/DynamicWeb03/index.jsp>'. 
This request has been blocked; the content must be served over HTTPS.

 

Port 가 다른 요청

$('#cors3__err').click(function() {
    	console.log('port diff');
		$.ajax({
			url : '<http://aaa.yejin.co.kr:8080/DynamicWeb01/index.jsp>',
			success : function() {
				alert('success');
			},
			error : function() {
				alert('error');
			}
     	})
});

Access to XMLHttpRequest 
at '<http://aaa.yejin.co.kr:8080/DynamicWeb01/index.jsp>' 
from origin '<http://aaa.yejin.co.kr>' 
has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

 

🆗 Acess-Control-Allow-Origin

// Web 서버를 통해 서버의 Response Header에 아래 내용 추가

cors_all	      Action = AddResponse,
                FieldName = "Access-Control-Allow-Origin",
								FieldValue = "*"

// Request Header
GET /DynamicWeb02/index.jsp HTTP/1.1
...
Host: bbb.yejin.co.kr
Origin: <http://aaa.yejin.co.kr>
Referer: <http://aaa.yejin.co.kr/>
...

// Response Header
HTTP/1.1 200
Access-Control-Allow-Origin: *
Set-Cookie: JSESSIONID=28C41758BF3E387AB88E616A3F55631A; Path=/DynamicWeb02; HttpOnly
Content-Type: text/html;charset=EUC-KR
Content-Length: 424
Date: Wed, 13 Jul 2022 05:51:52 GMT

 

with Credential → 세션 유지 테스트

// origin 
JSESSIONID=EE1C98820B6693EF2E710B74697B8074

// no credential -> session 재발급
HTTP/1.1 200
Access-Control-Allow-Origin: *
Set-Cookie: JSESSIONID=A21D1937053DE17F3C29B91FEF4D0B78; Path=/DynamicWeb01; HttpOnly
Content-Type: text/html;charset=EUC-KR
Content-Length: 424
Date: Wed, 13 Jul 2022 06:12:13 GMT

// credential -> session 유지
HTTP/1.1 200
Access-Control-Allow-Origin: <http://aaa.yejin.co.kr>
Access-Control-Allow-Credentials: true
Content-Type: text/html;charset=EUC-KR
Content-Length: 424
Date: Wed, 13 Jul 2022 06:11:40 GMT
...
Cookie: JSESSIONID=EE1C98820B6693EF2E710B74697B8074 // request header

 

참고

---

naver.com 을 입력 후 개발자도구를 통해 확인하면,

여러 resource를 받기 위해 origin이 다른 요청의 response header에는 access-control-allow-origin 옵션이 있는 것을 확인 할 수 있다.

실업무에서 많이 겪을 수 밖에 없는 보안정책이므로, 웹 개발 개발자라면 CORS 정책을 알고 있어야 한다고 생각된다.

 

정리

---

질문 : CORS란 무엇이며 이것에 대해서 설명해보세요.

CORS는 웹개발을 하다가 흔히 만날 수 있는 이슈입니다. 대개는 프론트엔드 개발시에 로컬에서 API 서버에 요청을 보낼 때 흔하게 발생합니다.

서로 다른 도메인간에 자원을 공유하는 것을 뜻합니다. 대부분의 브라우저에서는 이를 기본적으로 차단하며, 서버측에서 헤더를 통해서 사용가능한 자원을 알려줍니다.

preflight request는 실제 요청을 보내도 안전한지 판단하기 위해 사전에 보내는 요청입니다. OPTIONS 메서드로 요청하며 CORS를 허용하는지 확인합니다. CORS가 허용된 웹서버라면 사용 가능한 리소스를 헤더에 담아 응답합니다.