🟠[P1] fix(frontend): API key written to JS-readable cookie via document.cookie + localStorage

[teddylee777]

컨텍스트 블록

Key	Value
Category	frontend
Checklist	ISS-UI-R9 — Use of window/document/localStorage without SSR safety / security
Priority	P1 🟠
Scan Date	2026-04-16
Flagged By	@code-review

요약

• WHAT: ApiKeyLoginForm이 document.cookie로 API 키를 직접 쓰면서 httpOnly 플래그가 없음 + ConnectionList도 localStorage.setItem(\"lg:chat:apiKey\", ...)로 평문 저장
• WHY: XSS 취약점이 발생하면 LangSmith API 키가 document.cookie 또는 localStorage 통해 즉시 유출. switchConnection은 server action 통해 httpOnly 쿠키를 사용하는 안전한 경로가 이미 있는데, ApiKeyLoginForm은 이를 우회
• WHERE: frontend/src/app/(auth)/login/ApiKeyLoginForm.tsx:71, frontend/src/shared/components/settings/ConnectionList.tsx:113
• SEVERITY: HIGH — XSS exfiltration vector for paid LangSmith API key

Evidence

#	File	Line	Finding	Flagged By	Confidence
1	frontend/src/app/(auth)/login/ApiKeyLoginForm.tsx	71	document.cookie = \lg_apiKey=...; samesite=lax`—httponly` 플래그 없음, JS에서 읽기 가능	@code-review	High
2	frontend/src/shared/components/settings/ConnectionList.tsx	113	localStorage.setItem(\"lg:chat:apiKey\", connection.apiKey) — 평문 localStorage 저장	@code-review	High
3	(대조) frontend/src/app/actions.ts updateConnectionAction	—	server action 경로는 httpOnly: true로 안전하게 설정 (참고: 안전한 경로 존재)	@code-review	High

영향 분석

영향 범위

• API key 인증 모드(api-key) 사용 모든 사용자
• ConnectionList로 다중 연결 관리하는 모든 사용자
• XSS 취약점 발생 시 즉시 키 탈취 → LangSmith 결제 폭탄, 타 프로젝트 trace 접근

장애 시나리오

1. 사용자가 admin 콘솔이나 third-party 의존성에서 XSS 페이로드 실행
2. 페이로드가 document.cookie 또는 localStorage[\"lg:chat:apiKey\"] 읽음
3. 외부 서버로 키 전송
4. 공격자가 키로 LangSmith API 호출, trace 다운로드, 비용 발생

긴급도

• 기존 이슈 🟠[P1] fix(security): NEXT_PUBLIC_LANGCHAIN_API_KEY exposed to browser bundle #58 (NEXT_PUBLIC_LANGCHAIN_API_KEY browser exposure)과 동일한 카테고리의 별도 벡터
• httpOnly 쿠키 경로가 이미 코드에 존재하므로 수정 비용 낮음

제안 해결 방안

접근 방법

ApiKeyLoginForm: document.cookie 직접 쓰기 제거, 기존 server action 통한 updateConnectionAction 호출로 통일:

// 변경 전 (line 71)
document.cookie = \`lg_apiKey=\${connection.apiKey}; path=/; samesite=lax\`;

// 변경 후
import { updateConnectionAction } from \"@/app/actions\";
await updateConnectionAction({
  apiUrl: connection.apiUrl,
  assistantId: connection.assistantId,
  apiKey: connection.apiKey,
});

ConnectionList: localStorage.setItem(\"lg:chat:apiKey\", ...) 제거 (이미 server action이 httpOnly 쿠키 처리). API 키를 클라이언트에서 다시 읽어야 한다면 server action getConnectionAction() 호출.

대안

• httpOnly: false 유지하되 짧은 만료: 만료 단축으로는 XSS 노출 시간 줄어들지만 1회 탈취로도 충분 — 미해결
• 암호화 저장: 클라이언트 사이드 암호화는 키 자체가 클라이언트에 있으므로 의미 없음

수용 기준

• document.cookie = \"lg_apiKey=...\" 패턴 제거
• localStorage.setItem(\"lg:chat:apiKey\", ...) 제거
• grep으로 document.cookie, localStorage.*apiKey 0건 확인
• e2e: API 키 모드 로그인 후 DevTools에서 document.cookie에 lg_apiKey 없음 확인
• 테스트 커맨드: cd frontend && pnpm test

참조

• 관련 파일: frontend/src/app/(auth)/login/ApiKeyLoginForm.tsx, frontend/src/shared/components/settings/ConnectionList.tsx, frontend/src/app/actions.ts
• Checklist 항목: ISS-UI-R9
• 관련 이슈: 🟠[P1] fix(security): NEXT_PUBLIC_LANGCHAIN_API_KEY exposed to browser bundle #58 (NEXT_PUBLIC_LANGCHAIN_API_KEY 유사 패턴), 🟠[P1] fix(api): getConnectionAction() missing requireAuth — LangGraph API key readable unauthenticated #67 (getConnectionAction requireAuth 누락)

재현 방법

사전 조건

• API key 인증 모드로 로그인

단계

1. 브라우저에서 ApiKeyLoginForm 통해 키 입력 후 로그인
2. DevTools Console에서 document.cookie 확인
3. localStorage.getItem(\"lg:chat:apiKey\") 확인

기대 결과

둘 다 키 노출 없음 (server action이 httpOnly 쿠키로 저장)

실제 결과

document.cookie에 lg_apiKey=sk-... 평문 노출, localStorage에도 동일

관련 코드 컨텍스트

File	Role	Relevance
frontend/src/app/(auth)/login/ApiKeyLoginForm.tsx	API key 인증 폼	수정 대상
frontend/src/shared/components/settings/ConnectionList.tsx	연결 관리 UI	수정 대상
frontend/src/app/actions.ts	server actions (httpOnly 쿠키 사용)	호출 대상 (재사용)

---

Detected by oh-my-braincrew `omb:issue` scan
Category: frontend | Scan date: 2026-04-16
`omb-issue-scan category=frontend checklist=ISS-UI-R9`

[teddylee777]

✅ omb:resolve-issue — completed

Started: 2026-04-16T10:41:14Z
Completed: 2026-04-16T11:13:06Z
Status: completed
PR: #87