@finema/finework-layer 2.0.63 → 2.0.64

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [2.0.64](https://gitlab.finema.co/finema/internal/finework/compare/2.0.63...2.0.64) (2026-09-15)
+
+### Bug Fixes
+
+* fetch PDF as blob to bypass X-Frame-Options restrictions and add loading states ([4584b67](https://gitlab.finema.co/finema/internal/finework/commit/4584b67b555b19a3d2f10a25f1d89f9340dec134))
+
 ## [2.0.63](https://gitlab.finema.co/finema/internal/finework/compare/2.0.62...2.0.63) (2026-09-15)
 
 ## [2.0.62](https://gitlab.finema.co/finema/internal/finework/compare/2.0.61...2.0.62) (2026-09-15)

package/app/components/HelpHub/ManualViewer.vue

@@ -246,9 +246,9 @@
           class="relative flex-1 overflow-hidden bg-gray-600"
         >
           <iframe
-            v-if="current?.file"
-            :key="current.file.url"
-            :src="`${current.file.url}#view=FitH`"
+            v-if="viewerBlobUrl"
+            :key="viewerBlobUrl"
+            :src="`${viewerBlobUrl}#view=FitH`"
             title="User manual"
             class="size-full border-0"
           />
@@ -256,7 +256,7 @@
             v-else
             class="flex h-full items-center justify-center bg-white text-sm text-gray-500"
           >
-            ไม่พบไฟล์คู่มือ
+            {{ viewerError ? 'ไม่สามารถโหลดไฟล์ได้' : (current?.file ? 'กำลังโหลด...' : 'ไม่พบไฟล์คู่มือ') }}
           </div>
         </div>
       </div>
@@ -333,6 +333,41 @@ const current = computed<IManual | null>(
   () => props.manuals.find((m) => m.id === selectedId.value) ?? null,
 )
 
+// The API sets X-Frame-Options/CSP frame-ancestors that block embedding the
+// PDF URL directly in an <iframe> across subdomains. Fetching the bytes and
+// rendering via a blob: URL sidesteps that, since it isn't a framed request.
+const viewerBlobUrl = ref<string | null>(null)
+const viewerError = ref(false)
+
+const revokeViewerBlobUrl = () => {
+  if (viewerBlobUrl.value) {
+    URL.revokeObjectURL(viewerBlobUrl.value)
+    viewerBlobUrl.value = null
+  }
+}
+
+watch(() => current.value?.file?.url, async (url) => {
+  revokeViewerBlobUrl()
+  viewerError.value = false
+
+  if (!url) return
+
+  try {
+    const res = await fetch(url)
+    if (!res.ok) throw new Error(`HTTP ${res.status}`)
+
+    const blob = await res.blob()
+
+    viewerBlobUrl.value = URL.createObjectURL(blob)
+  } catch {
+    viewerError.value = true
+  }
+}, {
+  immediate: true,
+})
+
+onBeforeUnmount(revokeViewerBlobUrl)
+
 const canManage = (app: string) =>
   auth.isSuperAdmin.value || auth.hasPermission(app as UserModule, Permission.SUPER)
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@finema/finework-layer",
   "type": "module",
-  "version": "2.0.63",
+  "version": "2.0.64",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground -o",