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`
|
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 ─────────────────────────────────────────────────────────────
|
// ── Cloud Storage ─────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
export function listCloudConnections() {
|
export function listCloudConnections() {
|
||||||
|
|||||||
@@ -23,10 +23,37 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- iframe content -->
|
<!-- 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
|
<iframe
|
||||||
|
v-if="blobUrl"
|
||||||
class="w-full h-full border-0"
|
class="w-full h-full border-0"
|
||||||
:src="proxyUrl"
|
:src="blobUrl"
|
||||||
title="Document preview"
|
title="Document preview"
|
||||||
></iframe>
|
></iframe>
|
||||||
</div>
|
</div>
|
||||||
@@ -34,7 +61,8 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<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({
|
const props = defineProps({
|
||||||
doc: {
|
doc: {
|
||||||
@@ -46,8 +74,34 @@ const props = defineProps({
|
|||||||
const emit = defineEmits(['close'])
|
const emit = defineEmits(['close'])
|
||||||
|
|
||||||
const overlayRef = ref(null)
|
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) {
|
function handleOverlayClick(e) {
|
||||||
if (e.target === overlayRef.value) {
|
if (e.target === overlayRef.value) {
|
||||||
@@ -63,9 +117,20 @@ function handleKeydown(e) {
|
|||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
document.addEventListener('keydown', handleKeydown)
|
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(() => {
|
onUnmounted(() => {
|
||||||
document.removeEventListener('keydown', handleKeydown)
|
document.removeEventListener('keydown', handleKeydown)
|
||||||
|
// Release the object URL to free browser memory
|
||||||
|
if (blobUrl.value) {
|
||||||
|
URL.revokeObjectURL(blobUrl.value)
|
||||||
|
blobUrl.value = null
|
||||||
|
}
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -119,6 +119,7 @@ import DocumentPreviewModal from '../components/documents/DocumentPreviewModal.v
|
|||||||
import { useDocumentsStore } from '../stores/documents.js'
|
import { useDocumentsStore } from '../stores/documents.js'
|
||||||
import { useTopicsStore } from '../stores/topics.js'
|
import { useTopicsStore } from '../stores/topics.js'
|
||||||
import * as api from '../api/client.js'
|
import * as api from '../api/client.js'
|
||||||
|
import { fetchDocumentContent } from '../api/client.js'
|
||||||
|
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
@@ -157,11 +158,27 @@ onMounted(async () => {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
function openPdf() {
|
async function openPdf() {
|
||||||
if (pdfOpenMode.value === 'in_app') {
|
if (pdfOpenMode.value === 'in_app') {
|
||||||
showPreviewModal.value = true
|
showPreviewModal.value = true
|
||||||
} else {
|
} 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