Keycloak에서 SPAs의 자동 로그아웃 문제 해결: 인증 정보 지속 방법

카테고리

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

서브카테고리

웹 개발

대상자

*SPA 개발자** (React, Vue, Vanilla JS 기반 앱 개발자)
난이도: 중간 (Keycloak 인증 흐름 이해 필요)

핵심 요약

기본 설정 시 토큰은 메모리에만 저장되어 페이지 리로드 시 인증 정보가 사라짐
localStorage를 사용해 토큰 지속 가능 (예: localStorage.setItem('kc_token', keycloak.token))
보안 강화를 위해 HttpOnly Cookie 사용 권장 (백엔드 서버에서 토큰 관리 필요)

섹션별 세부 요약

1. 문제 현상 및 원인

keycloak-js 기본 동작: 토큰(accessToken, refreshToken, idToken)은 메모리에 저장
SPA 리로드 시:

- 토큰 삭제

- 사용자 로그아웃

- 자동으로 로그인 페이지 이동

2. `localStorage` 기반 해결 방법

토큰 저장 코드 예시:

```javascript

localStorage.setItem('kc_token', keycloak.token);

localStorage.setItem('kc_refreshToken', keycloak.refreshToken);

```

keycloak.init() 호출 시 저장된 토큰 사용:

```javascript

keycloak.init({ onLoad: 'login-required', token, refreshToken });

```

토큰 갱신 주기 설정:

```javascript

setInterval(() => keycloak.updateToken(70), 60000);

```

3. 보안 고려사항 및 저장소 비교

| 저장소 | 장점 | 단점 | 보안 수준 |

|--------------|-----------------------------|-----------------------------|-----------|

4. `Silent SSO` 사용 방법

부모 창과 iframe 간 커뮤니케이션:

```javascript

parent.postMessage(location.href, location.origin);

```

keycloak.init() 설정 예시:

```javascript

keycloak.init({

onLoad: 'check-sso',

silentCheckSsoRedirectUri: ${window.location.origin}/silent-check-sso.html

});

```

주의사항: 일부 브라우저는 쿠키 차단으로 Silent SSO 실패 가능

5. 보안 강화 전략

HttpOnly Cookie 사용 시

- 토큰은 JS 접근 불가 (XSS 방어)

- 요청에 자동 첨부 (백엔드에서 토큰 관리 필요)

보안 강화 조치:

- CSP 헤더 설정

- innerHTML 사용 금지

- 입력값 정규식 검증

결론

생산 환경에서는 HttpOnly Cookie 사용 권장 (보안 강화)
단순한 구현이 필요할 경우 localStorage 사용 (XSS 취약점 대비 방어코드 추가 필요)
Silent SSO는 토큰 저장 없이 인증 유지 가능 (크로스 도메인 설정 고려)
보안 프로토콜 참고: OWASP XSS Prevention Guide