[CS] site와 Origin을 아시나요

카테고리 없음

ehddkDEV 2024. 10. 15. 21:52

웹 개발을 하다보면 위와 같은 CORS 에러를 마주한 적(or 마주하게 될)이 있을것이다..

When? 언제 일어나는가?

프론트 서버 http://localhost:3000 -> 백서버 http://localhost:4000 로 API요청을 보낼때

Cross Origin ReSource로 서로 다른 origin 간 HTTP 요청이 가능하도록 해주는 표준정책이며,

Cross-Site HTTP Requests가 가능하다. CORS에러는 다른 출처(origin)에서 리소스를 요청할 때 발생하는 보안 정책 위반이기 때문에

이를 해결하려면 각 단어의 의미가 무엇인지 알아야 한다!

이제 Origin, Cross, site,same 부터 알아보자.

URL에서 path를 제외한 모든 부분을 말한다.

= Protocol + Host + Port

https://www.naver.com:443/tel
- https: 프로토콜 스키마
- www : 서브도메인
- www.naver.com: 호스트
- 443 : 포트번호
- tel : 패스(path)

https://www.naver.com:443 가 origin이다!

1-1. same origin ? cross-origin?

브라우저 보안 정책에는 SOP(same-origin-policy) 정책이라는 것이 있다.

이 정책으로 인해 해커가 토큰이나 쿠키 등과 같이 사용자의 정보와 관련된 데이터를 탈취하는 것을 막는다.

📌 Same-Origin(동일 출처)

'same' 말 그대로 자신과 동일한 도메인만 서버로부터 데이터를 요청하여 받을 수 있도록 하는 정책이다.

포트번호,도메인,호스트가 다 일치하면 same origin

📌 Cross-Origin(교차 출처)

도메인은 같아도 포트번호,스키마 등등이 하나라도 다르면 cross origin.

url	여부
https://naver.com:443	cross-origin: 서브도메인이 불일치
https://mail.naver.com:443	cross-origin: 서브도메인이 불일치
http://www.naver.com:443	cross-origin: 프로토콜 스키마 불일치
https://www.naver.com:443	same-origin : 정확한 일치
https://www.naver.com	same-origin : 암묵적인 포트번호 일치(https 포트번호는 443이니까)

site는 cross와 다르게 프로토콜 스키마,포트번호, 서브 도메인과 불일치 여부 상관없이 도메인만 같으면 된다.

도메인은 같지만 서브도메인이 다르면 same-site이자 cross-origin이다.

도메인,서브도메인이 같지만 포트가 다르다 = same -site , cross-origin

이때, same-origin이려면 모든 것(포트번호,스키마,서브 도메인)이 같아야 한다!

도메인 자체가 다르면 same-site,same-origin이 아니다.

mail.naver.com / www.naver.com => 도메인은 같지만 서브도메인이 다르니까 same-site, cross-origin이다.

Q: 웹 서버인 api 서버를 배포할때는 api.naver.com처럼 서브도메인에 api를 덧붙인다. 근데 cors가 나는 이유는?

A: 우리가 실제로 웹사이트에 접속할때는 api.~~가 아니라 www.~~으로 접속하니까 바로 서브도메인이 달라서 CORS 에러가나는 것이다.

그래서 samesite 보안옵션을 이용해 쿠키가 전송되는 조건을 제한하여 XSRF(크로스 사이트 요청 위조: cross-site request forgery)

공격을 막는 것!