secure-pdf-viewer-vue3

A secure PDF viewer component for Vue 3. Uses canvas-only rendering to prevent XSS attacks from malicious PDF files.

Features

• Canvas-only rendering -- PDF pages are rasterized to <canvas>, no textLayer or annotationLayer DOM elements are created, eliminating all XSS injection vectors
• JavaScript execution disabled -- isEvalSupported: false prevents PDF.js from executing embedded JavaScript
• External resource blocking -- disableAutoFetch: true blocks external resource loading (SSRF prevention)
• Font injection prevention -- disableFontFace: true blocks @font-face injection
• Built-in toolbar with page navigation and zoom controls
• Keyboard shortcuts support
• Three input modes: URL, File object, and ArrayBuffer
• TypeScript support

Installation

npm install secure-pdf-viewer-vue3 pdfjs-dist

Basic Usage

Load PDF from URL

<template>
  <SecurePdfViewer src="https://example.com/document.pdf" />
</template>

<script setup>
import { SecurePdfViewer } from 'secure-pdf-viewer-vue3';
</script>

Load PDF from File Upload

<template>
  <div>
    <input type="file" accept=".pdf" @change="onFileChange" />
    <SecurePdfViewer v-if="pdfFile" :file="pdfFile" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { SecurePdfViewer } from 'secure-pdf-viewer-vue3';

const pdfFile = ref(null);

function onFileChange(e) {
  pdfFile.value = e.target.files[0];
}
</script>

Load PDF from ArrayBuffer

<template>
  <SecurePdfViewer v-if="pdfData" :data="pdfData" />
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { SecurePdfViewer } from 'secure-pdf-viewer-vue3';

const pdfData = ref(null);

onMounted(async () => {
  const response = await fetch('/document.pdf');
  pdfData.value = await response.arrayBuffer();
});
</script>

Full Example

<template>
  <SecurePdfViewer
    ref="viewerRef"
    src="/docs/report.pdf"
    :initial-scale="1.5"
    :show-toolbar="true"
    worker-src="/pdf.worker.min.mjs"
    @page-change="onPageChange"
    @scale-change="onScaleChange"
    @load-state-change="onLoadStateChange"
    @error="onError"
  />
</template>

<script setup>
import { ref } from 'vue';
import { SecurePdfViewer } from 'secure-pdf-viewer-vue3';

const viewerRef = ref(null);

function onPageChange(page, totalPages) {
  console.log(`Page ${page} of ${totalPages}`);
}

function onScaleChange(scale) {
  console.log(`Zoom: ${Math.round(scale * 100)}%`);
}

function onLoadStateChange(state) {
  console.log(`Load state: ${state}`);
}

function onError(error) {
  console.error('PDF error:', error);
}

// Access exposed methods via ref
function jumpToPage5() {
  viewerRef.value?.goToPage(5);
}
</script>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | src | string | undefined | URL of the PDF file | | file | File | undefined | File object (for file upload scenarios) | | data | ArrayBuffer \| Uint8Array | undefined | Raw PDF data | | initialScale | number | 1.0 | Initial zoom scale | | minScale | number | 0.25 | Minimum zoom scale | | maxScale | number | 5.0 | Maximum zoom scale | | showToolbar | boolean | true | Whether to show the toolbar | | class | string | '' | Custom CSS class for the container | | style | object | {} | Custom inline styles for the container | | workerSrc | string | undefined | Custom path to the PDF.js worker file | | pixelRatio | number | window.devicePixelRatio | Device pixel ratio for rendering | | disableDownload | boolean | false | Disable the download button in toolbar |

Events

| Event | Payload | Description | |-------|---------|-------------| | load-state-change | state: 'idle' \| 'loading' \| 'ready' \| 'error' | Fired when the loading state changes | | page-change | page: number, totalPages: number | Fired when the current page changes | | scale-change | scale: number | Fired when the zoom scale changes | | error | error: Error | Fired when an error occurs |

Exposed Methods

Access these methods via a template ref:

| Method | Signature | Description | |--------|-----------|-------------| | goToPage | (page: number) => void | Navigate to a specific page | | setScale | (scale: number) => void | Set the zoom scale (clamped to min/max) | | getState | () => { currentPage, totalPages, scale } | Get the current viewer state |

Keyboard Shortcuts

When the viewer is focused:

| Key | Action | |-----|--------| | Arrow Left / Arrow Up | Previous page | | Arrow Right / Arrow Down | Next page | | Ctrl + | Zoom in | | Ctrl - | Zoom out |

Security Features

This component is designed with security as the core principle:

1. No DOM injection -- PDF content is rendered purely to a <canvas> element. No innerHTML, textLayer, or annotationLayer is used, which eliminates all XSS attack vectors from malicious PDFs.

2. JavaScript execution disabled -- The isEvalSupported: false configuration prevents PDF.js from executing any JavaScript embedded in PDF files.

3. External resource blocking -- disableAutoFetch: true prevents the PDF from loading external resources, mitigating SSRF attacks.

4. Font injection prevention -- disableFontFace: true blocks @font-face CSS injection from PDF fonts.

Worker Setup for Production

For production deployments with strict CSP (Content Security Policy), place the pdf.worker.min.mjs file in your public directory and provide its path via the workerSrc prop:

<SecurePdfViewer
  src="/document.pdf"
  worker-src="/pdf.worker.min.mjs"
/>

License

MIT