TIL : SOP & CORS

김진권·2021년 12월 17일
Like LionTILcorssop
0

TIL

목록 보기
1/1
post-thumbnail

SOP (Same-origin policy) : 동일 출처 정책

The same-origin policy is a critical security mechanism that restricts how a document or script loaded by one origin can interact with a resource from another origin.

  • 한 출처에 의해 로드된 문서 또는 스크립트가 다른 출처의 리소스와 상호 작용할 수 있는 방법을 제한하는 중요한 보안 메커니즘

It helps isolate potentially malicious documents, reducing possible attack vectors.

  • 잠재적으로 악의적인 문서를 격리하여 공격 경로를 줄여준다.

😊 짧게 줄이자면 웹 브라우저에서 동작하는 프로그램은 로딩된 위치에 있는 리소스만(동일 출처에 있는 리소스만) 접근 할 수 있다는 보안 정책이라는 것이다.



❓ SOP에서 말하는 Origin(출처)의 정의는 무엇일까? :

Two URLs have the same origin if the protocol, port (if specified), and host are the same for both.
You may see this referenced as the "scheme/host/port tuple", or just "tuple". (A "tuple" is a set of items that together comprise a whole — a generic form for double/triple/quadruple/quintuple/etc.)

  • 두 URL의 프로토콜, 포트(명시한 경우), 호스트가 모두 같아야 동일한 출처라고 할 수 있다.

  • "스킴 / 호스트 / 포트 튜플"이나 그냥 "튜플"(2개 이상의 요소가 전체를 구성하는 집합)이라고 하기도 함.

  • 아래 표는 URL http://store.company.com/dir/page.html와 비교하여 출처가 같은지 아닌지 판단하고 있다.

URL결과이유
http://store.company.com/dir2/other.html성공경로만 다름
https://store.company.com/secure.html실패프로토콜 다름
http://store.company.com:81/dir/etc.html실패포트 다름 (http://는 80이 기본값)
http://news.company.com/dir/other.html실패호스트 다름

😊 protocol, host, port가 전부 일치해야 동일한 출처라 할 수 있으며 동일한 출처여야지 리소스 (script, document와 같은) 를 요청할 수 있음.



❓ Inherited origins? (상속된 출처)

Scripts executed from pages with an about:blank or javascript: URL inherit the origin of the document containing that URL, since these types of URLs do not contain information about an origin server.

  • about:blank와 javascript: URL은 출처 서버에 대한 정보를 가지고 있지 않다.
    따라서 이런 URL에서 실행하는 스크립트는 해당 URL을 가지고 있는 문서의 출처를 상속한다.

For example, about:blank is often used as a URL of new, empty popup windows into which the parent script writes content (e.g. via the Window.open() mechanism).

  • 예를 들어, about:blank는 부모 창에서 내용을 채워넣을 빈 팝업(Window.open() 등의 방식으로 생성)의 URL로 주로 사용됨.

If this popup also contains JavaScript, that script would inherit the same origin as the script that created it.

  • 만약 이 팝업이 JavaScript도 포함한다면 팝업을 생성한 스크립트의 출처를 따라가게 됩니다.

😊 URL 출처 서버에 대한 정보가 없는 페이지 (about:blank와 javascript: ex. 팝업 페이지)의 경우 그 페이지를 생성한 스크립트의 출처를 상속받게 된다는 이야기



✔️ Internet Explorer (IE)에서는 예외사항이 있다.

(IE만 해당된다!)

If both domains are in the highly trusted zone (e.g. corporate intranet domains), then the same-origin limitations are not applied.

  • 양쪽 도메인 모두가 높음 단계의 보안 수준을 가지고 있는 경우 동일 출처 제약을 적용하지 않는다.

IE doesn't include port into same-origin checks. Therefore, https://company.com:81/index.html and https://company.com/index.html are considered the same origin and no restrictions are applied.

😊 IE는 다른 브라우저와 예외점이 있다:
Origin확인에 port를 신경쓰지 않는다던가 양쪽 출처가 highly Trust Zone에 있는 경우 SOP가 적용되지 않는다거나~



❌ Changing origin (출처 변경하기)

Warning: The approach described here (using the document.domain setter) is deprecated because it undermines the security protections provided by the same origin policy, and complicates the origin model in browsers, leading to interoperability problems and security bugs.

  • 경고: 여기에 설명된 접근 방식(document.domain setter 사용)은 동일한 원본 정책에서 제공하는 보안 보호 기능을 약화시키고 브라우저의 원본 모델을 복잡하게 만들어 상호 운용성 문제와 보안 버그를 유발하므로 더 이상 사용되지 않는다.

😊 이제 사용 불가 (위와 같은 문제점이 발견되었기 때문에) :
자세한건 아래 출처의 MDN 문서 참고



✔️ Cross-origin network access (서로 다른 출처 네트워크 접근)

The same-origin policy controls interactions between two different origins, such as when you use XMLHttpRequest or an <img> element. These interactions are typically placed into three categories:

  • 동일 출처 정책은 서로 다른 출처 사이에서 XMLHttpRequest 혹은 <img> 요소를 사용할 때 등의 상호작용을 통제한다.

  • 상호작용은 보통 다음의 세 가지 범주로 나뉜다.

1️⃣ Cross-origin writes are typically allowed. Examples are links, redirects, and form submissions. Some HTTP requests require preflight.

  • 교차 출처 쓰기는 보통 허용한다.
    예시로는 링크, 리다이렉트, 양식 제출 등이 있다.

  • 일부 HTTP 요청은 preflight를 요구한다.

2️⃣ Cross-origin embedding is typically allowed. (Examples are listed below.)

  • 교차 출처 삽입은 보통 허용한다.
    예시는 아래

✳️ <script src="..."></script>로 추가하는 JavaScript.
그러나 구문 오류에 대한 상세 정보는 동일 출처 스크립트에서만 확인 가능
✳️ <link rel="stylesheet" href="...">로 적용하는 CSS. CSS의 느슨한 구문 규칙으로 인해,
교차 출처 CSS는 올바른 Content-Type 헤더를 필요로 한다. 브라우저 별 제한은 다르다.
✳️ <img>로 표시하는 이미지.
✳️ <video>와 <audio>로 재생하는 미디어.
✳️ <object>와 <embed>로 삽입하는 외부 리소스.
✳️ @font-face로 적용하는 글씨체. 하지만 일부 브라우저는 동일 출처를 요구할 수도 있음.
✳️ <iframe>으로 삽입하는 모든 것. X-Frame-Options 헤더를 사용해 교차 출처 프레임의 대상이 되는 것을 방지할 수 있다.

3️⃣ Cross-origin reads are typically disallowed, but read access is often leaked by embedding. For example, you can read the dimensions of an embedded image, the actions of an embedded script, or the availability of an embedded resource.

  • 교차 출처 읽기는 보통 불허하지만, 종종 교차 출처 삽입 과정에서 읽기 권한이 누출된다.
    가령 삽입한 이미지의 크기나, 삽입한 스크립트의 행동, 삽입한 리소스의 가용성 등을 읽을 수 있다.

공식문서를 읽으면서 내용을 이해할 수가 없었고
아래 출처의 이동욱님의 블로그를 통해 교차 출처 네트워크 접근에 대해 배울 수 있었다.

🚩 동일 출처 정책에 대한 처리

  • 만약 http://www.jinkwon1.com 에서 스크립트를 실행하고
    실행된 스크립트에 의해서 다른 origin인
    http://www.other.com 이 호출된다면
    SOP에 의해 호출 에러가 발생할 것이다.

  • 이를 해결하는 방법으로는 인프라 측면에서 프록시를 사용하는 방법이나
    JSONP와 CORS(Cross Origin Resource Sharing)이라는 방법이 있다.

1️⃣ 프록시를 이용하는 방법

  • 앞단에 Reverse Proxy를 넣어서 전체 URL이 같게한다면 스크립트가 로딩된 사이트 (http://www.jinkwon1.com) 와 스크립트에서 호출하고자 하는 API (http://www.other.com) 의 URL이 같아진다.

  • 간단하지만, 자사의 웹 사이트를 서비스하느 경우에만 가능. 그래서 자사의 서비스용 API를 만드는 경우에는 괜찮지만, 파트너사나 일반 개발자에게 자바스크립트용 REST API를 공개하는 경우에는 적절하지 않다.

2️⃣ 특정 사이트 접근 허용 방식

  • CROS 방식 : API 서버의 설정에서 모든 소스에서 들어오는 API 호출을 허용

  • 이는 HTTP로 API를 호출하였을 때 HTTP에 요청에 응답을 주면서 HTTP 헤더에 Request Origin(요청을 처리해 줄 수 있는 출처)를 명시하는 방식

  • (http://www.other.com)에서 응답 헤더에 다음과 같이 명시해주면 (http://www.jinkwon1.com)에 의해서 로딩된 스크립트 클라이언트 요청에 대해서만 api.my.com이 요청해준다.

Access-Controll-Allow-Origin: jinkwon1.com

  • 만약에 다음과 같이 *로 해주면 Request Origin에 관계없이 사이트에서 로딩된 자바스크립트 요청에 대해서 처리함.

Access-Control-Allow-Origin: *

3️⃣ Pre-flight를 이용한 세세한 CORS 통제

...SOP를 이해했단 느낌은 전혀없다. 문서의 뒤쪽으로 갈 수록 더 잘 모르겠어서 이만 글을 마친다. 조만간 다시 관련글을 읽어보고 정리할 예정 2021/12/17(금)

출처 : 동일 출처 정책 - 웹 보안 | MDN
SOP(Same-origin policy) 란 무엇일까? | 개발자 이동욱
What Is Same-Origin Policy | Acunetix

출처 : 교차 출처 리소스 공유 (CORS) - HTTP | MDN
CORS (Cross-Origin Resource Sharing) - [정리]소프트웨어 개발 지식창고 - 개발자, DBA가 함께 만들어가는 구루비 지식창고!

profile
김진권
start!

0개의 댓글