SOP / CORS

📑Origin

Origin은 "출처"를 나타내며 특정 리소스가 소속된 위치를 정의할 때 사용된다. 

 

📍출처를 구성하는 3가지 요소

1. 프로토콜(Protocol) -  [https / http]
2. 도메인(Hostname) -  [example.com]
3. 포트(Port) - (HTTP = 80 / HTTPS = 443)

이 3가지가 모두 일치해야 동일한 Origin이 된다.

 

📑SOP (Same-Origin Policy)

사용자의 데이터를 보호하고, 악성 스크립트가 다른 출처의 데이터를 무단으로 조작하는 것을 방지하기 위한 보안 메커니즘으로 동일한 Origin에 속하는 리소스만 서로 접근할 수 있도록 제한한다.

Origin의 개념을 기반으로 작동하며 SOP는 요청을 보낼 때 요청하는 리소스의 Origin을 검사하여 해당 Origin이 요청받는 리소스의 Origin과 확인한다. 만약 요청하는 Origin이 다르면 SOP에 의해 접근이 차단된다.

 

 

예시

1. 도메인(Hostname): tistory.com
2. 출처 (Origin): https://www.tistory.com (https 포트 443 /  http 포트 80)

URL	SOP을 준수 했는가? (접근이 가능한가)
https://www.tistory.com/example	✅ 프로토콜, 도메인, 포트 일치
https://www.tistory.com/example2	✅ 프로토콜, 도메인, 포트 일치
http://www.tistory.com:4000	❌ 프로토콜, 포트 불일치
https://en.tistory.com	❌ 도메인 불일치
http://www.tistory.com	❌ 프로토콜 불일치
https://www.tistory.com:4000	❌ 포트 불일치

 

📑 CORS (Cross-Origin Resource Sharing)란??

"Cross-Origin Resource Sharing, 교차 출처 리소스 공유" 즉, 서로 다른 Origin 간의 리소스 요청을 허용하는 메커니즘으로 SOP의 기본 제한을 완화하는 역할을 해준다.

 

보안이 중요하지만 개발 시 다른 출처 간의 상호작용을 해야할 케이스도 있기 때문에 이와 같은 예외 사항을 두기 위해 CORS 정책을 허용하는 리소스에 한해 다른 출처를 받아들이는 것이다.

 

📍브라우저의 CORS 기본 동작

• 클라이언트에서 HTTP요청의 헤더에 Origin을 담아서 전달한다.

1. 기본적으로 웹은 HTTP 프로토콜을 이용하여 서버에 요청을 보내는데 이 때 브라우저는 요청 헤더에 Origin이라는 필드에 출처를 함께 담아 보낸다.

 

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

1. 이 후 서버가 이 요청에 대한 응답을 할 때 응답 헤더에 Access-Control-Allow-Origin 이라는 필드를 추가하고 값으로 "이 리소스를 접근하는 것이 허용된 출처 URL"을 내려보낸다.

 

• 클라이언트에서 Origin과 서버가 보내준 Access-Control-Allow-Origin을 비교한다.

1. 이후 응답 받은 브라우저는 자신이 보냈던 Origin과 서버가 보내준 응답의 Access-Control-Allow-Origin을 비교한 후 차단여부를 결정한다.

 

---

🏷CORS 3가지 시나리오 작동 체험 사이트
https://chuckchoiboi.github.io/cors-tutorial

 

🔽 참고문헌 🔽

https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-CORS-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95-%F0%9F%91%8F

🌐 악명 높은 CORS 개념 & 해결법 - 정리 끝판왕 👏