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'
 })