secure-pdf-viewer-react

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

Why?

Standard PDF viewers that render text layers and annotation layers into the DOM are vulnerable to XSS attacks embedded in crafted PDF files. This component renders PDF pages exclusively to <canvas> elements, eliminating all DOM injection vectors.

Installation

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

Quick Start

Load from URL

import { SecurePdfViewer } from 'secure-pdf-viewer-react';

function App() {
  return (
    <div style={{ width: '100%', height: '100vh' }}>
      <SecurePdfViewer src="https://example.com/document.pdf" />
    </div>
  );
}

Load from File Upload

import { useState } from 'react';
import { SecurePdfViewer } from 'secure-pdf-viewer-react';

function App() {
  const [file, setFile] = useState<File | undefined>();

  return (
    <div>
      <input
        type="file"
        accept=".pdf"
        onChange={(e) => setFile(e.target.files?.[0])}
      />
      {file && <SecurePdfViewer file={file} />}
    </div>
  );
}

Load from ArrayBuffer

import { SecurePdfViewer } from 'secure-pdf-viewer-react';

function App({ pdfData }: { pdfData: ArrayBuffer }) {
  return <SecurePdfViewer data={pdfData} />;
}

Using Ref Methods

import { useRef } from 'react';
import { SecurePdfViewer, SecurePdfViewerRef } from 'secure-pdf-viewer-react';

function App() {
  const viewerRef = useRef<SecurePdfViewerRef>(null);

  const jumpToPage5 = () => viewerRef.current?.goToPage(5);
  const getInfo = () => console.log(viewerRef.current?.getState());

  return (
    <div>
      <button onClick={jumpToPage5}>Go to Page 5</button>
      <button onClick={getInfo}>Log State</button>
      <SecurePdfViewer ref={viewerRef} src="/document.pdf" />
    </div>
  );
}

Props

Prop	Type	Default	Description
src	string	—	URL of the PDF file
file	File	—	File object (from <input type="file">)
data	ArrayBuffer | Uint8Array	—	Raw PDF data
initialScale	number	1.0	Initial zoom level
minScale	number	0.25	Minimum zoom level
maxScale	number	5.0	Maximum zoom level
showToolbar	boolean	true	Show the built-in toolbar
className	string	''	CSS class for the container
style	CSSProperties	—	Inline styles for the container
workerSrc	string	—	Custom path to pdf.worker.min.mjs
pixelRatio	number	devicePixelRatio	Device pixel ratio for rendering
disableDownload	boolean	false	Disable the download button

Note: Provide exactly one of src, file, or data.

Callbacks

Callback	Signature	Description
onLoadStateChange	(state: 'idle' | 'loading' | 'ready' | 'error') => void	Fires when load state changes
onPageChange	(page: number, totalPages: number) => void	Fires when the current page changes
onScaleChange	(scale: number) => void	Fires when the zoom level changes
onError	(error: Error) => void	Fires when an error occurs

Ref Methods

Access these via a React ref (useRef<SecurePdfViewerRef>):

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

Security Features

This component enforces multiple layers of security:

1. Canvas-only rendering — PDF pages are rasterized to <canvas>. No textLayer or annotationLayer DOM elements are created, eliminating all XSS injection vectors.
2. JavaScript execution disabled — isEvalSupported: false prevents PDF.js from executing any JavaScript embedded in PDF files.
3. External resource blocking — disableAutoFetch: true blocks external resource loading, preventing SSRF attacks.
4. Font injection prevention — disableFontFace: true blocks @font-face CSS injection from PDF fonts.

Worker Configuration

For production use, place pdf.worker.min.mjs from the pdfjs-dist package in your public directory and pass its path via the workerSrc prop:

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

This avoids relying on the CDN fallback and ensures CSP compliance.

Keyboard Shortcuts

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

License

MIT - see LICENSE for details.