SOP, CORS

SOP

• Same Origin Policy → 동일 출처 정책.
  
  • 동일한 출처(프로토콜, 호스트명, 포트가 모두 같아야 함)의 리소스에만 접근하도록 제한!
  • https://duckgugong.kr:80 → https: 프로토콜, duckgugong.kr: 호스트명, 80: 포트
• 브라우저는 동일한 서버가 아닌 곳에서 받아온 데이터를 기본적으로 차단한다. 예를 들어 https://duckgugong.kr에서  로그인을 한 후 쿠키에 토큰을 받은 후 https://duck90.kr에 접속해서 axios나 ajax를 이용해서 HTTP 요청을 보내면 자동으로 쿠키에 토큰이 전송된다!
• 이러한 이유로 브라우저는 기본적으로 HTTP 요청(axios, ajax, javascript)을 동일한 출처로 제한했다!

CORS

• Cross Origin Resouces → 교차 출처 리소스 공유
  • SOP와 다르게 다른 출처에서도 HTTP 요청과 응답을 허용하는 정책이다. Origin이 달라도 서버나 클라이언트에서 CORS 옵션을 허용해주면 다른 Origin으로 응답을 보낼 수 있다!
• 예를들어 프론트와 백엔드 개발을 할 때 프론트 서버가 localhost:3000이고 백엔드 서버가 localhost:8080이라면 기본적으로 프론트서버에서 백엔드 서버로 HTTP 요청을 할 때, 포트가 달라서 다른 출처로 인식해 HTTP 요청이 되지 않지만 서버측에서 CORS 설정을 해주면 HTTP 요청이 가능해진다!
• 기본적으로 Cross origin 정책을 따르는 HTML은 별도의 설정 없이 link 태그 내 href에서 다른 출처의 css나 리소스에 접근할 수 있고 img 태그의 src에서 다른 출처의 리소스를 가져오는 것도 가능하다!

CORS 동작 과정 (Simple Request)

1. 클라이언트가 HTTP 요청 헤더에 Origin 을 담아 전달

Origin: http://duck90.site

2. 서버는 HTTP 응답 헤더에 Access-Control-Allow-Origin을 담아 클라이언트로 전달

Access-Control-Allow-Origin: http://duck90.site

3. 클라이언트는 자신이 보낸 Origin과 서버에서 응답받은 Access-Controll-Allow-Origin을 비교

• Origin과 Access-Control-Allow-Origin이 같다면 응답을 사용하고 그렇지 않으면 응답을 버린다!
• 콘솔에서 확인 가능

 

CORS 동작 방식 → Simple Request

아래 3가지 경우를 만족할 때, Simple Request 방식으로 요청을 한다!

• HTTP 메서드가, GET, POST, HEAD 중 하나일 때! PUT, DELETE는 무조건 Preflight
• User Agent가 자동으로 설정한 헤더 이외에 수동으로 설정할 수 있는 헤더는 Fetch 명세에서 "CORS-safelisted requesteh-header"로 정의한 헤더만 사용할 때
• POST일 땐, Content-Type 헤더가 application/x-www-form-urlencoded, multipart/form-data, text/plain 중 하나일 때

CORS 동작 방식 → Preflight Request

• 브라우저가 HTTP 요청을 보낼 때 예비 요청과 본 요청을 나누어서 서버에 전달!
  • 예비요청은 본 요청을 보내기 전 브라우저가 안전한 요청인지 확인하는 것
• 브라우저가 보내는 예비 요청이 Preflight라고 부르고 OPTIONS라는 HTTP 메서드가 사용된다!
• PUT, DELETE 와 같은 요청을 보낼때 이용된다.