Develop/FrontEnd

CORS 란?

KimBangg 2021. 7. 8. 19:32

1. 들어 가기 전에 🗒

 

- 자동 로그인은 어떻게 이루어지나요?

 

브라우저에는 토큰 등의 정보가 쿠키로 저장이 되있기에, 그 값을 로그인 하는 사이트에 접속 할 때 요청에 실어서 보냅니다.

그러면 사이트에서는 쿠키를 확인 한 후에, 로그인이 되어있다고 판단을 하기에 로그인이 유지 됩니다.

 

위의 상황을 통해, 우리가 알아야 하는 사실은 "우리의 개인정보가 웹사이트에 있다는 것" 입니다.

 

- 악의적인 접근이 있다면?

 

만약 누군가 악의적으로 이러한 데이터에 접근 하기 위해서, 자신의 웹사이트를 유도 한다고 가정을 해봅시다 !

 

어떤 사이트에 들어 간다는 것은, 그 사이트의 HTML, CSS, JS 파일을 브라우저에 받아진다는 것이므로. 이 때 받아진 JS 코드 내부에 개인 정보를 탈취 할 수 있는 기능을 세팅 해두었다면 ? 결과는 말하지 않아도 Boom 💩

 

그리하여 다른 브라우저 간에 데이터 송/수신을 막기 위해 SOP(Same-origin-Policy) 가 존재합니다.

 

** 즉, CORS가 없다면 기본적으로 브라우저 내에서 각 리소스 간의 통신이 불가능 하다는 것이죠 !

  

  

CORS ( Access-Control-Allow-Origin) 란 ?  🙋🏻‍♂️

 

그렇다면 우리의 콘솔 창을 빨갛게 칠해주는 CORS란 무엇을 하는 녀석일까요? 

 

쉽게 말하자면, CORS는 SOP를 합의된 출처들간에 합법적으로 리소스 공유를 허용 해주는 것 이라고 알고 계시면 좋을 것 같아요.

 

원래는 서로 끊겨 있었겠죠..? CORS 덕분에.. 가능해진겁니다bb..  ( 뜬금 없지만 뭔가 아래의 이미지가 떠올라서 첨부 해보았습니다 )

  

  

 

CORS의 작동 방식 ( = Simple Request ) ⚙️

 

1. CORS는 다른 리소스에 요청을 보낼 때, Origin 이라는 Header를 추가하여 보냅니다.

( Header의 Origin 항목에는 scheme(=HTTP, SMTP .. )  , 도메인, 포트 번호가 담깁니다. )

 

2. 이 요청을 받은 상대방은 답장 헤더에 지정된 Access-Control-Allow-Origin 정보를 실어서 보냅니다.

 

3. 만약 Origin 에 담겨있는 출처 값이 ACAO와 같으면 안전한 요청으로 간주하고 데이터를 받아 옵니다.