<aside> 👉 목차

</aside>

CORS & SOP

Origin, CORS, SOP와 CORS 시나리오에 대해 간단히 알아봅니다.

• 교차 출처 자원 공유
• 동일 출처 정책
• 사전 요청, 단순 요청, 인증 요청

<aside> 👉 javascript 공부 레포에 같이 저장

javascript/README.md at main · dusunax/javascript

</aside>

Origin이란?

<aside> 👉 출처 origin

• 웹 페이지 또는 자원에 액세스하는 특정 프로토콜, 호스트, 포트의 조합

확인하는 곳

• window location객체의 origin
• 브라우저의 관리자 도구의 네트워크 요청

  • Request의 origin 헤더

    

  • Response의 Access-Control-Allow-Origin헤더

    

</aside>

CORS와 SOP가 왜 필요하나요?

• 웹 어플리케이션의 보안을 위한 개념입니다.

  • CORS는 cross-site 공격을 막기 위한 보안 매커니즘입니다. ex) CSRF, XSS

  <aside> 🤔 CSRF (Cross-Site Request Forgery) : 이미 인증된 사용자가 웹 사이트에서 작업을 수행하도록 속이는 공격입니다. 이는 사용자가 방문하는 웹 사이트에 악성 링크 또는 양식을 삽입하여 수행될 수 있습니다. 사용자가 클릭하면, 대상 웹 사이트에서 작업이 수행되며 사용자는 이를 알지 못합니다. CORS는 인증된 도메인으로부터의 요청만 허용하고 인증되지 않은 도메인으로부터의 요청은 거부하는 것으로 CSRF를 방지할 수 있습니다.

  XSS(Cross-Site Scripting) : 공격자가 웹 사이트에 악성 스크립트를 삽입하는 공격입니다. 이는 웹 사이트가 사용자 입력을 적절하게 검증하지 않고 악성 코드를 실행할 수 있는 경우 발생할 수 있습니다. CORS는 인증된 도메인에서만 스크립트를 실행하도록 하여 XSS 공격을 방지할 수 있습니다. (+XSS filter, whitelist lib)

  </aside>

  개념	영어	쓰임	요약
  CORS	Cross-Origin Resource Sharing	보안 매커니즘	서버가 다른 도메인의 자원에 액세스 하도록 허용
  CSRF	Cross-Site Request Forgery	보안 공격	인증된 사용자가 악성 링크에서 작업을 수행하도록 함
  XSS	Cross-Site Scripting	보안 공격	웹 사이트에 악성 코드를 삽입하여 실행하게 함

Cross-Origin Resource Sharing

<aside> 👉 CORS는 "Cross-Origin Resource Sharing", 교차 출처 자원 공유의 약자입니다.

하나의 도메인에서 작성된 웹 페이지가 다른 도메인의 자원에 액세스할 수 있도록 허용하는 정책입니다. 웹 브라우저는 기본적으로 다른 도메인으로의 요청을 허용하지 않기 때문에 CORS가 필요합니다.

즉, CORS는 서버가 다른 도메인의 웹 페이지에서 자원에 액세스 할 수 있도록 허용하게금 합니다.

</aside>

SOP Same-Origin Policy

<aside> 👉 SOP는 "Same-Origin Policy" 동일 출처 정책의 약자입니다.

하나의 origin에서 작성된 웹 페이지가 다른 origin의 웹 페이지 또는 자원과 상호 작용하는 것을 방지하는 것입니다.

(자원 예시: 스크립트, 이미지, 스타일시트 등)

</aside>

같은 출처 예시

• https://google.co.kr와 같은 origin인지 여부를 확인합니다.

<aside> 🤔 port에 대한 CORS 정책이 명확하지 않았기 때문에, 같은 호스트의 다른 프로토콜이 동일 출처이냐에 대해서 브라우저의 차이가 있었습니다.

(IE : 포트가 다르면 같은 출처로 인정하지 않음)

</aside>