Revert earlier change to iframe srcdoc, using src instead, because srcdoc was not compatible with all passkey implementations (BitWarden).

frontend/src/utils/api.js

@@ -49,38 +49,37 @@ let authPromise = null
 let authResolve = null
 let authReject = null
 
-// Cache for auth iframe HTML by mode
-const authIframeHtmlCache = {}
+// Cache for auth iframe URL by mode
+const authIframeUrlCache = {}
 
 /**
- * Get the auth iframe HTML for a given mode.
- * Fetches from /auth/api/forward which returns HTML in the auth.iframe field.
+ * Get the auth iframe URL for a given mode.
+ * Fetches from /auth/api/forward which returns URL in the auth.iframe field.
  * Results are cached per mode.
  * @param {string} mode - The auth mode ('login', 'reauth', 'forbidden')
- * @returns {Promise<string>} - The HTML content for the iframe
+ * @returns {Promise<string>} - The URL for the iframe
  */
-export async function getAuthIframeHtml(mode = 'login') {
-  if (authIframeHtmlCache[mode]) {
-    return authIframeHtmlCache[mode]
+export async function getAuthIframeUrl(mode = 'login') {
+  if (authIframeUrlCache[mode]) {
+    return authIframeUrlCache[mode]
   }
 
-  // Fetch from forward endpoint - it returns HTML in auth.iframe on 401/403
+  // Fetch from forward endpoint - it returns URL in auth.iframe on 401/403
   const response = await fetch('/auth/api/forward', { credentials: 'include' })
   if (response.status === 401 || response.status === 403) {
     const data = await response.json()
     if (data.auth?.iframe) {
-      // Cache the HTML - it's the same regardless of mode (mode is in data attrs)
-      // But we need to patch the mode in the HTML if different from returned
-      let html = data.auth.iframe
+      // The iframe field now contains a URL with hash fragment
+      // If mode differs, update the hash param
+      let url = data.auth.iframe
       if (mode !== data.auth.mode) {
-        // Replace data-mode attribute value
-        html = html.replace(/data-mode="[^"]*"/, `data-mode="${mode}"`)
+        url = url.replace(/mode=[^&]*/, `mode=${mode}`)
       }
-      authIframeHtmlCache[mode] = html
-      return html
+      authIframeUrlCache[mode] = url
+      return url
     }
   }
-  throw new Error('Unable to fetch auth iframe HTML')
+  throw new Error('Unable to fetch auth iframe URL')
 }
 
 /**
@@ -94,11 +93,11 @@ export function isAuthIframeOpen() {
 /**
  * Show the authentication iframe and return a promise that resolves on success.
  * If an auth iframe is already open (from any source), hooks into its completion.
- * @param {string} iframeHtml - The HTML content for the iframe srcdoc
+ * @param {string} iframeUrl - The URL for the iframe src
  * @returns {Promise<void>}
  * @throws {AuthCancelledError} - If authentication is cancelled by user
  */
-export function showAuthIframe(iframeHtml) {
+export function showAuthIframe(iframeUrl) {
   // If we already have a promise (from us), return it
   if (authPromise) return authPromise
 
@@ -120,11 +119,12 @@ export function showAuthIframe(iframeHtml) {
   // Remove existing iframe if any
   hideAuthIframe()
 
-  // Create new iframe for authentication using srcdoc
+  // Create new iframe for authentication using src URL
   authIframe = document.createElement('iframe')
   authIframe.id = 'auth-iframe'
   authIframe.title = 'Authentication'
-  authIframe.srcdoc = iframeHtml
+  authIframe.allow = 'publickey-credentials-get; publickey-credentials-create'
+  authIframe.src = iframeUrl
   document.body.appendChild(authIframe)
 
   return authPromise