OAuth 2.0 브라우저 기반 앱

OAuth 2.0 브라우저 기반 앱 (Browser-Based Apps)

OAuth 2.0 for Browser-Based Apps는 SPA와 브라우저 기반 애플리케이션에서 OAuth 2.0을 쓸 때의 보안 요구사항과 권장 사항을 정리한 규격이에요. 이 문서는 특히 SPA가 안전하게 인증 흐름을 구현하는 방법을 다뤄요.

가장 중요한 권장 사항은 Implicit flow 대신 PKCE 확장을 곁들인 Authorization Code flow를 쓰라는 거예요. 브라우저에는 시크릿을 안전하게 숨길 방법이 없으므로, 공개 클라이언트로서의 절차를 지켜야 해요.

출처: https://oauth.net/2/browser-based-apps/

핵심 권장 사항

  • Authorization Code + PKCE 사용: Implicit flow는 토큰이 URL fragment로 노출되는 위험이 있어서 피해요.
  • 클라이언트 시크릿 미사용: 브라우저에 시크릿을 두지 않아요. SPA는 공개 클라이언트로 취급돼요.
  • redirect_uri 등록·검증: 리다이렉트 URI는 정확히 등록하고, 요청 시 일치 여부를 검증해서 오픈 리다이렉터를 막아요.
  • CSRF 방어: state 파라미터를 사용해요.

왜 SPA는 공개 클라이언트인가요

브라우저에서 실행되는 JavaScript는 서버처럼 '비밀'을 숨길 수 없어요. 누구나 소스를 열어볼 수 있으니까요. 그래서 시크릿 의존 방식이 아니라, PKCE처럼 코드 검증자를 쓰는 공개 클라이언트 절차가 표준이에요.

토큰 저장 주의

액세스 토큰을 localStorage 같은 곳에 저장하면 XSS로 탈취될 수 있어요. 가능하면:

  • 토큰 수명을 짧게 잡고, 필요할 때마다 갱신해요.
  • 메모리에만 보관하고, 가능하면 리프레시 토큰은 브라우저에 장기 보관하지 않아요.
  • 보안이 중요하면 백엔드 프록시(Backend for Frontend)를 두고 토큰을 서버에 보관하는 방식도 고려해요.

더 알아보기