이번주 WIL 키워드

- CORS

 

CORS란?

브라우저에서는 보안적인 이유로 cross-origin HTTP 요청들을 제한한다

그래서 cross-origin 요청을 하려면 서버의 동의가 필요하다

만약 서버가 동의한다면 브라우저에서는 요청을 허락하고

동의하지 않는다면 브라우저에서 거절한다

 

이러한 허락을 구하고 거절하는 메커니즘을 HTTP-header를 이용해서 가능한데

이를 CORS(Cross-Origin Resource Sharing)라고 부른다

 

그렇게해서 브라우저에서 cross-origin 요청을 안전하게 할 수 있도록 하는 메커니즘이다

 

cross-origin 이란

아래 중 한 가지라도 다른 경우를 말한다

1) 프로토콜

http와 https는 프로토콜이 다르다

 

2) 도메인

domain.com과 other-domain.com은 다르다

 

3) 포트번호

8080포트와 3000포트는 다르다

 

CORS는 왜 필요한가?

CORS가 없이 모든 곳에서 데이터를 요청할 수 있게 되면

다른 사이트에서 원래 사이트를 흉내낼 수 있게 된다

예를 들어서 기존 사이트와 완전히 동일하게 동작하도록 하여 사용자가 로그인을 하도록 만들고

로그인했던 세션을 탈취하여 악의적으로 정보를 추출하거나 다른 사람의 정보를 입력하는 등

공격을 할 수 있다 이렇나 공격을 할 수 없도록 브라우저에서 보호하고

필요한 경우에만 서버와 협의하여 요청할 수 있도록 하기 위해서 필요하다

 

CORS는 어떻게 동작하는가?

simple requests인 경우

1) 서버로 요청을 한다

2) 서버의 응답이 왔을때 브라우저가 요청한 Origin과

응답한 헤더 Access-Control-Request-Headers의 값을 비교하여 유효한 요청이면 리소스를 응답한다

만약 유효하지 않은 요청이라면 브라우저에서 이를 막고 에러가 발생한다

 

Simple requests란?

HTTP method가 다음 중 하나이면서

- GET

- HEAD

- POST

 

자동으로 설정되는 헤더는 제외하고 설정할 수 있는 아래 헤더들만 변경하면서

- Accept

- Accept-Language

- Content-Language

 

Content-Type이 아래와 같은 경우

- application/x-www-form-urlencoded

- multipart/form-data

- text/plain

 

이러한 경우에 Simple requests라고 한다

이 요청은 추가적으로 확인하지 않고 바로 본 요청을 보낸다

 

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 요청을 보낸다

이렇게 하는 이유는 사용자 데이터에 영향을 미칠 수 있는 요청이므로 사전에 확인 후 본 요청을 보낸다

 

이번주 회고

이번주는 저번주에 했던 내용에서 크게 달라지는게 없다보니

 

백엔드 사람들은 하루 이틀만에 대부분 마무리를 하는거 같았다

 

그래서 나도 팀과제는 마쳐놓고 개인 프로젝트에 사용하고자 하는

 

기능들을 추가하며 공부를 하고 있다

 

오늘 공부시간