test(ap1): demonstrate token storage tradeoff

README.md

@@ -116,3 +116,14 @@ Keycloak의 dedicated audience mapper는 `spa-public` access token에
 아니라 이 `aud`도 검사합니다. `verify-pattern1.sh`는 같은 정상 토큰을
 `deliberately-wrong-audience`를 기대하는 진단 인스턴스에도 제출해 `401`을
 확인합니다.
+
+Keycloak은 `KC_HOSTNAME=http://localhost:8080`을 기준으로 token의 `iss`를
+발급합니다. 정상 Resource Server는 이 외부 issuer 문자열을 검증하되 JWKS는
+Docker 내부의 `http://keycloak:8080`에서 가져옵니다. 진단 인스턴스는 일부러
+`http://wrong-issuer.invalid`를 기대하도록 구성되어, 서명과 audience가
+정상이더라도 issuer mismatch로 `401`을 반환합니다.
+
+token 저장 위치와 XSS 범위는
+[`docs/ap1-token-storage.md`](docs/ap1-token-storage.md)에 정리했습니다.
+E2E는 Web Storage token이 0개임과 동시에 실행 중 fetch hook이 Bearer
+header를 관찰할 수 있음을 재현합니다.

docker-compose.yml

@@ -112,6 +112,32 @@ services:
     networks:
       - keycloak-net
 
+  app-wrong-issuer:
+    profiles:
+      - diagnostics
+    build:
+      context: ./backend
+    environment:
+      SERVER_PORT: "8081"
+      SPRING_SECURITY_OAUTH2_RESOURCESERVER_JWT_ISSUER_URI: http://wrong-issuer.invalid/realms/keycloak-patterns
+      SPRING_SECURITY_OAUTH2_RESOURCESERVER_JWT_JWK_SET_URI: http://keycloak:8080/realms/keycloak-patterns/protocol/openid-connect/certs
+      SECURITY_EXPECTED_AUDIENCE: keycloak-pattern-api
+    ports:
+      - "127.0.0.1:18082:8081"
+    depends_on:
+      keycloak:
+        condition: service_healthy
+    healthcheck:
+      test:
+        - CMD-SHELL
+        - wget -q -O - http://127.0.0.1:8081/actuator/health | grep -q '"status":"UP"'
+      interval: 10s
+      timeout: 5s
+      retries: 12
+      start_period: 20s
+    networks:
+      - keycloak-net
+
   nginx:
     build:
       context: ./frontend

docs/ap1-token-storage.md

@@ -0,0 +1,29 @@
+# AP1 token storage trade-off
+
+AP1에서는 `access_token`, `refresh_token`, `id_token`을
+`oidc-client-ts`의 명시적인 `InMemoryWebStorage`에만 보관한다.
+`localStorage`와 `sessionStorage`에는 OAuth token을 저장하지 않는다.
+
+full-page authorization redirect를 생존해야 하는 일회성 transaction
+state와 PKCE verifier만 `sessionStorage`를 사용한다. callback 성공 후
+라이브러리가 해당 transaction state를 제거한다.
+
+| 저장 위치 | reload 생존 | JavaScript 접근 | AP1 선택 |
+|---|---:|---:|---:|
+| 메모리 | 아니요 | 실행 중 가능 | 사용 |
+| `sessionStorage` | 같은 탭에서 가능 | 가능 | token 저장 금지 |
+| `localStorage` | 예 | 가능 | token 저장 금지 |
+| HttpOnly cookie | 가능 | raw token 접근 불가 | AP2/AP3의 서버 소유 경계 |
+
+메모리 저장은 XSS를 제거하지 않는다. 악성 스크립트가 실행 중 `fetch`를
+후킹하면 SPA가 붙이는 `Authorization: Bearer ...` 헤더를 관찰할 수 있다.
+다만 persistent storage를 사용하지 않으므로 reload 이후 탈취 가능한 token
+복사본이 남지 않는다.
+
+`e2e/pattern1.mjs`는 다음 두 조건을 동시에 검증한다.
+
+1. access token이 Web Storage 어디에도 존재하지 않는다.
+2. 실행 중 fetch hook은 Bearer token을 관찰할 수 있다.
+
+따라서 결론은 “메모리면 XSS에 안전”이 아니라 “영속 탈취 범위를 줄이지만
+실행 중 XSS에는 여전히 노출”이다.

e2e/pattern1.mjs

@@ -36,8 +36,32 @@ try {
   assert.equal(authorizationUrl?.searchParams.get("code_challenge_method"), "S256");
   assert.ok(authorizationUrl?.searchParams.get("code_challenge"));
 
-  const accessToken = await page.evaluate(() => window.__pattern1.getAccessToken());
-  assert.ok(accessToken, "access token must exist in browser memory");
+  await page.evaluate(() => {
+    const originalFetch = window.fetch.bind(window);
+    window.__xssProbe = { authorization: null };
+    window.fetch = (input, init = {}) => {
+      const headers = new Headers(
+        init.headers ?? (input instanceof Request ? input.headers : undefined),
+      );
+      const authorization = headers.get("Authorization");
+      if (authorization) {
+        window.__xssProbe.authorization = authorization;
+      }
+      return originalFetch(input, init);
+    };
+  });
+
+  await page.locator("#call-api").click();
+  await page.waitForFunction(() => {
+    const text = document.querySelector("#result")?.textContent ?? "";
+    return text.includes('"httpStatus": 200');
+  });
+
+  const capturedAuthorization = await page.evaluate(
+    () => window.__xssProbe.authorization,
+  );
+  assert.match(capturedAuthorization, /^Bearer /u);
+  const accessToken = capturedAuthorization.slice("Bearer ".length);
   const payload = JSON.parse(
     Buffer.from(accessToken.split(".")[1], "base64url").toString("utf8"),
   );
@@ -56,12 +80,10 @@ try {
     false,
     "access token must not be persisted in Web Storage",
   );
-
-  await page.locator("#call-api").click();
-  await page.waitForFunction(() => {
-    const text = document.querySelector("#result")?.textContent ?? "";
-    return text.includes('"httpStatus": 200');
-  });
+  assert.ok(
+    capturedAuthorization,
+    "runtime XSS-style fetch hooking can still observe a memory-only bearer token",
+  );
 
   if (process.env.WRONG_AUDIENCE_URL) {
     const response = await fetch(process.env.WRONG_AUDIENCE_URL, {
@@ -74,16 +96,33 @@ try {
     );
   }
 
+  if (process.env.WRONG_ISSUER_URL) {
+    const response = await fetch(process.env.WRONG_ISSUER_URL, {
+      headers: { Authorization: `Bearer ${accessToken}` },
+    });
+    assert.equal(
+      response.status,
+      401,
+      "the same signed token must fail when the Resource Server expects another issuer",
+    );
+  }
+
   await page.reload();
   await page.locator('[data-authenticated="false"]').waitFor();
   assert.equal(
-    await page.evaluate(() => window.__pattern1.getAccessToken()),
-    null,
-    "reload must clear the memory-only token",
+    await page.evaluate(
+      (token) => JSON.stringify({
+        localStorage: Object.values(localStorage),
+        sessionStorage: Object.values(sessionStorage),
+      }).includes(token),
+      accessToken,
+    ),
+    false,
+    "reload must clear the memory-only token without persisting it",
   );
 
   console.log(
-    "pattern1 browser verified: code+PKCE S256, audience positive 200/negative 401, Web Storage token 0, reload clears token",
+    "pattern1 browser verified: PKCE, audience/issuer negatives, persistent token 0, runtime fetch hook observes bearer, reload clears token",
   );
 } finally {
   await browser.close();

frontend/src/app.js

@@ -122,13 +122,6 @@ userManager.events.addUserLoaded(renderSession);
 userManager.events.addUserUnloaded(() => renderSession(null));
 userManager.events.addAccessTokenExpired(() => renderSession(null));
 
-window.__pattern1 = {
-  getAccessToken: () => currentUser?.access_token ?? null,
-  getRefreshToken: () => currentUser?.refresh_token ?? null,
-  getIdToken: () => currentUser?.id_token ?? null,
-  callProtectedApi,
-};
-
 try {
   const callbackUser = await finishSigninCallback();
   renderSession(callbackUser ?? await userManager.getUser());

scripts/verify-pattern1.sh

@@ -12,12 +12,15 @@ set +a
 
 docker compose down --volumes --remove-orphans
 docker compose up --build -d --wait
-docker compose --profile diagnostics up -d --wait app-wrong-audience
+docker compose --profile diagnostics up -d --wait \
+  app-wrong-audience \
+  app-wrong-issuer
 
 npm --prefix e2e ci
 E2E_USERNAME=regular-user \
 E2E_PASSWORD="$REGULAR_USER_PASSWORD" \
 WRONG_AUDIENCE_URL=http://localhost:18081/api/me \
+WRONG_ISSUER_URL=http://localhost:18082/api/me \
   npm --prefix e2e run test:pattern1
 
 echo "AP1 verified end to end"