具代表性的面試主題

前端面試:如何用 Storage Access API 設計嵌入式登入?

前端困難
OfferCC 編輯團隊發佈 更新

題幹

一個嵌入式帳戶元件需要讀取身分服務的未分區第一方工作階段 Cookie。你會如何請求儲存存取、保護流程,並在瀏覽器拒絕時維持登入可用?

題目與情境

一個身分服務商被嵌入許多客戶網站的 iframe。已登入使用者應看到帳戶資訊,但瀏覽器可能分區或阻擋第三方 Cookie。請使用 Storage Access API 設計流程,同時避免每個嵌入元件變成靜默追蹤通道。

假設 iframe 可以導覽到身分服務自己的第一方頁面,頂層網站控制 iframe 權限,使用者也可能拒絕提示。回答需涵蓋同意、CSRF、降級與登出。

面試官在考察什麼

  • 是否知道儲存存取受權限和 iframe 情境限制,不是萬能 Cookie 開關。
  • 是否要求使用者啟動,並在請求前解釋明確的產品用途。
  • 能否分離分區引導狀態和未分區工作階段狀態。
  • 拒絕後是否仍提供已登出或重新導向登入路徑。

作答前的釐清問題

  1. 元件是否必須跨站維持工作階段,還是可以重新導向後回傳授權碼?重新導向可能不必請求嵌入式 Cookie 存取。
  2. 使用者是否曾以第一方造訪身分服務並設定 Cookie?部分瀏覽器在授予存取前要求這種關係。
  3. 哪些頂層 origin 可以嵌入 iframe?這決定 Permissions-Policy 白名單。
  4. 同意前能顯示哪些資料?預授權畫面不能洩露帳戶身分。

30 秒回答框架

「我把 Storage Access API 當作由使用者授權的能力,不當作 Cookie 開關。iframe 先使用分區或不透明狀態,只有使用者點擊並理解收益後才請求,並處理 Promise 拒絕。頂層網站提供狹窄的 Permissions-Policy 白名單。拒絕時走第一方重新導向或已登出體驗。所有狀態變更請求仍需要 CSRF 防護,登出後元件回到同一中性狀態。」

分步深入解答

1. 分離狀態與威脅模型

授權前,iframe 可能只有分區儲存或沒有 Cookie,不能據此推斷使用者身分。requestStorageAccess() 成功後,嵌入文件才可能依瀏覽器政策存取未分區第一方 Cookie。

這項能力限定在文件和嵌入情境中。它不證明頂層網站可信,也不能取代 origin 驗證、CSRF 防護、同意記錄和登出語義。

2. 用使用者意圖觸發請求

先渲染匿名元件,只顯示「登入後查看帳戶資訊」按鈕。按鈕點擊形成使用者啟動,在處理器中呼叫 API,並把拒絕當成正常分支。不要在頁面載入時請求,也不要用隱藏 iframe 製造啟動。

應用程式應說明哪些資料會變得可用,並只在瀏覽器政策允許時記住選擇。拒絕可能來自第三方 Cookie 被阻擋、使用者沒有第一方造訪、iframe 缺少策略許可,或情境不符合條件。

3. 設定嵌入邊界

頂層回應負責策略。只允許身分 origin,而且只在嵌入元件的路由上允許:

http
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 和授權。儲存權限改變可達性,不改變請求意圖。

公開來源

同類題目

資源

產品比較

每份比較均依官方資料整理,並標示複核日期。

查看完整比較