Notion iframe용 팝업 로그인: 암호화 handoff

README.md

@@ -25,6 +25,12 @@ hf_oauth_authorized_org: CJLabKIST
 4. 1:1 DM — 대화 ID는 `dm__<작은이름>__<큰이름>`으로 항상 같음
 5. 메시지를 private Storage Bucket `CJLabKIST/messenger-probe`에 저장, 새로고침 뒤에도 유지
 
+Notion 임베드: Notion에는 `https://cjlabkist-messenger-probe.static.hf.space/?embed=1`을 넣습니다.
+`huggingface.co/spaces/...` 주소는 `X-Frame-Options: DENY`라서 임베드되지 않습니다.
+HF 로그인 화면은 iframe 안에서 열리지 않고(`X-Frame-Options: SAMEORIGIN`), HF 페이지의 `COOP: same-origin` 때문에
+팝업이 원래 창과의 연결을 잃습니다. 그래서 팝업 로그인 결과를 **암호화해서 public Bucket `CJLabKIST/messenger-handoff`에 잠깐 두고**
+iframe이 가져간 뒤 지웁니다. 암호 키는 URL `#` 뒤에만 있어 서버로 가지 않습니다.
+
 저장 방식: 메시지 1개 = 파일 1개 (`messages/<대화ID>/<시각>__<보낸사람>__<id>.json`).
 읽고-고쳐-쓰기가 없어서 동시에 보내도 서로 덮어쓰지 않습니다.
 

index.html

@@ -206,6 +206,7 @@ import { oauthLoginUrl, oauthHandleRedirectIfPresent, uploadFiles } from "https:
 const CFG = {
   ORG: "CJLabKIST",
   BUCKET: "CJLabKIST/messenger-probe",
+  HANDOFF_BUCKET: "CJLabKIST/messenger-handoff",   // public; holds only AES-encrypted, short-lived login handoffs
   HUB: "https://huggingface.co",
   POLL_CHAT_MS: 4000,
   POLL_LIST_MS: 15000,
@@ -268,10 +269,63 @@ const Bucket = {
   },
 };
 
+// ───────────────────────────── login handoff (iframe ⇄ popup)
+// HF pages send COOP: same-origin, so a popup opened from the Notion iframe loses window.opener,
+// and partitioned storage means the popup and the iframe share nothing. Bridge them through HF itself:
+// the iframe makes a random key K and passes it in the URL fragment (never sent to any server);
+// the popup logs in, encrypts the token with K and drops it in a public bucket under sha256(K);
+// the iframe polls that path, decrypts, then deletes the file.
+const b64u = {
+  enc: (buf) => btoa(String.fromCharCode(...new Uint8Array(buf))).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, ""),
+  dec: (s) => Uint8Array.from(atob(s.replace(/-/g, "+").replace(/_/g, "/") + "===".slice((s.length + 3) % 4)), (c) => c.charCodeAt(0)),
+};
+async function sha256hex(s) { const h = await crypto.subtle.digest("SHA-256", new TextEncoder().encode(s)); return [...new Uint8Array(h)].map((b) => b.toString(16).padStart(2, "0")).join(""); }
+const aesKey = (k) => crypto.subtle.importKey("raw", b64u.dec(k), "AES-GCM", false, ["encrypt", "decrypt"]);
+async function seal(k, obj) {
+  const iv = crypto.getRandomValues(new Uint8Array(12));
+  const ct = await crypto.subtle.encrypt({ name: "AES-GCM", iv }, await aesKey(k), new TextEncoder().encode(JSON.stringify(obj)));
+  return { iv: b64u.enc(iv), ct: b64u.enc(ct) };
+}
+async function unseal(k, box) {
+  const pt = await crypto.subtle.decrypt({ name: "AES-GCM", iv: b64u.dec(box.iv) }, await aesKey(k), b64u.dec(box.ct));
+  return JSON.parse(new TextDecoder().decode(pt));
+}
+const handoffPath = async (k) => `handoff/${await sha256hex(k)}.json`;
+async function handoffPut(k, payload) {
+  await uploadFiles({
+    repo: { type: "bucket", name: CFG.HANDOFF_BUCKET }, accessToken: payload.token, useWebWorkers: false,
+    files: [{ path: await handoffPath(k), content: new Blob([JSON.stringify(await seal(k, payload))], { type: "application/json" }) }],
+  });
+}
+async function handoffDelete(path, token) {
+  await fetch(`${CFG.HUB}/api/buckets/${CFG.HANDOFF_BUCKET}/batch`, {
+    method: "POST", headers: { Authorization: "Bearer " + token, "Content-Type": "application/x-ndjson" },
+    body: JSON.stringify({ type: "deleteFile", path }) + "\n",
+  });
+}
+async function handoffPoll(k) {
+  const path = await handoffPath(k), until = Date.now() + 180000;
+  while (Date.now() < until && !state.me) {
+    await new Promise((r) => setTimeout(r, 1500));
+    let r;
+    try { r = await fetch(`${CFG.HUB}/buckets/${CFG.HANDOFF_BUCKET}/resolve/${path}?t=${Date.now()}`, { cache: "no-store" }); } catch { continue; }
+    if (r.status === 404) continue;
+    if (!r.ok) { diag("popup", false, "handoff 읽기 실패: HTTP " + r.status); return; }
+    try {
+      const p = await unseal(k, await r.json());
+      diag("popup", true, "팝업 로그인 → 암호화 handoff(Bucket)로 토큰 받음");
+      handoffDelete(path, p.token).then(() => diag("handoffDel", true, "handoff 파일 삭제됨"), (e) => diag("handoffDel", false, e.message));
+      await acceptLogin(p.token, p.exp, "oauth-popup", p.orgs);
+    } catch (e) { diag("popup", false, "handoff 복호화 실패: " + e.message); }
+    return;
+  }
+  if (!state.me) { diag("popup", false, "3분 안에 팝업 로그인 결과가 오지 않음"); $("#loginErr").textContent = "팝업 로그인 결과를 받지 못했습니다. 다시 시도하거나 토큰으로 로그인해 주세요."; }
+}
+
 // ───────────────────────────── auth
-// Popup flow exists because Notion embeds us in an iframe: huggingface.co's login page
-// generally can't run inside a third-party iframe, so login happens in a top-level popup
-// and the token is handed back to the iframe with postMessage.
+// huggingface.co login pages send X-Frame-Options: SAMEORIGIN, so inside any iframe (Notion, the
+// HF Space page) login must happen in a top-level popup; the token comes back via postMessage when
+// window.opener survives, otherwise via the encrypted bucket handoff above.
 async function boot() {
   const vars = window.huggingface?.variables || {};
   diag("iframe", true, IN_IFRAME ? "iframe 안 (embed)" + (document.referrer ? " · 부모: " + new URL(document.referrer).host : "") : "최상위 창");
@@ -286,13 +340,20 @@ async function boot() {
     const payload = { type: "tm-oauth", token: res.accessToken, exp: +new Date(res.accessTokenExpiresAt), orgs: res.userInfo.orgs || [] };
     if (res.state === "popup") {
       show("popupView");
-      if (window.opener) {
-        try { window.opener.postMessage(payload, location.origin); } catch (e) {}
-        $("#popupTitle").textContent = "로그인 완료"; $("#popupMsg").textContent = "이 창은 곧 닫힙니다.";
-        setTimeout(() => window.close(), 600);
+      const k = store.get("handoffK"); store.del("handoffK");
+      const via = [];
+      if (window.opener) { try { window.opener.postMessage(payload, location.origin); via.push("postMessage"); } catch (e) {} }
+      if (k) {
+        $("#popupMsg").textContent = "원래 화면으로 로그인 정보를 보내는 중…";
+        try { await handoffPut(k, payload); via.push("암호화 handoff"); } catch (e) { $("#popupMsg").textContent = "handoff 저장 실패: " + e.message; }
+      }
+      if (via.length) {
+        $("#popupTitle").textContent = "로그인 완료";
+        $("#popupMsg").textContent = `원래 화면으로 돌아가세요 (${via.join(" + ")}). 이 창은 곧 닫힙니다.`;
+        setTimeout(() => window.close(), 1500);
       } else {
         $("#popupTitle").textContent = "로그인은 됐지만 원래 화면으로 돌려보내지 못했습니다";
-        $("#popupMsg").textContent = "브라우저가 팝업과 원래 창의 연결을 끊었습니다 (window.opener 없음). 이 창을 닫고 원래 화면에서 '이 창에서 로그인'이나 토큰 로그인을 써 주세요. 진단 결과에 이 사실을 적어 주세요.";
+        $("#popupMsg").textContent = "window.opener도 handoff 키도 없습니다. 이 창을 닫고 토큰 로그인을 써 주세요.";
       }
       return;
     }
@@ -302,6 +363,8 @@ async function boot() {
   // 2) popup opened by the iframe: go straight to HF authorize (must be top-level)
   if (params.get("popup") === "1") {
     show("popupView");
+    const k = new URLSearchParams(location.hash.slice(1)).get("k");
+    if (k) store.set("handoffK", k);
     try { location.href = await oauthLoginUrl({ scopes: vars.OAUTH_SCOPES, state: "popup", redirectUrl: location.origin + location.pathname }); }
     catch (e) { $("#popupTitle").textContent = "로그인 시작 실패"; $("#popupMsg").textContent = e.message; }
     return;
@@ -317,7 +380,8 @@ function showLogin(msg) {
   show("loginView");
   const has = !!window.huggingface?.variables?.OAUTH_CLIENT_ID;
   $("#btnPopup").disabled = !has; $("#btnRedirect").disabled = !has;
-  $("#loginNote").textContent = IN_IFRAME ? "Notion 등 다른 페이지 안에서는 위쪽 버튼(팝업)이 기본입니다. 안 되면 아래 방법을 차례로 써 보세요." : "";
+  $("#btnRedirect").classList.toggle("hidden", IN_IFRAME); // HF login page refuses to render inside iframes (X-Frame-Options)
+  $("#loginNote").textContent = IN_IFRAME ? "다른 페이지(Notion, HF Space 화면) 안에서는 로그인이 팝업 창으로 열립니다." : "";
   if (msg) $("#loginErr").textContent = msg;
 }
 window.addEventListener("message", (ev) => {
@@ -326,10 +390,13 @@ window.addEventListener("message", (ev) => {
   acceptLogin(ev.data.token, ev.data.exp, "oauth-popup", ev.data.orgs);
 });
 $("#btnPopup").onclick = () => {
+  const k = b64u.enc(crypto.getRandomValues(new Uint8Array(32)));
   // open synchronously inside the click handler so popup blockers allow it
-  const w = window.open(location.origin + location.pathname + "?popup=1", "tm-login", "width=520,height=720");
-  if (!w) { diag("popup", false, "팝업이 차단됨"); $("#loginErr").textContent = "팝업이 차단됐습니다. 주소창 오른쪽에서 팝업을 허용하거나 '이 창에서 로그인'을 써 주세요."; }
-  else diag("popup", null, "팝업 열림 · 응답 기다리는 중");
+  const w = window.open(location.origin + location.pathname + "?popup=1#k=" + k, "tm-login", "width=520,height=720");
+  if (!w) { diag("popup", false, "팝업이 차단됨"); $("#loginErr").textContent = "팝업이 차단됐습니다. 팝업을 허용하거나 토큰으로 로그인해 주세요."; return; }
+  diag("popup", null, "팝업 열림 · 응답 기다리는 중");
+  $("#loginErr").textContent = ""; $("#loginNote").textContent = "팝업 창에서 로그인을 마치면 여기로 자동으로 들어옵니다…";
+  handoffPoll(k);
 };
 $("#btnRedirect").onclick = async () => {
   try { location.href = await oauthLoginUrl({ scopes: window.huggingface.variables.OAUTH_SCOPES, state: "redirect", redirectUrl: location.origin + location.pathname }); }
@@ -563,7 +630,7 @@ async function send() {
 // ───────────────────────────── Settings · 진단 (feasibility checklist)
 const CHECKS = [
   ["iframe", "실행 위치"], ["storage", "브라우저 저장소"], ["oauthcfg", "OAuth 설정"], ["popup", "팝업 로그인"],
-  ["login", "로그인"], ["org", "조직 멤버 확인"], ["members", "팀원 목록"], ["bucketList", "Bucket 읽기"],
+  ["handoffDel", "handoff 정리"], ["login", "로그인"], ["org", "조직 멤버 확인"], ["members", "팀원 목록"], ["bucketList", "Bucket 읽기"],
   ["bucketWrite", "Bucket 쓰기"], ["persist", "새로고침 후 유지"],
 ];
 async function checkPersist() {