[SSO 로그인 흐름 8편] 직접 들여다보자! DevTools로 SSO 흐름 추적하기

이제는 진짜 눈으로 본다 – 개발자 도구를 켜자

지금까지 SSO의 개념과 흐름, SAML Assertion 구조, Azure AD·Okta 같은 실제 사례까지 알아봤습니다.

 

이번 편에서는 진짜 브라우저 안에서 무슨 일이 벌어지는지 직접 확인해보겠습니다.

 

사용 도구는 바로 크롬 개발자 도구 (DevTools). 프런트엔드 개발자들만 쓰는 게 아닙니다. SSO 트래픽을 이해하고, 디버깅하고, 보안 점검하기 위해 필수입니다.

---

실습 환경 준비

실습 예제

예: Google Workspace, Microsoft 365, Okta Demo, GitHub SSO 연동 계정 등
(개인적으로 사용하는 Google 계정도 가능)

준비 도구

• 크롬 브라우저 (또는 Edge, Brave 등 Chromium 기반 브라우저)
• DevTools 열기: F12 또는 Ctrl + Shift + I → Network 탭 클릭
• 필터 설정: SAML, login, POST, 302, Set-Cookie 등으로 요청 필터링

---

어떤 걸 보면 좋을까?

1. SP → IdP 리디렉션 요청 (302 Redirect)

• 예시 요청 URL:
• https://login.microsoftonline.com/...SAMLRequest=...
• 특징:
  • HTTP 302 응답
  • 브라우저가 자동으로 다른 URL로 이동
  • 쿼리 스트링에 SAMLRequest 포함됨

2. IdP 로그인 요청 (POST or GET)

• 사용자가 로그인 폼 제출 → IdP로 POST 요청 발생
• 요청 본문에 사용자 입력 ID 포함 (패스워드는 브라우저에서 보이지 않음)
• MFA가 있다면 추가 요청도 이 시점에 발생

3. IdP → SP로 SAML Assertion 전송 (POST)

• 예시 요청 URL:
• https://sp.example.com/sso/acs
• 요청 방식: POST
• 폼 데이터 중 하나에 SAMLResponse=...
• Base64로 인코딩된 긴 문자열 (SAML Assertion)

→ 이 값을 복호화하면 XML 형식의 Assertion 내용을 확인할 수 있습니다. (※ 민감 정보 주의)

4. SP의 세션 생성 (Set-Cookie)

• SP가 로그인에 성공하면 Set-Cookie 헤더로 세션 쿠키 발급
• 브라우저는 이 쿠키를 저장해 이후 요청에 자동으로 포함

---

예시: Google Workspace 로그인 흐름 살펴보기

1. 접속: https://mail.google.com
2. 리디렉션: https://accounts.google.com/o/saml2/...
3. 로그인 폼 제출 (ID 입력 → 비밀번호 → MFA)
4. POST 요청 → SAMLResponse 포함
5. 리디렉션 → Gmail 인터페이스 등장

이 전체 흐름은 Network 탭에서 요청 순서대로 나타납니다.

---

팁: SAML Assertion 복호화해보기

1. DevTools에서 SAMLResponse= 값 복사
2. 웹 도구 사용:
   https://www.samltool.com/decode.php
3. Base64 디코딩 → XML 구조 확인
   • <Assertion>
   • <NameID>
   • <AttributeStatement> 등

단, 회사 계정이나 민감한 Assertion은 복호화하지 마세요. 실습용, 퍼블릭 데모용 계정에서만 권장!

---

문제가 생겼을 때 어디를 확인해야 하나요?

문제확인	포인트
로그인 창이 안 뜸	SP → IdP 리디렉션 요청이 일어나는지 (302)
로그인 후 리디렉션 안됨	SAMLResponse 포함된 POST 요청 존재 여부
로그인 실패	Assertion XML에 에러 메시지 포함 여부
자동 로그인 안 됨	브라우저 쿠키가 제대로 전송되고 있는지 확인

 

DevTools는 SSO 문제의 원인을 패킷 캡처 없이도 빠르게 분석할 수 있게 해줍니다.

---

마무리 정리

DevTools를 통해 우리는:

• SAMLRequest → 로그인 → SAMLResponse → 세션 생성
• 이 모든 흐름이 브라우저 요청/응답 안에서 이뤄지는 걸 확인했습니다.

이제 단순히 “SSO는 편리하다”가 아니라 “내가 지금 이 요청을 통해 어떤 인증 흐름에 위치하고 있는지” 스스로 파악할 수 있는 실력을 갖췄습니다.

---

다음 예고: 보안 이슈와 공격 시나리오

이제 거의 마지막입니다.

 

다음 9편에서는 SAML SSO 환경에서 발생할 수 있는 보안 위협들 – 예:

• SAML Assertion 위조
• Replay 공격
• 중간자 공격(MITM)
• IdP 오용 문제

등을 살펴보며, 안전한 SSO를 위해 어떤 설계와 설정이 필요한지를 다룰 예정입니다.