🎯 CORS
🎾 CORS 란?
여러분들이 개발을 하다가 외부 API (ex 네이버지도api, 통합 뱅킹 api, 날씨 api)등을 사용할 때가 있습니다 . 이때 특정한 설정없이 사용하면 다음과 같은 에러가 발생합니다.
왜 이런 에러가 발생하고 어떻게 해결할까요??
이걸 알기전에 CORS부터 알아야합니다.
CORS(Cross-Origin Resource Sharing) 말 그대로 출처(Origin)가 다른 자원들을 공유한다는 뜻입니다.
쉽게 말하자면, 다른 출처(ex. 네이버지도 api , 날씨 api)의 자원에 접근해서 리소스를 사용한다는 뜻입니다.
그렇다면 출처가 다르다의 판단 기준은 무엇일까요?
이를 알기 위해서는 먼저 출처에 대해서 알아보겠습니다.
우리가 흔히 알고 있는 URL에서 도메인만 뜻하는 게 아니라 프로토콜과 포트까지 포함하는 개념입니다. 출처를 구성하는 세 요소는 프로토콜, 도메인(호스트 이름), 포트로, 이 중 하나라도 다르면 CORS 에러를 만나게 됩니다.
ex) 도메인(Hostname): myshop.com 출처(Origin): https://www.myshop.com
<출처: toss payments 개발자센터>
쉽게 표현해서 출처 = origin이 다르면 같은 사이트가 아니라고 판단하고 cors에러를 발생시키는 겁니다.
그렇다면 왜 cors에러라는 것을 만들었을 까요?
지금은 외부 API 사용(ex: 내가 만든 사이트에서 날씨 API로 요청을 보내 날씨 데이터를 받아오는 것)이 보편화 되었지만 옛날에는 이것이 금지되어있었습니다. 즉 브라우저에서는 허용하지 않았습니다. 하지만 시간이 지남에 따라 웹 생태계가 다양해지면서 여러 서비스들간에 보다 자유롭게 데이터가 주고 받아질 필요가 생겼고 이를 교류하려니까 브라우저가 다른 사이트간 요청을 막고 있으니까 개발자들은 JSONP등의 방식으로 이를 우회하는 꼼수를 사용하기 시작했습니다. 결국 이걸 합의된 출처들간에 합법적으로 허용해주기 위해 어떤 기준을 충족시키면 리소스 공유가 되도록 만들어진 매커니즘이 바로 CORS, 교차 출처 자원 공유 방식입니다.
🎾 SOP(Same-Origin Oplicy)
<출처: https://medium.com/@mr.tmkumaran/same-origin-policy>
SOP란 직역하자면 동일 출처 정책이란 뜻으로 동일한 출처의 리소스만 상호작용을 허용하는 정책입니다. 역으로 설명하면 A출처에서 온 문서가 B출처에서 가져온 리소스와 상호작용하는 것을 차단하는 보안 정책입니다.
두 URL의 프로토콜, 호스트, 포트가 모두 같아야 동일한 출처로 인정되며 웹 사이트를 샌드박스화 하여 잠재적인 보안 위협으로 부터 보호해주는 정책입니다.
🎾 만약 SOP가 없다면 어떻게 될까요?
SOP가 없는 상황에서는 악의적인 코드가 포함되어잇는 페이지에 접속하는 상황을 가정해봅시다.
사용자가 악성페이지에 접속하여 악의적인 코드가 실행되면 사용자가 모르는 사이테 포털사이트인 (ex. potal.example.com)에 임의의 요청을 보내고 그 응답 값을 해커의 서버로 재차 보내 사용자의 소중한 개인정보가 탈취되는 것입니다. 더 나아가 코드를 이용하여 사용자가 접속중인 내부망의 아이피와 포트를 스캐닝 하거나, 해커가 사용자브라우저를 르폭시처럼 사용할 수도 있을 것 입니다.
🎾 SOP 핵심은 아래와 같습니다.
- DOM에 대한 액세스
- 동일 출처 정책을 사용하면 웹 페이지에서 실행되는 스크립트가 동일한 출처의 DOM(문서 개체 모델)에 자유롭게 액세스하고 상호 작용할 수 있습니다.
- 데이터 보안
- 동일 출처 정책은 스크립트가 다른 도메인의 데이터를 읽거나 수정하는 것을 방지하여 중요한 데이터를 보호하는 데 도움이 됩니다.
요약하자면, 동일 출처 정책은 주로 클라이언트측 스크립트가 출처 간 요청을 하는 기능을 제한하고, 다른 도메인의 리소스에 대한 무단 액세스를 방지하여 보안을 강화하는 것을 목표로 합니다.
👍 Referece
'CS' 카테고리의 다른 글
| 쿠키와 세션 (1) | 2024.01.27 |
|---|---|
| 로드 밸런싱 (0) | 2024.01.21 |
| DNS / 웹 통신 흐름 (3) | 2024.01.13 |
| OSI 7 계층 (2) | 2024.01.07 |
🎯 CORS
🎾 CORS 란?
여러분들이 개발을 하다가 외부 API (ex 네이버지도api, 통합 뱅킹 api, 날씨 api)등을 사용할 때가 있습니다 . 이때 특정한 설정없이 사용하면 다음과 같은 에러가 발생합니다.
왜 이런 에러가 발생하고 어떻게 해결할까요??
이걸 알기전에 CORS부터 알아야합니다.
CORS(Cross-Origin Resource Sharing) 말 그대로 출처(Origin)가 다른 자원들을 공유한다는 뜻입니다.
쉽게 말하자면, 다른 출처(ex. 네이버지도 api , 날씨 api)의 자원에 접근해서 리소스를 사용한다는 뜻입니다.
그렇다면 출처가 다르다의 판단 기준은 무엇일까요?
이를 알기 위해서는 먼저 출처에 대해서 알아보겠습니다.
우리가 흔히 알고 있는 URL에서 도메인만 뜻하는 게 아니라 프로토콜과 포트까지 포함하는 개념입니다. 출처를 구성하는 세 요소는 프로토콜, 도메인(호스트 이름), 포트로, 이 중 하나라도 다르면 CORS 에러를 만나게 됩니다.
ex) 도메인(Hostname): myshop.com 출처(Origin): https://www.myshop.com
<출처: toss payments 개발자센터>
쉽게 표현해서 출처 = origin이 다르면 같은 사이트가 아니라고 판단하고 cors에러를 발생시키는 겁니다.
그렇다면 왜 cors에러라는 것을 만들었을 까요?
지금은 외부 API 사용(ex: 내가 만든 사이트에서 날씨 API로 요청을 보내 날씨 데이터를 받아오는 것)이 보편화 되었지만 옛날에는 이것이 금지되어있었습니다. 즉 브라우저에서는 허용하지 않았습니다. 하지만 시간이 지남에 따라 웹 생태계가 다양해지면서 여러 서비스들간에 보다 자유롭게 데이터가 주고 받아질 필요가 생겼고 이를 교류하려니까 브라우저가 다른 사이트간 요청을 막고 있으니까 개발자들은 JSONP등의 방식으로 이를 우회하는 꼼수를 사용하기 시작했습니다. 결국 이걸 합의된 출처들간에 합법적으로 허용해주기 위해 어떤 기준을 충족시키면 리소스 공유가 되도록 만들어진 매커니즘이 바로 CORS, 교차 출처 자원 공유 방식입니다.
🎾 SOP(Same-Origin Oplicy)
<출처: https://medium.com/@mr.tmkumaran/same-origin-policy>
SOP란 직역하자면 동일 출처 정책이란 뜻으로 동일한 출처의 리소스만 상호작용을 허용하는 정책입니다. 역으로 설명하면 A출처에서 온 문서가 B출처에서 가져온 리소스와 상호작용하는 것을 차단하는 보안 정책입니다.
두 URL의 프로토콜, 호스트, 포트가 모두 같아야 동일한 출처로 인정되며 웹 사이트를 샌드박스화 하여 잠재적인 보안 위협으로 부터 보호해주는 정책입니다.
🎾 만약 SOP가 없다면 어떻게 될까요?
SOP가 없는 상황에서는 악의적인 코드가 포함되어잇는 페이지에 접속하는 상황을 가정해봅시다.
사용자가 악성페이지에 접속하여 악의적인 코드가 실행되면 사용자가 모르는 사이테 포털사이트인 (ex. potal.example.com)에 임의의 요청을 보내고 그 응답 값을 해커의 서버로 재차 보내 사용자의 소중한 개인정보가 탈취되는 것입니다. 더 나아가 코드를 이용하여 사용자가 접속중인 내부망의 아이피와 포트를 스캐닝 하거나, 해커가 사용자브라우저를 르폭시처럼 사용할 수도 있을 것 입니다.
🎾 SOP 핵심은 아래와 같습니다.
- DOM에 대한 액세스
- 동일 출처 정책을 사용하면 웹 페이지에서 실행되는 스크립트가 동일한 출처의 DOM(문서 개체 모델)에 자유롭게 액세스하고 상호 작용할 수 있습니다.
- 데이터 보안
- 동일 출처 정책은 스크립트가 다른 도메인의 데이터를 읽거나 수정하는 것을 방지하여 중요한 데이터를 보호하는 데 도움이 됩니다.
요약하자면, 동일 출처 정책은 주로 클라이언트측 스크립트가 출처 간 요청을 하는 기능을 제한하고, 다른 도메인의 리소스에 대한 무단 액세스를 방지하여 보안을 강화하는 것을 목표로 합니다.
👍 Referece
'CS' 카테고리의 다른 글
| 쿠키와 세션 (1) | 2024.01.27 |
|---|---|
| 로드 밸런싱 (0) | 2024.01.21 |
| DNS / 웹 통신 흐름 (3) | 2024.01.13 |
| OSI 7 계층 (2) | 2024.01.07 |
