크롬은 되는데 사파리는 왜 안 될까?

분야

프로그래밍/소프트웨어 개발

대상자

백엔드 개발자, 웹 인증/쿠키 관리에 관심 있는 개발자

난이도: 중급~고급 (브라우저 보안 정책 이해 필요)

핵심 요약

• *쿠키 저장 실패 원인**:
• SameSite=None 설정으로 크롬은 정상 저장되지만, 사파리는 ITP 2.0 정책으로 서드파티 쿠키 차단
• 프론트엔드(chipsatbooks.vercel.app)와 백엔드(chipsat.shop) 도메인 불일치로 인해 서드파티로 간주
• *해결 전략**:
• 커스텀 도메인 통합(www.wowGood.com / api.wowGood.com)으로 도메인 일치
• SameSite=None + Secure + HttpOnly 설정 유지

섹션별 세부 요약

1. 문제 현상 및 원인 분석

• 사파리에서 로그인 실패: 쿠키 저장되지 않음
• Access Token과 Refresh Token을 HTTP-ONLY 쿠키로 저장
• 크롬은 정상 저장되나, 사파리는 SameSite=None 설정에도 쿠키 저장 거부

1. Safari의 SameSite 정책 및 ITP 2.0

• SameSite=None은 크로스 도메인 요청 시 쿠키 전송 허용
• ITP 2.0: 서드파티 쿠키 차단, 사용자 방문하지 않은 도메인 쿠키 차단
• 추적 목적 도메인 탐지 시 쿠키 저장 금지

1. 도메인 불일치로 인한 서드파티 차단

• 프론트엔드(chipsatbooks.vercel.app)와 백엔드(chipsat.shop) 도메인 불일치
• 사파리는 이 요청을 크로스 사이트 요청으로 인식, 쿠키 저장 거부
• SameSite=None 설정에도 ITP 정책 우선 적용

1. 해결 방안 및 구현 사례

• 커스텀 도메인 통합(www.wowGood.com / api.wowGood.com)
• 로그인 후 /books로 리다이렉트 시 쿠키 정상 전송 확인
• 사파리에서 로그인 성공 및 쿠키 저장 확인

결론

• *핵심 해결 방법**: 도메인 통합 및 SameSite=None + Secure + HttpOnly 설정 유지
• *실무 팁**:
• 크로스 도메인 인증 시 도메인 일치 필수
• 사파리 ITP 정책 대응: 커스텀 도메인 구매 또는 서버 도메인 일치
• SameSite 설정은 브라우저별 정책 차이에 따라 동작 방식 다름
• 쿠키 저장 실패 시 브라우저별 보안 정책 검토 필수