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

frontend/auth/App.vue

@@ -12,7 +12,7 @@
 <script setup>
 import { onMounted, onUnmounted, ref } from 'vue'
 import { useAuthStore } from '@/stores/auth'
-import { apiJson, getAuthIframeHtml } from '@/utils/api'
+import { apiJson, getAuthIframeUrl } from '@/utils/api'
 import StatusMessage from '@/components/StatusMessage.vue'
 import ProfileView from '@/components/ProfileView.vue'
 import LoadingView from '@/components/LoadingView.vue'
@@ -42,12 +42,13 @@ async function showAuthIframe() {
   // Remove existing iframe if any
   hideAuthIframe()
 
-  // Create new iframe for authentication using srcdoc
-  const html = await getAuthIframeHtml('login')
+  // Create new iframe for authentication using src URL
+  const url = await getAuthIframeUrl('login')
   authIframe = document.createElement('iframe')
   authIframe.id = 'auth-iframe'
   authIframe.title = 'Authentication'
-  authIframe.srcdoc = html
+  authIframe.allow = 'publickey-credentials-get; publickey-credentials-create'
+  authIframe.src = url
   document.body.appendChild(authIframe)
   loadingMessage.value = 'Authentication required...'
 }

frontend/auth/admin/AdminApp.vue

@@ -13,7 +13,7 @@ import AdminUserDetail from '@/admin/AdminUserDetail.vue'
 import AdminDialogs from '@/admin/AdminDialogs.vue'
 import { useAuthStore } from '@/stores/auth'
 import { getSettings, adminUiPath, makeUiHref } from '@/utils/settings'
-import { apiJson, getAuthIframeHtml } from '@/utils/api'
+import { apiJson, getAuthIframeUrl } from '@/utils/api'
 
 const info = ref(null)
 const loading = ref(true)
@@ -299,11 +299,12 @@ function deletePermission(p) {
 
 async function showAuthIframe() {
   hideAuthIframe()
-  const html = await getAuthIframeHtml('login')
+  const url = await getAuthIframeUrl('login')
   authIframe = document.createElement('iframe')
   authIframe.id = 'auth-iframe'
   authIframe.title = 'Authentication'
-  authIframe.srcdoc = html
+  authIframe.allow = 'publickey-credentials-get; publickey-credentials-create'
+  authIframe.src = url
   document.body.appendChild(authIframe)
   loadingMessage.value = 'Authentication required...'
 }

frontend/auth/restricted/RestrictedApi.vue

@@ -10,12 +10,12 @@
 import { computed, onMounted } from 'vue'
 import RestrictedAuth from '@/components/RestrictedAuth.vue'
 
-// Detect mode from data attribute on html tag (injected by server)
+// Detect mode from URL hash fragment
 const authMode = computed(() => {
-  const htmlElement = document.documentElement
-  const dataMode = htmlElement.getAttribute('data-mode')
-  if (dataMode === 'reauth') return 'reauth'
-  if (dataMode === 'forbidden') return 'forbidden'
+  const params = new URLSearchParams(window.location.hash.slice(1))
+  const mode = params.get('mode')
+  if (mode === 'reauth') return 'reauth'
+  if (mode === 'forbidden') return 'forbidden'
   return 'login'
 })
 

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

frontend/src/utils/passkey.js

@@ -37,7 +37,7 @@ export async function register(resetToken = null, displayName = null, onstartreg
       // Notify caller that we're about to show the browser prompt
       if (onstartreg) onstartreg()
 
-      const registrationResponse = await startRegistration({ optionsJSON: res })
+      const registrationResponse = await startRegistration(res)
       ws.send_json(registrationResponse)
 
       const result = await ws.receive_json()
@@ -64,7 +64,7 @@ export async function authenticate() {
       throw new Error(res.detail || `Authentication failed: ${res.status}`)
     }
 
-    const authResponse = await startAuthentication({ optionsJSON: res })
+    const authResponse = await startAuthentication(res)
     ws.send_json(authResponse)
 
     const result = await ws.receive_json()