Some test text!

Oct 26 2022

How to Validate Digital Signatures in PDF Using JavaScript

by Heather Dinsdale

This tutorial demonstrates how to verify digital signatures and certificates using JavaScript right in your web application with just one component, PDFTron’s

SDK, and a few lines of code.  

At the end of the process, you’ll see your validated signature and document displayed in WebViewer: 

WebViewer extracts, validates, and displays results in any web app

For more in-depth information, see our certificate authority

. You can also check out our digital signature validation
sample
.   

Additionally, there’s a full code sample on using a digital signature API to digitally sign, certify, and/or validate PDF documents. See the

for digitally signing PDFs in JavaScript. 

Step 1: Install WebViewer 

So you want to set up an environment where your users can digitally sign, validate and view documents in just a few steps, but you aren’t sure where to start. Thankfully, with PDFTron’s WebViewer, you can easily add and display digital signature verification results for the user to see.  

Note: Since this component uses JavaScript and WebAssembly, signatures are validated right in the client application. No data leaves the client during validation, ensuring no sensitive information is transmitted outside of the client application. 

Let's start with installing WebViewer. WebViewer supports a full range of

such as React, Vue, and Angular. You can even demo new features in your environment today, no trial key required. Just visit our
get started
page. 

There are different ways to install WebViewer, but we’ll use NPM for this example.  

To use WebViewer for validating digital signatures, download and install versions 8.0+ via

. (The following examples are all for version 8.0+.) 

Since WebViewer requires static resources to be served (which cannot be bundled), an extra step involves manually copying static files into your dist directory. 

Prerequisites 

First, install

(which includes NPM). 

WebViewer does not require Node, NPM, or the node_modules directory. These tools are only required to run the samples. 

1. Install via NPM 

Note: The following instructions are for JavaScript. 

Run the following command in your project: 

npm i @pdftron/webviewer

This installs the main JS entrypoint, and downloads static assets required for WebViewer to run. 

2. Copy static assets 

Next, copy the static assets required for WebViewer to run into a public location that is served via HTTP/HTTPS (usually a dist or build folder). The static files are in: 

node_modules/@pdftron/webviewer/public

You can add a script to your package.json that moves the static files for you.

This copies all required files into the dist/public folder after your build is complete. 

{ 
  "scripts": { 
    "move-static": "cp -a ./node_modules/@pdftron/webviewer/public/. ./dist/public/webviewer", 
    "build": "mybuildscript && npm run move-static" 
  } 
}

3. Usage 

When using WebViewer in your code, you must tell it where you copied these static files using the path parameter. 

For example, if you copied the static files into dist/public/webviewer, your code would look something like this: 

import WebViewer from '@pdftron/webviewer' 
 
WebViewer( 
  {  
    path: '/public/webviewer', 
  }, 
  document.getElementById('viewer'), 
).then(instance => {  
  const { UI, Core } = instance;  
  const { documentViewer, annotationManager, Tools, Annotations } = Core;  
 

  documentViewer.addEventListener('documentLoaded', () => {  
    // call methods relating to the loaded document  
  });  
  instance.UI.loadDocument('https://fileserver/documents/test.pdf');  
})

For info on the next steps, visit 

Digital signature properties and functions are available in the API 

Step 2: Export the Trusted Certificates List into WebViewer 

After installing WebViewer, the next and last step is to set up your trust list. This list tells WebViewer which digital signatures and certificates are safe and already validated by a reliable certificate authority. Since users probably want digital signature validation results similar to Adobe’s, we’ll export the

and EUTL to WebViewer. This allows your users to validate the results using the same public certificates that Adobe Reader uses. They can then open the signed documents in their own web application, without leaving their environment. 

Use the following steps to export the list into WebViewer: 

1. Open Adobe Reader

2. Click the Edit menu button on the top left. 

3. Go to Preferences

4. Go to the Signatures category on the left. 

5. Click the More... button under the Identities & Trusted Certificates section. 

6. Go to the Trusted Certificates list on the left. 

7. Highlight all the certificates on the list (click on first, hold Shift, click on last). 

8. Click Export

  • Leave the default radio button options. 
  • Save the exported data to a file. 
  • Choose Acrobat FDF Data Exchange

9. Save the .fdf file. 

10. Import the .fdf file via the

API, for example, extending the code example above: 

import WebViewer from '@pdftron/webviewer' 
 
WebViewer( 
  {  
    path: '/public/webviewer', 
  }, 
  document.getElementById('viewer'), 
).then(async instance => {  
  const { UI, Core } = instance; 
  const { documentViewer, annotationManager, Tools, Annotations } = Core; 
 
  documentViewer.addEventListener('documentLoaded', () => {  
    // call methods relating to the loaded document  
  }); 
 
  // Open the signaturePanel element immediately to see Digital Signature information 
  instance.UI.openElements(['signaturePanel']); 
 
  // Please ensure that the PDF you load contains Digital Signature data 
  instance.UI.loadDocument('https://fileserver/documents/test.pdf'); 
 
  const response = await fetch('https://fileserver/path/to/exported/trust-list.fdf'); 
  instance.UI.VerificationOptions.loadTrustList(await response.blob()); 
})

WebViewer then attempts to validate digital signatures in the PDF documents using the public certificates. 

And that’s it! Once these steps are complete, you can open a digitally signed document in PDFTron’s WebViewer and view the document and its signature properties, like so: 

Valid digital signature properties displayed in WebViewer

Next Steps 

In this tutorial, we’ve set up an environment where users can validate digital signatures right in their web app using a single component, WebViewer. We installed WebViewer and exported a trust list, so end-users don’t need additional tools or programs. 

WebViewer also supports additional security features, such as dig sig

, long-term validation (
LTV
) and modification detection permissions (
MDP
). And WebViewer offers granular reporting on validation results for developers to build secure applications. For more details, read
How We Secure our Digital Signature Validation in PDF.
 

To learn more about WebViewer, check out our

, which allows you to explore all the JavaScript functionality PDFTron offers. If you have any questions or features you would like to see next, do not hesitate to
reach out
to us directly.

Related articles

thumbnail

How Can I Tell What’s Inside a PDF? Raster, Vector, Text?

Learn about the content types you find in PDFs and discover tricks & toolsfor figuring out what’s inside your PDF – raster, vector, or text?

thumbnail

PDF Rendering and Viewing: What is the Difference?

In this post, learn about the difference between PDF rendering and PDF viewing, and how the PDFTron PDF SDK unpacks your PDFs for display in a viewer application.

thumbnail

Open Source or Proprietary — What PDF Viewer Engine is Right for My Application?

A comparison of PDF viewer library options and tips on how to decide which PDF rendering and viewing alternative is best for your application. Open source or proprietary?

HEATHER DINSDALE

Marketing Content Writer

Content/technical writer, editor, Parrot Head.

Related Products

Share this post

Upcoming Webinar: PDFTron SDK Tech Review | Nov 29, 2022 at 2 pm ET

PDFTron SDK

The Platform

NEW

© 2022 PDFTron Systems Inc. All rights reserved.

Privacy

Terms of Use