목표

access token과 session token을 만들어 auth_token의 보안을 강화시켰다. 어디다 저장할까 나의 인증정보

Local Storage VS HttpOnly 쿠키

1. Local Storage

장점:

• 간편한 접근: JavaScript를 통해 쉽게 읽고 쓸 수 있습니다.
• 용량: 쿠키보다 더 많은 데이터를 저장할 수 있습니다.
• 유연성: 다양한 클라이언트 측 로직에서 자유롭게 사용할 수 있습니다.

단점:

• XSS 공격 취약성: 악성 스크립트가 실행될 경우, Local Storage에 저장된 토큰을 탈취할 수 있습니다.
• 자동 전송 부재: 모든 HTTP 요청에 자동으로 포함되지 않으므로, 별도의 로직이 필요합니다.

2. HttpOnly 쿠키

장점:

• 보안 강화: HttpOnly 속성으로 인해 JavaScript에서 접근할 수 없어 XSS 공격으로부터 보호됩니다.
• 자동 전송: 브라우저가 자동으로 모든 해당 도메인에 대한 HTTP 요청에 쿠키를 포함시킵니다.
• CSRF 방어: SameSite 속성을 설정하면 CSRF(Cross-Site Request Forgery) 공격을 방지할 수 있습니다.

단점:

• 쿠키 관리 제약: JavaScript에서 직접 접근하거나 수정할 수 없어, 클라이언트 측에서의 유연한 처리가 어렵습니다.
• 보안 설정 필요: Secure, SameSite 등의 속성을 올바르게 설정해야 최대 보안을 확보할 수 있습니다.

보안을 고려할 때

보안을 최우선으로 고려할 때, 세션 토큰은 HttpOnly cookie에 저장 하는 것이 더 안전하다.쿠키는 XSS 공격으로부터 토큰을 보호할 수 있으며, 브라우저가 자동으로 요청에 포함시켜주기 때문에 관리가 좋다. 쿠키 속성을 강화하면 더 보안 짱

쿠키🍪란 무엇일까

쿠키(Cookie)는 웹 브라우저와 서버 간에 상태 정보를 저장하고 전달하기 위한 작은 데이터 조각. 쿠키는 주로 사용자 인증, 세션관리, 사용자 설정 저장 등에 사용된다. 대형 웹사이트들이 쿠키를 허용하라고 나온 것을 볼 수 있다. 내정보를 개인화해서 사용할라고!!!

쿠키는 사용자가 웹사이트를 방문할 때마다 브라우저가 서버에 자동으로 전송한다.

용도 세션 관리: 로그인 상태 유지, 장바구니 정보 등. 개인화: 사용자 선호 설정 저장. 추적 및 분석: 사용자 행동 추적, 웹 분석 도구와 연동.

httpOnly 쿠키, 더 맛 좋은

클라이언트 측 javascript 가 접근 할 수 없도록 설정된 쿠키이다. 보안강화를 위해 사용되고 크로스 사이트 스크립팅(XXS) 공격을 통해 쿠키가 탈취 되는 것을 방지한다.

보안강화! 세션 하이재킹 방지!

쿠키를 설정해보자

httpOnly 쿠키는 클라이언트 측 javascript에서 설정할 수 없음! 쿠키를 설정하려면 반드시 server 측에서 Set-Cookie 헤더를 통해 설정해야함

우린 socket을 통해 로그인 인증절차를 했으니 한 번 더 서버와 http 통신을 해야한다.

// workflow

    Server->>Redis: 세션 저장 (sessionToken -> authToken 매핑)
    
    // 요청이 한 번 더 필요함.
    SocketServer->>Browser: sessionToken (.emit)
    Browser->>Server: sessionToken으로 쿠키 생성 요청
    Server->>Browser: Set-Cookie 헤더로 세션 토큰 전달
    
    Note over Browser: 브라우저는 Set-Cookie 헤더를 통해 HttpOnly 쿠키로 세션 토큰 저장
    Browser->>Server: 보호된 리소스 요청 (쿠키 자동 포함)

클라이언트 측에서 socket.on의 콜백함수를 개선한다.

//Login.svelte (컴포넌트)
socket.on('webauthn:authenticate:response', handleAuthenticate)

const handleAuthenticate = async (response) => {
    socket.off('webauthn:authenticate:response', handleAuthenticate)

    if (response.success && response.sessionToken) {
        try {
            const res = await fetch('http://localhost:3000/auth/set-token', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ sessionToken: response.sessionToken }),
                credentials: 'include'
            })

            if (res.ok) {
                toast.success('로그인 성공', {
                    description: 'Sunday, December 03, 2023 at 9:00 AM',
                    action: {
                        label: 'Undo',
                        onClick: () => console.info('Undo')
                    }
                })
                goto('/start')
            }
        } catch (error) {
            console.error('인증 실패:', error)
        }
    }

    if (dev) console.log('webauthn:authenticate:response : socket off ')
    resolve(response)
}

응답을 확인하고 sessionToken 값을 가지고 POST call 을 한다. 여기서 header에 credentials: 'include'를 반드시 포함한다.

클라이언트 측 fetch 요청 시 credentials: 'include' 설정: 쿠키가 자동으로 포함되어 인증된 요청을 보낼 수 있습니다.

이제 서버에서 이를 쿠키로 등록해보자.

// node index.js
// 토큰 설정을 위한 엔드포인트
app.post("/auth/set-token", async (req, res) => {
    const { sessionToken } = req.body;
    if (!sessionToken) {
        return res.status(400).json({ error: "세션 토큰이 없습니다." });
    }

    // 저장된 실제 JWT 토큰 조회
    const auth_token = await sessionStore.get(sessionToken);
    console.log("🚀 ~ app.post ~ auth_token:", auth_token);
    if (!auth_token) {
        return res.status(401).json({ error: "유효하지 않은 세션" });
    }

    // 세션 토큰 즉시 삭제 (일회용)
    await sessionStore.delete(sessionToken);

    // 실제 JWT로 쿠키 설정
    res.cookie("auth_token", auth_token, {
        httpOnly: true,
        secure: process.env.NODE_ENV === "production",
        sameSite: "strict",
        path: "/",
        maxAge: 3600000,
    });

    res.json({ success: true });
});

메모리 스토리지에 저장된 실제 우리의 토큰을 조회한다. 그리고 res.cookie로 auth_token을 httpOnly cookie에 저장하고 성공 값을 반환한다.

그리고 클라이언트는 이 값을 기다린뒤 확인해서 /start로 goto 시킨다.

if (res.ok) {
    toast.success('로그인 성공', {
        description: 'Sunday, December 03, 2025 at 9:00 AM',
        action: {
            label: 'Undo',
            onClick: () => console.info('Undo')
        }
    })
    goto('/start')

근데 어떻게 /start로 접근시 로그인이 되었다고 확인할 수 있을까.

우리는 여기서 server hook을 사용해야한다.

server hook 이란

server hooks은 서버 사이드 로직을 확장하고 제어할 수 있는 기능으로 사용하면 요청과 응답을 가로채고, 인증, 권한 검사 등 다양한 작업을 수행할 수 있다.

handle: 모든 요청을 처리할 때 호출됩니다. handleError: 오류가 발생했을 때 호출됩니다. externalFetch: 외부 요청을 커스터마이징 할 때 사용됩니다.

비공개 경로를 안전하게 보호 할 수 있다.

import { redirect } from '@sveltejs/kit'

// 공개 접근 가능한 경로
const PUBLIC_PATHS = ['/', '/about']

// 서버 사이드 렌더링 전에 실행되는 훅

export const handle = async ({ event, resolve }) => {
    const token = event.cookies.get('auth_token')
    const path = event.url.pathname

    // 비공개 경로에 대한 인증 검사
    if (!PUBLIC_PATHS.includes(path) && !token) {
        throw redirect(302, '/')
    }

    // 응답에 인증 상태 추가
    const response = await resolve(event)
    return response
}

이렇게되면 / 와 /about 의 경로이외엔 session token이 필요하다.

결론

webauthn 으로 등록과 인증을 한다. 발급받은 auth_token을 토큰 분리 접근접을 활용해 나눈다. httpOnly cookie에 등록한다.

서버에 요청을 보내 검증하여 사용한다.

드디어 로그인 및 private route 활성화 완료!