cors , 꼭 알고 가야한다

 

CORS

sop(same origin policy) : 같은 출발지 정책

브라우저에선 보안적 이슈로 cross-origin http 요청을 제한한다
그래서 cross-origin 요청을 하려면 서버의 동의가 필요하다
만약 서버가 동의한다면 브라우저에서는 요청을 허락하고
동의하지 않는다면 브라우저 에서 막는다(거절)

이러한 동의하는 로직을 HTTP-header를 이용한다
이를 cors(Cross-origin Resource Sharing)이라 부른다

 

 

 

 

Cross-origin이란?

1. 프로토콜이 다르다 : http와 https는 프로토콜이 다르다
2. 도메인 : domain.com과 other-domain.com은 다르다
3. 포트 번호 : 8080 포트와 3000포트는 다르다

 

 

 

CORS가 필요한 이유

CORS가 없이 모든 곳에서 데이터를 요청하게 된다면
다른 사이트에서 원래 사이트를 흉내 낼 수 있게 된다.
예를 들어 기존 사이트와 완전히 동일하게 동작하도록 하여
사용자가 로그인을 하도록 만들고, 로그인했던 세션들을
탈취하여 악의적인 정보를 추출하거나 다른사람의 정보를 입력하는 등
사이버공격을 할 수 있다.
이렇게 공격을 할 수 없도록 브라우저에서 보호하고
필요한 경우에만 서버의 협의하여 요청할 수 있도록 하기 위함이다

 

 

 

 

CORS 동작

Simple qeuests인 경우

1. 서버로 요청을 한다
2. 서버의 응답이 왔을 때 브라우저가 요청한 Origin과 응답한 헤더
   Access-Control-Request-Headers의 값을 비교하여 유효한 리소스를 응답합니다
3. 유효하지 않는 요청일 경우 브라우저에서 추가 응답을 하지않고 에러를 발생시킴

Simple requests란

HTTP method가 GET / HEAD / POST 중 하나
자동으로 설정되는 헤더 제외하고 설정할 수 있는
Accept/Accept-Language/Content-Language만 변경하면서
Content-Type이 같은 경우 Simple request라고 부른다
> application/x-www-form-urlencoded
> multipart/form-data
> text/plain

 

 

preflight 요청일 경우

1. Origin헤더에 현재 요청하는 Origin과
   Access-Control-Request-Method 헤더에 요청하는 HTTP method와
   Access-Control-Request-Headers 요청 시 사용할 헤더를
   OPTIONS 메서드로 서버에 요청한다
   이때 내용물 없이 헤더만 전송한다
2. 브라우저가 서버에서 응답한 헤더 확인 후 유효한 요청인지 확인한다
   만약 유효하지 않는 요청일 경우 요청은 중단되고 에러가 발생된다
   만약 유효한 요청이라면 원래 요청으로 보내려던 요청을 다시 . 재요청하여
   리소스를 응답 받는다 
   
   
    

preflight요청이란?

Simple requests가 아닌 cross-origin 요청은 모두
preflight요청을 하게 되는데 실제 요청을 보낸 것이 안전한지 확인하기 위해
먼저 OPTIONS메서드를 사용하여 cross-origin HTTP 요청을 보낸다
이렇게 하는 이유는 사용자 데이터에 영향을 미칠 수 있는 요청이므로
사전에 확인 후 본 요청을 보낸다

[!💡 관련사이트 ]
https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

교차 출처 리소스 공유 (CORS) - HTTP | MDN

 

 

 

 

 

 

 

CORS와 쿠키

cors는 쿠키와 관련 깊다
cors는 백엔드 컴퓨터의 자원을 보호하기 위해 있는게 아니다
브라우저를 보호하기 위해 있는 것이다
쿠키의 로그인 증서의 특징 : 출처가 적혀있다

CORS를 허용하게 될 경우

쿠키의 출처를 확인하지 않기 때문에, 보안이 취약해 질 수 있다
이런 취약점을 노려 공격하는 기법은 CSRF 라고 한다

 

 

 

 

 

 

 

 

---

 

 

❤ 김춘장이의 위키백과 - 나만의 공부 기록 Tistory ❤

gayulz - Overview

---