docs(10_Wiki): 위키 전체 재구성 — Topic_* 폴더를 4개 카테고리로 통합 + 대규모 중복 제거
Topic_Agent/Topic_Blog/Topics/Topics_Biz/Topics_Meeting/Topics_Rag의 마크다운 지식 문서를 Topic_General/Topic_Programming/Topic_Graphic/Topic_Business 4개 카테고리로 재분류. - 중복 제거: frontmatter의 status:duplicate/merged + duplicate_of/redirect_to 필드로 자기 자신을 중복으로 선언한 리다이렉트 stub 1032개 제거, 완전 동일 내용 파일 472개 제거, 동일 파일명·다른 내용 충돌 시 더 큰(완전한) 버전만 유지(162개 제거) — 총 1639개 중복 제거. - 분류: 폴더 단위로 명확한 항목(AI_and_ML/Coding/Architecture 등 → Programming, Comfyui/Visual_Effects → Graphic, Topics_Biz/Topics_Meeting/사업 등 → Business, Poetic_Blog_Writing/창의성/Game_Design 등 → General)은 폴더 우선순위로, 나머지 혼재 폴더(Topic_Agent/Topic_Blog/Topics 루트/Thinking & Reasoning/Other/UI_UX_Assets)는 title/tags 키워드 스코어링으로 파일 단위 분류(불명확한 경우 General로 폴백). 원본 폴더명은 "From_*" 서브폴더로 보존해 추적 가능성 유지. - 최종 배치: Programming 2784 / General 1608 / Graphic 285 / Business 249 = 4926개 문서. - 에이전트 운영 상태(.astra/.agent/.obsidian/sessions/memory/_company/docs/lessons/_shared/src)는 지식 콘텐츠가 아니므로 재분류 대상에서 제외하고 원위치 유지. - Topics/Topic_email(상위 보호 폴더 Topic_email과 파일명 100% 중복) 삭제 — 보호 폴더 자체는 미변경. - 완전히 비게 된 Topic_Agent/Topic_Blog/Topics_Biz/Topics_Rag 폴더 제거.
This commit is contained in:
Antigravity Agent
@@ -0,0 +1,101 @@
|
||||
---
|
||||
id: web-jwt-patterns
|
||||
title: JWT 패턴 — 토큰 저장 / 만료 / 회전
|
||||
category: Coding
|
||||
status: draft
|
||||
source_trust_level: B
|
||||
verification_status: conceptual
|
||||
created_at: 2026-05-09
|
||||
updated_at: 2026-05-09
|
||||
tags: [web, auth, jwt, security, vibe-coding]
|
||||
tech_stack: { language: "Any backend / browser", applicable_to: ["Web", "Mobile"] }
|
||||
applied_in: []
|
||||
aliases: [access token, refresh token, httpOnly cookie, token rotation]
|
||||
---
|
||||
|
||||
# JWT 패턴
|
||||
|
||||
> JWT 자체는 무상태 보안 도구일 뿐. 진짜 어려운 건 **어디 저장? 만료? 회전? 무효화?**. 잘못 저장하면 XSS 한 방으로 토큰 털림.
|
||||
|
||||
## 📖 핵심 개념
|
||||
- **Access token**: 짧은 만료 (5~15분), API 호출 권한.
|
||||
- **Refresh token**: 긴 만료 (1~30일), access 재발급 용. **회전 (rotation) 필수**.
|
||||
- 저장 위치 트레이드오프:
|
||||
- localStorage: XSS 취약. 절대 비추.
|
||||
- sessionStorage: 탭 닫으면 사라짐. 사용자 경험 나쁨.
|
||||
- **httpOnly + Secure + SameSite cookie**: XSS 차단. 권장.
|
||||
- 메모리 (변수): 새로고침에 사라짐. + httpOnly cookie 로 refresh.
|
||||
|
||||
## 💻 코드 패턴
|
||||
|
||||
### 1. Access in memory + Refresh in httpOnly cookie
|
||||
```ts
|
||||
// 로그인 응답
|
||||
res.cookie('rt', refreshToken, {
|
||||
httpOnly: true, secure: true, sameSite: 'strict',
|
||||
maxAge: 7 * 24 * 60 * 60 * 1000, path: '/api/auth/refresh',
|
||||
});
|
||||
res.json({ accessToken });
|
||||
|
||||
// 클라이언트
|
||||
let access = data.accessToken; // memory only
|
||||
fetch('/api/me', { headers: { Authorization: `Bearer ${access}` } });
|
||||
```
|
||||
|
||||
### 2. Access 만료 시 자동 refresh
|
||||
```ts
|
||||
async function authedFetch(input: RequestInfo, init: RequestInit = {}) {
|
||||
let res = await fetch(input, withAuth(init, access));
|
||||
if (res.status !== 401) return res;
|
||||
// refresh
|
||||
const r = await fetch('/api/auth/refresh', { method: 'POST', credentials: 'include' });
|
||||
if (!r.ok) throw new Error('session expired');
|
||||
access = (await r.json()).accessToken;
|
||||
return fetch(input, withAuth(init, access));
|
||||
}
|
||||
```
|
||||
|
||||
### 3. Refresh token rotation
|
||||
```ts
|
||||
// 서버: refresh 호출 시 새 refresh 발급 + 옛 것 무효화
|
||||
app.post('/api/auth/refresh', async (req, res) => {
|
||||
const old = req.cookies.rt;
|
||||
const session = await db.sessions.find({ refreshToken: old });
|
||||
if (!session || session.revokedAt) return res.status(401).end();
|
||||
|
||||
// 옛 것 invalidate
|
||||
await db.sessions.update(session.id, { revokedAt: new Date() });
|
||||
|
||||
// 새 발급
|
||||
const newRt = signRefresh({ userId: session.userId });
|
||||
await db.sessions.create({ userId: session.userId, refreshToken: newRt });
|
||||
|
||||
res.cookie('rt', newRt, cookieOpts);
|
||||
res.json({ accessToken: signAccess({ userId: session.userId }) });
|
||||
});
|
||||
```
|
||||
|
||||
## 🤔 의사결정 기준
|
||||
| 환경 | 저장 |
|
||||
|---|---|
|
||||
| Web SPA | access in memory + refresh in httpOnly cookie |
|
||||
| SSR (Next.js) | session cookie + 서버에서 access 발급 |
|
||||
| Mobile (RN/iOS/Android) | secure storage (Keychain/Keystore) |
|
||||
| 서버-서버 | 짧은 access, OAuth client credentials |
|
||||
|
||||
## ❌ 안티패턴
|
||||
- **localStorage 에 access token 저장**: XSS 한 방으로 탈취. 사고.
|
||||
- **Refresh token rotation 안 함**: 한 번 탈취되면 영원히 유효. rotation + reuse detection.
|
||||
- **JWT signature 만 검증, 만료 안 봄**: 만료 토큰 통과. exp / nbf 모두 검증.
|
||||
- **JWT payload 에 비밀 정보**: payload 는 base64 — 누구나 디코드. 비밀 X.
|
||||
- **장시간 access token (24h+)**: 탈취 시 피해 커짐. 짧게 + refresh.
|
||||
- **로그아웃 시 토큰 무효화 안 함**: stateless 라 어렵지만 refresh 무효화는 DB 레벨로.
|
||||
- **CSRF 보호 누락 (cookie auth)**: SameSite=strict + CSRF token.
|
||||
|
||||
## 🤖 LLM 활용 힌트
|
||||
- 인증 코드 작성 시 "access in memory + refresh in httpOnly cookie + rotation" 패턴 강제.
|
||||
- LLM 이 localStorage 사용하려 하면 막기.
|
||||
|
||||
## 🔗 관련 문서
|
||||
- [[Web_CORS_Practical_Guide]]
|
||||
- [[Idempotent_Operations]]
|
||||
Reference in New Issue
Block a user