feat(05-09): authenticated document preview via fetch + Blob URL
- Add fetchDocumentContent() to client.js: fetch with Bearer auth, 401 refresh retry pattern, returns raw Response (not parsed JSON) for blob() calls - Replace iframe :src=proxyUrl (unauthenticated) in DocumentPreviewModal.vue with authenticated fetch → blob → URL.createObjectURL; loading/error states; URL.revokeObjectURL on unmount to prevent memory leaks - Replace window.open(rawUrl) in DocumentView.vue openPdf() with fetchDocumentContent → blob → objectUrl → window.open; 60s auto-revoke - Frontend build exits 0 with zero errors - Closes T-05-09-04: no persistent unauthenticated content exposure
This commit is contained in:
@@ -365,6 +365,49 @@ export function getDocumentContentUrl(docId) {
|
||||
return `/api/documents/${docId}/content`
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch document content bytes with authentication, returning the raw Response.
|
||||
*
|
||||
* Unlike request(), this function does NOT call res.json() — it returns the raw
|
||||
* Response so callers can call .blob() to build an object URL for iframe preview
|
||||
* or window.open() without an unauthenticated src= attribute.
|
||||
*
|
||||
* On 401: attempts one token refresh via authStore.refresh() then retries.
|
||||
* On refresh failure: clears auth state and throws 'Session expired'.
|
||||
*
|
||||
* Security: closes the unauthenticated content-access gap where an iframe src=
|
||||
* or window.open() with a raw /content URL would bypass the Bearer auth check
|
||||
* in cases where the browser does not send the cookie (cross-origin, incognito).
|
||||
* See plan 05-09 trust boundary: frontend→/api/documents/{id}/content.
|
||||
*/
|
||||
export async function fetchDocumentContent(docId, options = {}) {
|
||||
const { useAuthStore } = await import('../stores/auth.js')
|
||||
const authStore = useAuthStore()
|
||||
|
||||
const headers = {}
|
||||
if (authStore.accessToken) {
|
||||
headers['Authorization'] = `Bearer ${authStore.accessToken}`
|
||||
}
|
||||
|
||||
const res = await fetch(`/api/documents/${docId}/content`, {
|
||||
headers,
|
||||
credentials: 'include',
|
||||
})
|
||||
|
||||
if (res.status === 401 && !options._retry) {
|
||||
try {
|
||||
await authStore.refresh()
|
||||
return fetchDocumentContent(docId, { _retry: true })
|
||||
} catch {
|
||||
authStore.accessToken = null
|
||||
authStore.user = null
|
||||
throw new Error('Session expired')
|
||||
}
|
||||
}
|
||||
|
||||
return res
|
||||
}
|
||||
|
||||
// ── Cloud Storage ─────────────────────────────────────────────────────────────
|
||||
|
||||
export function listCloudConnections() {
|
||||
|
||||
@@ -23,10 +23,37 @@
|
||||
</div>
|
||||
|
||||
<!-- iframe content -->
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<div class="flex-1 overflow-hidden relative">
|
||||
<!-- Loading state -->
|
||||
<div
|
||||
v-if="loading"
|
||||
class="absolute inset-0 flex items-center justify-center bg-gray-50"
|
||||
>
|
||||
<div class="flex flex-col items-center gap-3 text-gray-400">
|
||||
<svg class="w-8 h-8 animate-spin" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
<span class="text-sm">Loading preview…</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Error state -->
|
||||
<div
|
||||
v-else-if="loadError"
|
||||
class="absolute inset-0 flex items-center justify-center bg-gray-50"
|
||||
>
|
||||
<div class="text-center text-red-500">
|
||||
<p class="font-medium">Preview failed</p>
|
||||
<p class="text-sm mt-1">{{ loadError }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- iframe: shown only when blobUrl is ready -->
|
||||
<iframe
|
||||
v-if="blobUrl"
|
||||
class="w-full h-full border-0"
|
||||
:src="proxyUrl"
|
||||
:src="blobUrl"
|
||||
title="Document preview"
|
||||
></iframe>
|
||||
</div>
|
||||
@@ -34,7 +61,8 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
||||
import { ref, watch, onMounted, onUnmounted } from 'vue'
|
||||
import { fetchDocumentContent } from '../../api/client.js'
|
||||
|
||||
const props = defineProps({
|
||||
doc: {
|
||||
@@ -46,8 +74,34 @@ const props = defineProps({
|
||||
const emit = defineEmits(['close'])
|
||||
|
||||
const overlayRef = ref(null)
|
||||
const blobUrl = ref(null)
|
||||
const loadError = ref(null)
|
||||
const loading = ref(true)
|
||||
|
||||
const proxyUrl = computed(() => `/api/documents/${props.doc.id}/content`)
|
||||
async function loadContent(docId) {
|
||||
loading.value = true
|
||||
loadError.value = null
|
||||
|
||||
// Revoke previous blob URL to free memory
|
||||
if (blobUrl.value) {
|
||||
URL.revokeObjectURL(blobUrl.value)
|
||||
blobUrl.value = null
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await fetchDocumentContent(docId)
|
||||
if (!res.ok) {
|
||||
loadError.value = `Failed to load document (HTTP ${res.status})`
|
||||
return
|
||||
}
|
||||
const blob = await res.blob()
|
||||
blobUrl.value = URL.createObjectURL(blob)
|
||||
} catch (err) {
|
||||
loadError.value = err.message || 'Failed to load document'
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function handleOverlayClick(e) {
|
||||
if (e.target === overlayRef.value) {
|
||||
@@ -63,9 +117,20 @@ function handleKeydown(e) {
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener('keydown', handleKeydown)
|
||||
loadContent(props.doc.id)
|
||||
})
|
||||
|
||||
// Reload if the document changes while modal is open
|
||||
watch(() => props.doc.id, (newId) => {
|
||||
loadContent(newId)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('keydown', handleKeydown)
|
||||
// Release the object URL to free browser memory
|
||||
if (blobUrl.value) {
|
||||
URL.revokeObjectURL(blobUrl.value)
|
||||
blobUrl.value = null
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -119,6 +119,7 @@ import DocumentPreviewModal from '../components/documents/DocumentPreviewModal.v
|
||||
import { useDocumentsStore } from '../stores/documents.js'
|
||||
import { useTopicsStore } from '../stores/topics.js'
|
||||
import * as api from '../api/client.js'
|
||||
import { fetchDocumentContent } from '../api/client.js'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
@@ -157,11 +158,27 @@ onMounted(async () => {
|
||||
}
|
||||
})
|
||||
|
||||
function openPdf() {
|
||||
async function openPdf() {
|
||||
if (pdfOpenMode.value === 'in_app') {
|
||||
showPreviewModal.value = true
|
||||
} else {
|
||||
window.open(api.getDocumentContentUrl(doc.value.id), '_blank')
|
||||
// Fetch with Authorization header → blob → object URL → window.open
|
||||
// This closes the unauthenticated access gap: window.open(rawUrl) would bypass
|
||||
// Bearer auth for cloud documents (plan 05-09 trust boundary).
|
||||
try {
|
||||
const res = await fetchDocumentContent(doc.value.id)
|
||||
if (!res.ok) {
|
||||
console.error('Failed to open document:', res.status)
|
||||
return
|
||||
}
|
||||
const blob = await res.blob()
|
||||
const objectUrl = URL.createObjectURL(blob)
|
||||
window.open(objectUrl, '_blank')
|
||||
// Revoke after a delay to allow the new tab to load the content
|
||||
setTimeout(() => URL.revokeObjectURL(objectUrl), 60000)
|
||||
} catch (err) {
|
||||
console.error('Failed to open document:', err)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user