📌 1. SOP(Same-origin Policy)란?

---

📎 SOP란?

동일 출처 정책(Same-origin Policy)은 어떤 출처에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 중요한 보안 방식이다.

📎 SOP의 필요성

인터넷상의 악의적인 사이트들의 공격들과 잠재적으로 해로울 수 있는 문서를 격리해 보안 위협으로부터 보호할 수 있다.

예를 들어, 특정 사이트에 로그인을 하면 다시 로그인할 필요가 없도록 로그인이 유지되는 것을 본적이 있을 것이다. 로그인 유지를 위해 사용하는 것이 쿠키인데, 여기에 로그인 정보가 저장되어 있어 사이트에 접속할때마다 로그인이 유지될 수 있도록 해준다. 만약 해커가 해킹을 위해 만든 사이트에 사용자가 접속하면 사용자 컴퓨터에 등록되어 있는 쿠키가 해당 사이트에 흘러들어가게된다. 그리고 해커들이 쿠키를 이용해 사용자 개인정보를 빼내올 수 있는 치명적인 보안 문제를 야기할 수 있는 것이다.

때문에 SOP와 더불어 CORS는 악의적인 공격을 막는 보안 메커니즘은 반드시 필요한 존재들이다.

📎 출처(Origin)란?

SOP에서 이야기하는 출처가 무엇인지 먼저 살펴보기 전에 URL 구조를 알고 넘어가는 것이 좋다. URL 구조는 아래 그림과 같다.
프로토콜의 HTTP는 80번, HTTPS는 443번 포트를 사용하는데, 80번과 443번 포트는 생략이 가능하다.

출처는, 위 URL 구조에서 살펴본 Protocol, Host, Port를 합친 것을 말한다. 브라우저 개발자 도구의 콘솔 창에 location.origin를 실행하면 출처를 확인할 수 있다.

📎 동일 출처(Same-origin)의 정의

요청한 출처와 응답할 출처를 비교해서 Protocal, host, port가 같다면 동일출처(Same-origin)이라고 한다.

아래 표는 https://news.google.com와 동일 출처(Same Origin)인가를 비교한 것이다.

URL	결과	이유
https://news.google.com/other.html	성공	경로만 다른건 괜찮음
https://news.google.com:8080	실패	포트가 다름
http://news.google.com	실패	프로토콜이 다름
https://coin.google.com	실패	호스트가 다름

📎 출처(Origin)의 상속

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

📎 Internet Explorer에서 예외사항

👉 Trust Zones: 양쪽 도메인 모두가 높은 단계의 보안 수준을 가지고 있는 경우 동일 출처 제약을 적용하지 않는다.
👉 Port: 포트번호는 Origin을 체크할 때 포함되지 않는다. 즉, 다른 포트로 요청을 할 수 있다.

📎 출처(Origin)의 변경

document.domain에 값을 할당하는 방식으로 약간의 제한과 함께 사용할 수 있지만, 보안적인 이유로 사용하지 않는다.

📎 Cross-origin 접근 처리

SOP는 교차접근(Cross-origin)에 대해 3가지 카테고리로 나누고 각각 다르게 처리한다.

• 쓰기: 일반적으로 허용한다. 일부 HTTP요청은 CORS의 preflight가 필요하다.
  • 링크, 리다이렉트, 폼 제출
  • <a>
  • <form>으로 다른 origin에 데이터를 쓰는 작업
• 임베딩: 일반적으로 허용한다.
  • <script src="..."></script>
  • <link rel="stylesheet" href="…">
  • <img>, <video>, <audio>, <object>, <embed>
  • @font-free
  • <iframe>
• 읽기: 일반적으로 허용하지 않는다.
  • 보통 JavaScript코드로 접근하는 행위들이 해당된다.
  • JavaScript로 iframe내의 document에 접근
  • JavaScript로 canvas내에 다른 origin의 이미지를 불러오는 작업
  • JavaScript로 다른 리소스를 fetch하는 작업
    
    
    

📌 2. CORS(Cross-Origin Resource Sharing)란?

---

📎 CORS란?

교차 출처 리소스 공유(Cross-origin Resource Sharing)는 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다.

📎 CORS 동작 종류

CORS의 동작 방식은 Simple Request(단순 요청 방법)과 Preflight Request(예비 요청)을 먼저 보내는 방법 2가지가 대표적으로 존재한다.

👉 Simple Request(단순 요청)

단순 요청 방법은 서버에게 요청을 바로 보내는 방법이다.

• Simple Request 동작 방법: 단순 요청은 서버에 API를 요청하고, 서버는 Access-control-Allow-Origin 헤더를 포함한 응답을 브라우저에 보낸다. 브라우저는 Access-Control-Allow-Origin 헤더를 확인해서 CORS 동작을 수행할지 판단한다.

• Simple Request 조건: 서버로 전달하는 요청이 3가지 조건을 만족해야 서버로 전달하는 요청이 단순 요청으로 동작한다.

  • 요청 메소드는 GET, HEAD, POST 중 하나여야 한다.
  • Accept, Accept-Language, Content-Language, Content-Type, DPR, Downlink, Save-Data, Viewport-Width, Width를 제외한 헤더를 사용하면 안된다.
  • Content-Type 헤더는 application/x-www-form-urlencoded, multipart/form-data, text/plain 중 하나를 사용해야 한다.

👉 Preflight Request(예비 요청)

Preflight 요청은 서버에 예비 요청을 보내서 안전한지 판단한 후 본 요청을 보내는 방법이다.

• OPTIONS메소드로 서버에 예비 요청을 먼저 보내고, 서버는 이 예비 요청에 대한 응답으로 Access-control-Allow-Origin 헤더를 포함한 응답을 브라우저에 보낸다. 브라우저는 단순 요청과 동일하게 Access-control-Allow-Origin 헤더를 확인해서 CORS 동작을 수행할지 판단한다.
• 2번이나 요청하는 것이 서버에 부담이 될 수 있지만 이 세상에 있는 모든 서버가 CORS를 인지하는 것은 아니다. CORS를 모르는 서버에 단순 요청을 보내면 접근 권한을 줄 수 없다고 하더라도 요청이 진행되는 경우가 생길 수 있다. 그래서 예비 요청을 통해 어떠한 서버든 안전한 응답을 받을 수 있는 예비 응답 방법이 필요한 것이다.

📎 CORS의 Credentials에 따른 분류

CORS는 동작 방식으로 나누어지기도 하지만, 인증 정보 및 쿠키를 전송하는 지에 대한 여부에 따라 나누어지기도 한다.

👉 Credential

• HTTP Cookie와 HTTP Authentication 정보를 인식할 수 있게 해주는 요청
• xhr.withCredentials=true

👉 Non-credential

• HTTP Cookie와 HTTP Authentication 정보를 인식할 수 없는 요청
• xhr.withCredentials=false

📎 Credentials의 3가지 옵션

만약, 다른 사이트로의 요청에 쿠키와 같은 인증정보를 포함시키고 싶으면 credentials: 'include'을 옵션을 추가한다. 이 외에도 아래와 같이 다양한 옵션이 존재한다.

1. Same-origin: 같은 출처 간 요청에만 인증 정보를 담을 수 있다.
2. Include: 모든 요청에 인증 정보를 담을 수 있다.
3. Omit: 모든 요청에 인증 정보를 담지 않는다.

📎 Credentials의 동작 조건

1. Access-Control-Allow-Origin: * 이면 안되며, 명시적인 URL을 설정하여햐 한다.
   ex) Access-Control-Allow-Origin: https://xxx.com
2. 응답 헤더에는 반드시 Access-Control-Allow-Credentials: true가 존재해야한다.
   
   
   

📖 출처

• https://koras02.tistory.com/96
• https://velog.io/@pilyeooong/CORS%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80
• https://valuefactory.tistory.com/1141
• https://beomy.github.io/tech/browser/cors/
• https://java119.tistory.com/67
• https://velog.io/@shroad1802/Same-origin-Policy-SOP
• https://velog.io/@dyjung123/CORS%EC%9D%98-%EB%B0%B0%EA%B2%BD%EC%9D%B8-SOP%EB%9E%80