HttpOnly Cookie에 대해서 여쭤볼 것이 있습니다...

Question

저는 프론트엔드 개발자입니다. 이번에 제가 외주를 맡게 되었습니다. 이번에 로그인 기능을 구현하는데, cto분이 저(웹개발자)에게 서버 개발자분께 Http Only Cookie로 요청하라고 하시더라구요. HttpOnly Cookie라는 것도 처음 들어봐서 찾아보니 서버에서 AccessToken을 그냥 넘겨주는 것이 아닌, HttpyOnly 설정이 된 Cookie안에 토큰을 담아서 클라이언트로 넘겨주는 것 같던데 이 과정이 맞나요?지난번에 서버 개발자분이 보여주신 스키마를 보면, AccessToken, RefreshToken을 그냥 API 결과물로 넘겨주시는 것 같더라구요. 앱 부분에서는 그런 위험 요소가 없기 때문에 Cookie나 어떤 보안 요소가 있는 껍데기에 담지 않고 그냥 보내는건가요?웹에서만 XSS를 피하기 위한 HttpOnly Cookie가 필요한것인가요? 그래서 서버개발자 분이 그걸 고려하지 않고 그냥 보내주는 걸로 처음 스키마를 짜신걸까요?제가 모르는 부분이 많아서 이 글에 질문이 엄청 많게 되었습니다.. 아무리 찾아봐도 이해가 되지 않는 부분이라 여쭤봅니다.. 감사합니다!결론적으로 제가 궁금한 부분은HttpOnly Cookie 방식이라는 것은 서버에서 HttpyOnly 설정이 된 쿠키에 토큰을 담아서 클라이언트에 보내는 것이 맞나요?클라이언트에서 해당 쿠키를 받으면, 쿠키 안에 있는 AccessToken, RefreshToken을 사용하는 것이 맞나요?앱에서는 위와 같은 기능을 사용하지 않고 AccessToken, RefreshToken을 그대로 보내나요?까지 입니다.

초무쿤 · Answer

클라이언트에서는 뭐 할게 없을껄요?서버에서 로그인시 http only 쿠키 발행서버에서 인증필터에서 http only 쿠키 체크(이부분이 디른 서버 stateless인 API호출이면 클라이언트에서 헤더에 실어서 보내고요)

크롱크롬 · Answer

프론트엔드: request 옵션에 "credentials' 추가, 백엔드: res.cookie에 httpOnly 추가 해야 합니다.chat GPT답변React.js (프론트엔드)// 로그인 요청async function login(username, password) { const response = await fetch('/api/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username, password }), credentials: 'include' // 쿠키를 서버로 전송하기 위해 필요한 옵션 }); if (response.ok) { // 로그인 성공 처리 }}Express.js (백엔드)const express = require('express');const cookieParser = require('cookie-parser');const app = express();app.use(cookieParser());// 로그인 요청 처리app.post('/api/login', (req, res) => { // 사용자 인증 로직 수행 // 인증에 성공하면 accessToken과 refreshToken 생성 const accessToken = jwt.sign({ username: req.body.username }, accessTokenSecret, { expiresIn: '15m' }); const refreshToken = uuidv4(); // refreshToken을 DB 또는 메모리에 저장 // 쿠키에 accessToken을 설정하여 클라이언트로 전송 res.cookie('accessToken', accessToken, { httpOnly: true, secure: true }); res.json({ accessToken, refreshToken });});

HttpOnly Cookie에 대해서 여쭤볼 것이 있습니다...

2개의 답변

Q&A 목록