개발일지

CORS란 무엇이고 어떻게 허용할 수 있나요? 본문

Javascript

CORS란 무엇이고 어떻게 허용할 수 있나요?

wa_n 2023. 3. 21. 19:08
728x90
반응형

웹사이트에서 주소가 다른 서버로 요청을 보낼 때 cors에러가 발생 브라우저에서 다른 주소의 요청을 막음

예를 들어 해킹을 하기 위한 가짜사이트를 만들어 이 사이트 링크나 접속을 유도해서 유저가 접속하면 브라우저에 저장된 토큰, 쿠키에 저장된 다른 사이트의 유저개인정보를 탈취당하기 때문에 브라우저가 어떤 사이트에서 다른 사이트로 요청이 못 가게끔 막아주는 역할은 SOP(same-origin-policy) 동일 출처 정책 동일한 url끼리만 api 등의 데이터 접근이 가능하도록 막아준다.

 

CORS(Cross-Origin Resource Sharing)는 SOP로 막힌 걸 풀어주는 역할, SOP(동일출처)의 반대개념 다른 출처 간의 리소스를 공유할 수 있도록 하는 걸 말한다.

출처는 보내고 받는 각각의 위치 - 즉 웹사이트랑 api의 주소 리소스는 주고받아지는 데이터라고 생각하면 된다 자신이 만든 웹사이트에서 네이버지도 api를 정보요청과 반환이 가능하도록 하는 게 CORS이다

원래 브라우저에서는 서로 다른 출처끼리 요청을 주고받는 건 안 되는 게 기본값이었다. 웹 생태계가 다양해지면서 여러 서비스들 간에 자유롭게 데이터가 주고받아질 필요가 생겼지만 브라우저가 다른 사이트 간의 요청들을 막고 있어서 개발자들이 JSONP방식으로 우회하는 방법을 사용하기 시작하였습니다.

이걸 합의된 출처들 간에 합법적으로 허용해 주기 위해 어떤 기준을 충족시키면 리소스를 공유가 되도록 만들어진 메커니즘이 CORS(교차 출처 자원 공유방식) 여기서 그 기준이 요청받는 백엔드 쪽에서 이걸 허락할 다른 출처들을 명시해 주면 가능합니다. 백엔드 서버프로그래밍할 때 쓰이는 프레임워크들의 독스를 살펴보면 cors옵션을 넣는 방법이 나와있다.

728x90
반응형

'Javascript' 카테고리의 다른 글

구조 분해 할당  (0) 2023.02.28
JavaScript & Node.js  (0) 2022.12.16
let, const, var (scope 개념에서의 차이)  (0) 2022.11.22
undefined,null  (0) 2022.11.20
JS 기본상식 null과 undefined 차이  (0) 2022.11.08