題目與情境
一個身分服務商被嵌入許多客戶網站的 iframe。已登入使用者應看到帳戶資訊,但瀏覽器可能分區或阻擋第三方 Cookie。請使用 Storage Access API 設計流程,同時避免每個嵌入元件變成靜默追蹤通道。
假設 iframe 可以導覽到身分服務自己的第一方頁面,頂層網站控制 iframe 權限,使用者也可能拒絕提示。回答需涵蓋同意、CSRF、降級與登出。
面試官在考察什麼
- 是否知道儲存存取受權限和 iframe 情境限制,不是萬能 Cookie 開關。
- 是否要求使用者啟動,並在請求前解釋明確的產品用途。
- 能否分離分區引導狀態和未分區工作階段狀態。
- 拒絕後是否仍提供已登出或重新導向登入路徑。
作答前的釐清問題
- 元件是否必須跨站維持工作階段,還是可以重新導向後回傳授權碼?重新導向可能不必請求嵌入式 Cookie 存取。
- 使用者是否曾以第一方造訪身分服務並設定 Cookie?部分瀏覽器在授予存取前要求這種關係。
- 哪些頂層 origin 可以嵌入 iframe?這決定
Permissions-Policy白名單。 - 同意前能顯示哪些資料?預授權畫面不能洩露帳戶身分。
30 秒回答框架
「我把 Storage Access API 當作由使用者授權的能力,不當作 Cookie 開關。iframe 先使用分區或不透明狀態,只有使用者點擊並理解收益後才請求,並處理 Promise 拒絕。頂層網站提供狹窄的 Permissions-Policy 白名單。拒絕時走第一方重新導向或已登出體驗。所有狀態變更請求仍需要 CSRF 防護,登出後元件回到同一中性狀態。」
分步深入解答
1. 分離狀態與威脅模型
授權前,iframe 可能只有分區儲存或沒有 Cookie,不能據此推斷使用者身分。requestStorageAccess() 成功後,嵌入文件才可能依瀏覽器政策存取未分區第一方 Cookie。
這項能力限定在文件和嵌入情境中。它不證明頂層網站可信,也不能取代 origin 驗證、CSRF 防護、同意記錄和登出語義。
2. 用使用者意圖觸發請求
先渲染匿名元件,只顯示「登入後查看帳戶資訊」按鈕。按鈕點擊形成使用者啟動,在處理器中呼叫 API,並把拒絕當成正常分支。不要在頁面載入時請求,也不要用隱藏 iframe 製造啟動。
應用程式應說明哪些資料會變得可用,並只在瀏覽器政策允許時記住選擇。拒絕可能來自第三方 Cookie 被阻擋、使用者沒有第一方造訪、iframe 缺少策略許可,或情境不符合條件。
3. 設定嵌入邊界
頂層回應負責策略。只允許身分 origin,而且只在嵌入元件的路由上允許:
Permissions-Policy: storage-access=(self "https://id.example")iframe 必須使用預期 origin 和 sandbox 設定。被 sandbox 的 iframe 需要保留適當的同源能力,origin 不一致時應預設拒絕。策略應是白名單,不是給所有第三方授權。
4. 建立第一方與嵌入流程
若瀏覽器要求第一方互動,元件開啟身分服務的第一方頁面。使用者在那裡登入,身分服務設定第一方 Cookie,再回傳與 origin 綁定的短期結果。結果不應是 URL 中可重複使用的 bearer token。
回到 iframe 後,在使用者手勢下請求儲存存取,再透過身分 origin 讀取工作階段。伺服器仍檢查頂層 origin、工作階段狀態和 CSRF token。授權成功不等於繞過帳戶權限。
5. 設計拒絕、登出與量測
拒絕時維持元件可用:顯示登入連結、使用重新導向返回,或提供第一方帳戶頁面。不要循環彈提示。登出要清理身分工作階段並把 iframe 恢復到中性狀態,同時使快取的帳戶畫面失效。
依瀏覽器和嵌入 origin 量測授權成功、拒絕原因、重新導向完成和帳戶畫面錯誤,但絕不記錄 Cookie 或帳戶資料。即使日後移除 Storage Access API 路徑,重新導向流程仍應可用。
高品質示範回答
我會先讓匿名 iframe 只顯示登入入口。使用者點擊後請求儲存存取,並明確處理拒絕。嵌入頁面透過 Permissions-Policy 只允許身分 origin。若瀏覽器要求第一方互動,就重新導向到身分站點建立工作階段,再回傳與 origin 綁定的短期結果,不把 bearer token 放進 URL。
授權後 iframe 可以讀取第一方工作階段,但仍要執行 origin 驗證、CSRF 防護、授權和登出。拒絕時走重新導向登入或已登出畫面,絕不重複彈提示。我會按瀏覽器和 origin 監控授權、拒絕、重新導向完成與錯誤,並保證降級路徑可用。
常見失誤
- 錯誤表現:頁面載入就呼叫 API → 失敗原因:瀏覽器要求使用者意圖,使用者也無法理解突然出現的提示 → 修正方法:僅在解釋用途後的使用者啟動中請求。
- 錯誤表現:把成功當成全域 Cookie 權限 → 失敗原因:權限受情境、策略和瀏覽器差異限制 → 修正方法:每個嵌入情境都檢查 Promise。
- 錯誤表現:在
Permissions-Policy中允許所有 origin → 失敗原因:擴大追蹤和資料存取面 → 修正方法:只在指定路由白名單允許身分 origin。 - 錯誤表現:把工作階段 token 放進重新導向 URL → 失敗原因:URL 會進入歷史、日誌和 referrer → 修正方法:使用短期、一次性、與 origin 綁定的結果。
- 錯誤表現:拒絕後繼續彈提示 → 失敗原因:形成敵對循環,也無法強迫使用者授權 → 修正方法:切換到重新導向或已登出降級。
追問與回答
分區 Cookie 能取代 Storage Access API 嗎?
它可以支援按嵌入網站隔離的引導工作階段,但不能提供與未分區第一方工作階段相同的跨站連續性。能接受隔離時選擇分區狀態;需要連續登入且不想請求存取時選擇重新導向。
iframe 被 sandbox 怎麼辦?
確認 sandbox 保留流程需要的 origin 和能力。如果 origin 變成不透明或 API 被阻擋,就預設拒絕並使用第一方重新導向。不要為了一個元件全域削弱 sandbox。
取得儲存存取後還需要 CSRF 防護嗎?
需要。取得存取後 iframe 可以攜帶 Cookie 發送請求,因此狀態變更介面仍需要 CSRF 防護、origin 驗證、適用時的 SameSite Cookie 和授權。儲存權限改變可達性,不改變請求意圖。