CORS (Cross-Origin Resource Sharing), SOP (Same-Origin Policy)

 

 

CORS

웹 브라우저에서 다른 출처(origin)에서 리소스를 요청할 때 발생하는 보안 문제를 해결하기 위한 메커니즘

 

기본적으로 웹 브라우저는 SOP (동일 출처 정책. Same-Origin Policy)를 따르기 때문에 하나의 웹 페이지에서 다른 도메인, 프로토콜, 포트에 있는 리소스를 요청하는 것이 제한됨

 

CORS는 이 제한을 우회하고, 서버가 다른 출처에서의 요청을 허용할 수 있도록 하는 방법

 

 

---

 

 

SOP

웹 브라우저는 보안을 위해 동일 출처 정책을 적용함

이는 웹 페이지의 출처(origin)가 요청하려는 리소스의 출처와 동일해야만 요청이 성공하도록 하는 규칙

웹 브라우저가 웹 페이지가 다른 출처에서 리소스를 요청하는 것을 기본적으로 차단하는 보안 정책

 

 

---

CORS 요청 흐름

1. 브라우저가 요청을 보낼 때 요청 헤더에 Origin이라는 정보를 포함하여 요청을 보냄

이 헤더에는 요청을 보낸 출처의 정보가 담김

 

2. 서버는 요청을 받을 때, 요청 헤더의 Origin을 확인하고, 해당 출처에 대해 리소스를 제공할 수 있는지 판단

 

3. 서버가 요청을 허용할 경우, 응답 헤더에 Access-Control-Allow-Origin을 추가하여 허용된 출처를 명시

예: Access -Control-Allow-Origin: https://example.com  

 

4. 브라우저는 응답을 받은 후 서버가 허용한 출처와 일치하는지 확인하고 일치하면 응답을 처리

 

---

https://chantleman.tistory.com/manage/posts?sort=asc&page=1#foo

 

여기에서

 

https:// - protocol

chantleman.tistory.com - host, 도메인

/manage/posts - path

?sort=asc&page=1 - query string

#foo - fragment

 

 

 

출처(origin)는 프로토콜(http, https) + 도메인 (chantleman.com) + 포트번호(80) 3개로 이루어짐

즉 서버의 위치를 찾아가기 위해 필요한 가장 기본적인 것들을 합쳐놓은 것으로

셋 중 하나라도 다르면 다른 출처 (cross domain)

 

http://example.com
https://example.com
https://api.example.com

 

이 세개는 모두 다른 출처임

 

 

---

 

 

ajax는 CORS 제약사항을 받음 (다른 오리진으로 해석되면 제약사항이 발생하여 SOP에 의해 ajax 요청이 되지 않음)

 

 

 

ajax("naver.com") 와 같이

A 서버에서 자바스크립트(ajax)를 통해 naver에 요청을 보내는 것을 Cross-Origin Request(다른 출처에서 리소스를 요청)라고 하는데, 기본적으로 브라우저에서 이런 요청을 차단함

다른 출처에서 데이터를 요청할 때 보안 위험이 있기 때문(받아온 값이 바로 뿌려지는 것이 아니라 변수에 담겨있기 때문에 변수 조작이 가능해 CSRF, XSS공격을 통해 악성 코드 실행할 수 있음 )

 

 

 

이를 해결하기 위한 몇 가지 방법이 있음

 

첫번째로 서버를 우회해서 데이터를 요청할 수 있는데

이 방식에서는 클라이언트 → 서버(부모서버)  → 다른 서버 방식으로 요청이 이루어짐

예를 들어,

1. 클라이언트(브라우저)가 A 서버에 ajax로 요청을 보내면

2. A 서버는 naver로 실제 데이터를 요청

3. naver 서버는 데이터를 A서버로 응답하여

4. A서버는 데이터를 클라이언트로 응답하는 식으로 데이터 전송이 이루어짐

 

이렇게 서버를 중개하면 브라우저가 직접적으로 naver에 요청하지 않기 때문에 SOP에 의해 차단되지 않음

(서버간의 요청은 보안이 강화된 방식으로 처리하기 때문 )

 

 

두번째 방법으로는 서버에서 CORS 헤더를 설정하여 다른 출처에서의 요청을 허용할 수 있음

예를 들어, naver서버가 A에서의 요청을 허용하도록 Access-Control-Allow-Origin 헤더를 설정하면

브라우저는 A서버에서 naver로의 ajax요청을 허용하게 됨

 

 

 

세번째 방법은 CORS 플러그인을 사용하는 것

개발중에 CORS를 우회하고싶을때 브라우저에서 cors 플러그인을 사용하여 요청을 임시로 허용할 수 있음( ajax 요청을 서버가 요청한 것처럼 바꿔줌)

하지만 이 플러그인은 개발용으로만 사용해야하며 실제 운영 환경에서는 서버에서 cors를 설정해야함

 

 

https://chromewebstore.google.com/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf?hl=ko

Allow CORS: Access-Control-Allow-Origin - Chrome 웹 스토어