윈도우 노트북의 웹 브라우저에서는 로그인이 잘 됐는데 모바일에서 크롬을 열고 로그인을 시도하면 계속 실패했다, 그 원인을 오랫동안 찾아 헤맸다. 모바일 브라우저와 윈도우 브라우저의 메커니즘이 무언가 다른 것은 분명하다.
환경
- 크로스 도메인 요청
- https 요청
- 스프링에서 세션 쿠키 설정은 ,httpOnly, secure, same-ste: none을 적용했다,
아직까지 SameSite=None을 인식하지 못하는 클라이언트는 이를 무시하고 특성이 설정되지 않은 것처럼 계속 작동하게 됩니다.
버전이 낮은 브라우저는 SameSite = None을 지원하지 않는다. 그러한 브라우저는 SameSite=Lax인 것처럼 작동한다.
pc 브라우저에서는 지원하고 있지만 아직 모바일 브라우저에서는 지원이 안 되는 기능이 꽤 있다. 구글 공식 문서에서도 찾아볼 수 있다. 이게 원인으로 보인다. SameSite = None을 인식하지 못 했기 때문에 크로스 도메인인 서버 url로 요청을 보낼 때 요청에 쿠키를 실어 보내지 않는다.
이러한 원인을 파악했으니 생각할 수 있는 해결책은 도메인을 일치시키는 것이다. https 통신을 위해 도메인을 구매해서 서버 쪽에는 그 도메인을 사용 중이었다. 프론트엔드 쪽은 vercel로 호스팅됐고 vercel에서 제공하는 무료 도메인을 사용 중이었다. (XXX,vercel,app 형태)
일단 급한 대로 vercel에 app.cruitapp.com을 등록했다. cruitappl.com이 기존에 구매했던 도메인이다. www를 등록해주면 더 좋았겠지만 서버 요청이 www prefix로 들어오고 있었기 때문에 일단 app을 사용했다. 참고로 aws route53에서 cname을 추가해줘야 한다.
vercel이 도메인을 잘 등록해 준 뒤에 확인한 결과 app.cruitapp.com에서는 로그인이 성공, cruits.vercel.app에서는 로그인이 실패했다. 프론트엔드에서 백엔드와 같은 도메인을 사용해야만 한다. 그 이유는 모바일 브라우저에서 아직 same-site: None을 지원하지 않기 때문이다.
인용 사이트
'프로젝트 > 크루트' 카테고리의 다른 글
| service layer에서는 도대체 뭘 테스트 해야해요? (1) | 2022.03.31 |
|---|---|
| Entity에 @Transactional을 쓰고 싶은데 그래도 될까? (0) | 2022.03.28 |
| https와 cross domain으로 서버와 통신 시 쿠키 보내는 법 (0) | 2022.03.24 |
| 테스트 케이스를 private으로 작성하면 test를 못 읽어요 (0) | 2022.03.20 |
| vscode에서 template을 사용해서 귀찮음을 줄이자 (0) | 2022.03.18 |