|
| 1 | +--- |
| 2 | +layout: post |
| 3 | +title: Validate Digital Signatures in React PDF Viewer | Syncfusion |
| 4 | +description: Learn how to validate digital signatures applied to PDF forms using the Syncfusion JavaScript PDF Library with the React PDF Viewer. Covers integrity, certificate trust, timestamp, and revocation checks. |
| 5 | +platform: document-processing |
| 6 | +control: PdfViewer |
| 7 | +documentation: ug |
| 8 | +--- |
| 9 | + |
| 10 | +# Validate Digital Signatures |
| 11 | + |
| 12 | +This guide explains **how to validate digital signatures** on PDFs when using the **Syncfusion React PDF Viewer** together with the **JavaScript PDF Library**. It clarifies what the Viewer does (display fields and signature appearances) and what the **PDF Library** does (perform **cryptographic validation** and produce validation results). |
| 13 | + |
| 14 | +N> **Important:** The React PDF Viewer renders signature fields and their visual appearances, but **cryptographic validation is performed by the JavaScript PDF Library**. Use the library to check integrity, certificate trust, and timestamp status, and surface the result in your UI. |
| 15 | + |
| 16 | +## Overview (Explanation) |
| 17 | + |
| 18 | +A **digital signature** is a cryptographic proof embedded in the PDF that allows verifiers to confirm: |
| 19 | + |
| 20 | +- **Document integrity** – The PDF has not changed since it was signed. |
| 21 | +- **Signer identity & trust** – The signer’s certificate chains to a trusted authority or is trusted locally. |
| 22 | +- **Timestamp validity** – (If present) the signature was time‑stamped by a trusted TSA at signing time. |
| 23 | +- **Revocation status** – Whether the signer’s certificate was revoked at or after signing (OCSP/CRL). |
| 24 | + |
| 25 | +In Syncfusion, you typically **[design the signature field in the Viewer](../../forms/manage-form-fields/create-form-fields#signature-field)** and then **[apply and validate the digital signature using the PDF Library]()**. |
| 26 | + |
| 27 | +## How validation fits in the Viewer flow (Concept) |
| 28 | + |
| 29 | +1. Load and interact with the PDF in **React PDF Viewer** (place fields, fill forms). |
| 30 | +2. Use **JavaScript PDF Library** to **open the PDF bytes** and **validate the signature**. |
| 31 | +3. Display the validation outcome (valid/invalid/unknown) in your React UI (badge, toast, side panel). |
| 32 | + |
| 33 | + |
| 34 | + |
| 35 | +## How‑to: Validate a digital signature (Client‑side) |
| 36 | + |
| 37 | +The example below shows how to load the PDF bytes yourself, open with the **PDF Library**, and validate each signature field. You can call this when the document is loaded or on demand (e.g., a **Validate** button). |
| 38 | + |
| 39 | +```ts |
| 40 | +// Assumes you already have the PDF bytes (e.g., fetched via fetch(...).arrayBuffer()) |
| 41 | +import { |
| 42 | + PdfDocument, |
| 43 | + // The validation API is available on the signature/field instance |
| 44 | +} from '@syncfusion/ej2-pdf'; |
| 45 | + |
| 46 | +async function validateSignatures(pdfBytes: ArrayBuffer) { |
| 47 | + const doc = new PdfDocument(pdfBytes); |
| 48 | + |
| 49 | + const results: Array<{ |
| 50 | + fieldName: string; |
| 51 | + isIntact: boolean; // document integrity |
| 52 | + isTrusted: boolean; // certificate trust (based on local trust) |
| 53 | + isTimestampValid?: boolean; |
| 54 | + message: string; |
| 55 | + }> = []; |
| 56 | + |
| 57 | + // Iterate form fields and locate signature fields |
| 58 | + if (doc.form && doc.form.fields && doc.form.fields.length) { |
| 59 | + for (const f of doc.form.fields as any[]) { |
| 60 | + if (f && f.type === 'SignatureField') { |
| 61 | + const sigField = f; // PdfSignatureField |
| 62 | + |
| 63 | + // Validate the signature on this field. Depending on your build, this may |
| 64 | + // expose a method like validate() or properties describing status flags. |
| 65 | + // Pseudocode below: adapt to your actual API surface. |
| 66 | + const vr = await sigField.validate(); |
| 67 | + // vr may include: isDocumentIntact, isCertificateTrusted, isTimestampValid, messages, etc. |
| 68 | + |
| 69 | + results.push({ |
| 70 | + fieldName: sigField.name, |
| 71 | + isIntact: !!vr?.isDocumentIntact, |
| 72 | + isTrusted: !!vr?.isCertificateTrusted, |
| 73 | + isTimestampValid: vr?.isTimestampValid, |
| 74 | + message: vr?.message || '' |
| 75 | + }); |
| 76 | + } |
| 77 | + } |
| 78 | + } |
| 79 | + |
| 80 | + doc.destroy(); |
| 81 | + return results; |
| 82 | +} |
| 83 | +``` |
| 84 | + |
| 85 | +N> If your current build doesn’t expose a promise‑based `validate()` on the field, consult the PDF Library’s digital signature API in your version and map the available properties/methods to the same **intact / trusted / timestamp** status for display. |
| 86 | + |
| 87 | +### Displaying results in React (example snippet) |
| 88 | + |
| 89 | +```tsx |
| 90 | +const [validation, setValidation] = useState(null); |
| 91 | + |
| 92 | +async function onValidateClick() { |
| 93 | + const bytes = await fetch('/path/to/signed.pdf').then(r => r.arrayBuffer()); |
| 94 | + const r = await validateSignatures(bytes); |
| 95 | + setValidation(r); |
| 96 | +} |
| 97 | +``` |
| 98 | + |
| 99 | +Render a simple table or badge: |
| 100 | + |
| 101 | +```tsx |
| 102 | +{validation && ( |
| 103 | + <div className="sig-validation"> |
| 104 | + {validation.map(v => ( |
| 105 | + <div key={v.fieldName} className="chip"> |
| 106 | + <strong>{v.fieldName}:</strong> |
| 107 | + {v.isIntact && v.isTrusted ? ' Valid' : ' Invalid/Unknown'} |
| 108 | + </div> |
| 109 | + ))} |
| 110 | + </div> |
| 111 | +)} |
| 112 | +``` |
| 113 | + |
| 114 | +## Interpreting validation outcomes (Reference) |
| 115 | + |
| 116 | +- **Valid** – Integrity OK **and** certificate is trusted. (Timestamp valid if present.) |
| 117 | +- **Invalid** – Bytes changed after signing **or** signature object malformed. |
| 118 | +- **Unknown/Not Trusted** – Integrity OK but signer certificate is not trusted locally (common with **self‑signed PFX** used for demos). Import the signer certificate into the trusted store to see a *Valid* badge. |
| 119 | + |
| 120 | +## Best practices (Explanation) |
| 121 | + |
| 122 | +- **Single‑save rule:** Do **all edits first**, then **sign**, and **do not modify** the PDF after signing; modifying bytes after signing will invalidate the signature. |
| 123 | +- **Establish trust:** For demos, a self‑signed PFX will appear *Unknown*. For production, use a certificate that chains to a trusted CA or import the signer/issuer to the verifier’s trust store. |
| 124 | +- **Prefer timestamping (TSA):** A trusted timestamp improves long‑term validation even if the signer’s cert later expires or is revoked. |
| 125 | +- **Surface status in UI:** Show a clear badge (Valid/Invalid/Unknown) near the signature field or toolbar, and offer a *View details* panel with integrity, trust, and timestamp info. |
| 126 | + |
| 127 | +## Troubleshooting |
| 128 | + |
| 129 | +- **Signature shows Invalid** – Check whether the PDF was modified **after** signing (e.g., second save/flatten). Re‑sign as the last step. |
| 130 | +- **Unknown signer** – You are using a **self‑signed** PFX. Import the certificate into the validator’s trust store or use a CA‑issued certificate. |
| 131 | +- **Algorithm unsupported** – Use CMS/PKCS#7 with SHA‑256 (avoid SHA‑1). |
| 132 | +- **No revocation info** – Ensure OCSP/CRL endpoints are reachable by the validator or embed revocation data if supported. |
| 133 | + |
| 134 | +## See also |
| 135 | +- [Add Digital Signature](/document-processing/pdf/pdf-viewer/react/forms/signature/add-digital-signature) |
| 136 | +- [Add Handwritten or Electronic Signature](/document-processing/pdf/pdf-viewer/react/forms/signature/add-electronic-signature) |
| 137 | +- [Customize Signature Appearance](./customize-signature-appearance) |
0 commit comments