> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/javascript/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/javascript/web/ajax/cross-domain/sop.md).

# 동일 출처 정책(SOP)

## 동일출처정책

Ajax 프로그래밍으로 웹 개발을 하다보면 기대했던 결과와 달리 브라우저 콘솔 패널에 다음과 같은 오류가 뜰 수 있다.

![](https://1609565946-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MQBEZ0w9UlpTQnX-DAe%2F-MR4Qez33CQpf9l5ppyT%2F-MR4R241POSyGGW18AaY%2Fimage.png?alt=media\&token=f87ef42c-4429-4e0b-ab82-ce0f95a99053)

> No 'Access‑Control‑Allow‑Origin' header is present on the requested resource. Origin ‘요청한 도메인' is therefore not allowed access.

Firefox의 경우는 다음 문구로 오류를 출력한다.

> 교차 출처 요청 차단: 동일 출처 정책으로 인해 \[요청한 도메인]에 있는 원격 자원을 차단 하였습니다. (원인: 'Access‑Control‑Allow‑Origin' CORS 헤더가 없음).

No 'Access Control Allow Origin', not allowed access 문구로 보아 "접근을 허용하지 않는다."는 오류를 출력한다. 왜 접근이 막힌 것 일까?

이유는 웹 애플리케이션 보안 모델에서 중요한 개념 중 하나인 "[동일 출처 정책(SOP, same-origin policy)](https://developer.mozilla.org/ko/docs/Web/Security/Same-origin_policy)" 때문이다. Firefox 오류를 보면 "동일 출처 정책으로 인해"라는 문구를 확인할 수 있다.

**SOP는 "동일 출처 정책"으로 한 출처(Origin)에서 로드 된 문서나 스크립트가 다른 출처의 자원과 상호 작용하지 못 하도록 제한 하는 것을 말한다.**

이 정책에 의해 **XMLHttpRequest 객체**로 특정 웹 페이지에 접근할 때, 해당 웹 페이지와 **동일한 출처**(Same Origin)의 페이지에만 **접근**이 가능한 것이다. 동일한 출처라고 하는 것은 프로토콜(protocol), 호스트(host), 포트(port)가 같아야 함을 말한다.

![](https://1609565946-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MQBEZ0w9UlpTQnX-DAe%2F-MR4RTERtU5u73nPH5CF%2F-MR4Sf7fvJvJ_7dtZ32A%2Fimage.png?alt=media\&token=f46eb1ce-13ff-41d6-89c7-7bcd47ce7f57)

즉, 쉽게 말해 웹 페이지 스크립트는 **해당 페이지와 동일한 서버에 있는 데이터만 Ajax 비동기 요청하여 처리할 수 있다.** 아래 그림은 동일 출처의 데이터 요청(Same-origin requests)과 다른 출처의 데이터 요청(Cross-origin requests)에 대해 말하고 있다. A 서버에 요청한 데이터는 항상 허용(always allowed)되지만, B 서버에 요청한 데이터는 그렇지 않다. (Ajax 요청 시)

![](https://1609565946-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MQBEZ0w9UlpTQnX-DAe%2F-MR4ToFyfhCb1X5rJDDY%2F-MR4_h_8m3yoaUXqdS9x%2Fimage.png?alt=media\&token=4887aeef-5de0-45e9-90ed-21d5a4fb538e)

프로토콜, 호스트, 포트가 달라, 동일 출처 정책에 의해 차단 되기 때문이다. [크로스 사이트 스크립팅(XSS, Cross-site scripting)](https://developer.mozilla.org/en-US/docs/Web/Security/Types_of_attacks#cross-site_scripting_xss)은 해킹 이슈가 있어 보안상, 동일 출처 정책(SOP)이 필요한 것이다. 이 정책이 초기에는 웹 사이트의 보안을 위한 좋은 방법으로 생각 되었으나, 최근에는 여러 도메인에 걸쳐 구성되는 대규모 웹 프로젝트가 늘어나고, REST API등을 이용한 외부 호출이 많아지는 상황 이라,서비스 개발에 걸림돌이 되어버렸다. 

{% hint style="info" %}
이 글은 **"CORS: 서버(Server) 개발단 해결책"**과  내용이 이어진다. 
{% endhint %}

## 정리 

동일 출처 정책(SOP)은 한 서버의 문서가 다른 서버의 자료와 상호작용이 불가능 한 것을 말한다. 

왜 SOP가 필요한가? 크로스 사이트 스크립딩과 같은 웹 보안 이슈 때문에 필요하다. 

결론, SOP 때문에 작업중인 페이지와 같은 서버에 있는 자료만 Ajax로 비동기 요청이 가능하다.