본문 바로가기
프론트엔드

크롬 80 버전 - SameSite CORS 이슈 PHP

by 디지털노마더 2021. 5. 8.

<증상>

 최근에 고객으로부터 회원가입 과정에서 이메일 인증에 오류가 발생하여, 정상적으로 회원가입이 어렵다는 문의를 받았다. 

재현을 위해서 다양한 브라우저에서 시도해보았다. Explorer, Edge 환경에서는 회원가입이 정상적이었으나, Chrome 환경에서는 세션값이 제대로 전달되지 않는 문제가 발생했다. 

 

<분석>

특정 브라우저에서만 안되는 문제를 찾기 위해 구글링 하던중, SameSite CORS 라는 키워드를 발견.

 

여기서 CORS는 Cross-Origin Resource Sharing의 줄임말이다. 리소스 공유를 서로 다른 도메인간에는 금지.

한마디로 도메인이 서로 다른 사이트간에 통신은 보안상의 이슈로 제한한다는 내용이다.

 

출처 : 모질라 웹사이트

나의 경우는, 도메인은 동일했지만 서브 도메인이 약간 달랐다. 

ex) https://pg.doamin.com , http://main.domain.com 

 

메인 도메인은 동일했으므로 CORS 규칙에는 위배되지 않았다.

문제는 다른 곳에 있었습니다.

 

접근 포트(https, http)가 서로 달랐습니다. 저의 경우는 http로 통일시켜서 iframe을 통한 POST 통신이 정상적으로 이루어짐을 확인할 수 있었습니다.

 

하지만 권장하는 사항은 https로 네트워크 통신을 권장합니다.

 

▷ 같은 출처와 다른 출처의 구분

 두 URL의 출처가 같은지 다른지는 3가지(Scheme, Host, Port)로 판단할 수 있다.

 

https://pg.domain.com:80 라는 URL을 예로 들면 https:// 라는 Schemepg.domain.com 라는 Host를 가지고 :80Port를 사용하고 있다는 것만 같고, 나머지는 전부 다르더라도 같은 출처로 인정된다는 것이다.

 

앞서 나의 경우, 포트가 달랐기 때문에 CORS 규칙에 딱 걸린 것이다.

 

여기서 중요한 사실 한 가지는 출처를 비교하는 로직이 서버에 구현되는 것이 아니라 브라우저에 구현되어 있는 스펙이라는 것이다. 그래서 브라우저 종류마다 CORS 정책에 차아가 있을 수 있다.

 

만약 우리가 CORS 정책을 위반하는 리소스 요청을 하더라도 해당 서버가 같은 출처에서 보낸 요청만 받겠다는 로직을 가지고 있는 경우가 아니라면 서버는 정상적으로 응답을 하고, 이후 브라우저가 이 응답을 분석해서 CORS 정책 위반이라고 판단되면 그 응답을 사용하지 않고 그냥 버리는 순서인 것이다.

 

출처 : Evans Library

 

댓글