DEV Community

sunshey
sunshey

Posted on

How I Encrypt PDFs in the Browser with Vue 3 and @pdfsmaller/pdf-encrypt-lite

#javascript #vue #pdf #webdev

Password protecting a PDF sounds trivial, but building it client-side has a few gotchas. Users expect to type a password, hit a button, and get a locked file. They don't expect their file to upload to a server.

I built en.sotool.top/encrypt/ to do exactly that. Here's how it works with Vue 3 and @pdfsmaller/pdf-encrypt-lite.

Why Client-Side Encryption?

PDFs often contain sensitive information. Contracts, financial statements, medical records. Password protecting a file on a server means trusting someone else with your password and your document.

Client-side benefits:

  • No upload bandwidth or size limits
  • Your password never leaves your device
  • Instant encryption for normal files
  • Works offline after the page loads

The tradeoff is that you need a library that can handle PDF encryption in the browser.

The Stack

  • Vue 3 — UI and state
  • @pdfsmaller/pdf-encrypt-lite — Browser-based PDF encryption
  • File API — Read the uploaded file
  • lucide-vue-next — Icons 
npm install @pdfsmaller/pdf-encrypt-lite
Enter fullscreen mode Exit fullscreen mode

The Encryption Library

@pdfsmaller/pdf-encrypt-lite is a lightweight wrapper around pdf-lib's encryption capabilities. It supports:

  • Open passwords (require password to open the file)
  • RC4 40-bit and RC4 128-bit encryption
  • AES-128 encryption (recommended for modern compatibility)
  • Permissions passwords (restrict printing, copying, editing)

For our use case, we only need open passwords.

Loading the PDF

First, read the file and prepare it for encryption.

import { encryptPDF } from '@pdfsmaller/pdf-encrypt-lite'

const pdfFile = ref<File | null>(null)
const userPassword = ref('')
const confirmPassword = ref('')
const processing = ref(false)

async function handleFile(files: File[]) {
  if (files.length === 0) return
  pdfFile.value = files[0]
}
Enter fullscreen mode Exit fullscreen mode

Password Validation

We validate the password before encryption starts.

<input
  v-model="userPassword"
  type="password"
  placeholder="Set password to open the file"
  class="w-full text-sm border border-border rounded-lg px-4 py-3 bg-surface"
/>

<input
  v-model="confirmPassword"
  type="password"
  placeholder="Enter password again"
  :class="confirmPassword && confirmPassword !== userPassword ? 'border-red-400' : ''"
/>
<p v-if="confirmPassword && confirmPassword !== userPassword" class="text-xs text-danger">
  Passwords do not match
</p>
Enter fullscreen mode Exit fullscreen mode

The button is disabled until the passwords match and the password is non-empty.

Performing the Encryption 

async function encrypt() {
  if (!pdfFile.value) return
  if (!userPassword.value || userPassword.value !== confirmPassword.value) return

  processing.value = true
  try {
    const bytes = new Uint8Array(await pdfFile.value.arrayBuffer())
    const encrypted = await encryptPDF(bytes, userPassword.value, userPassword.value)
    const blob = new Blob([encrypted], { type: 'application/pdf' })
    downloadBlob(blob, 'encrypted.pdf')
  } catch (e) {
    console.error(e)
    alert('Encryption failed: ' + (e instanceof Error ? e.message : 'Unknown error'))
  } finally {
    processing.value = false
  }
}
Enter fullscreen mode Exit fullscreen mode

The encryptPDF function takes the file bytes, the open password, and the permissions password. For open-password-only mode, we pass the same password for both.

Downloading the Result 

function downloadBlob(blob: Blob, filename: string) {
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = filename
  a.click()
  URL.revokeObjectURL(url)
}
Enter fullscreen mode Exit fullscreen mode

Lessons Learned

Don't store passwords in state longer than needed. After encryption, clear the password fields. Even though nothing is uploaded, leaving the password in ref state is unnecessary memory.

Validate passwords client-side. Check for empty strings, minimum length (we recommend 8+ characters), and match confirmation. This prevents a failed encryption attempt.

Use AES-128, not RC4-40. Older tools default to RC4 40-bit for compatibility, but AES-128 is the modern standard. The library handles this internally, but it's worth knowing.

Warn users not to forget their password. There is no "forgot password" mechanism because the password never reaches a server. Add a visible warning before the encrypt button.

Keep the UI simple. Password protection is a one-step operation. Don't overwhelm users with encryption algorithm settings. Let the library handle the details.

Try It

The tool is live at en.sotool.top/encrypt/.

Free, no signup, nothing uploads to a server.

Full source is on GitHub. The encryption logic is in src/views/Encrypt.vue.

Want More Advanced PDF Security?

If you need granular permissions (restrict printing, allow copying), add digital signatures, or manage access for teams, Wondershare PDFelement is a solid desktop option.

This post contains affiliate links.

Have you built PDF security tools in the browser? What encryption approach did you use?

Top comments (0)