Validate XFDF on frontend / backend side

Technical Support
1

Which product are you using?

PDF.js Express Plus 8.7.4

Detailed description of issue
I don’t quite understand how to work with PDF forms in XFDF format. Let’s assume I have a PDF file and a PDF form (stored as a serialized XFDF string) with one text field and one signature field (both are required). I want to present the PDF with the form to the user, and he should be able to fill out these fields only (without introducing any unexpected changes); also I would like to validate that all values are correct (all required values are present; text length limit is not exceeded etc.). Therefore I need to:

  1. For the good UI, when user submits a form I need to validate values on the frontend side and show user-friendly errors if there are any
  2. For the security, I need to validate values on backend side
  3. When everything is validated, I want to merge XFDF form with values into the original PDF (I would like to do it using PDF.js Express /merge REST API endpoint)

However, I don’t understand how to correctly implement p.1 and p.2. Should I sent updated serialized XFDF via API? How can I validate it on backend side then? How to validate it on client side? Your help would be very useful.

I also thought about an option to sent form values as JSON via REST / whatever else API. In this case it’s clear how to validate values on backend side, but it’s 1) not clear how to work with a signature field in this case 2) not clear how to integrate values into XFDF on backend side (AFAIK you don’t provide any means for doing it on Node.js backend side) 3) still obsure how to validate on client side on PDF level (in order to have good UX, e.g. highlight errored fields somehow). But from a security point of view I incline to this option.

2

Hi there,

We are currently looking at this and will provide an update as soon as possible.

Best Regards,
Darian

3

Hi there,

  1. For the good UI, when user submits a form I need to validate values on the frontend side and show user-friendly errors if there are any

Although this is not PDF.js Express, we do have a WebViewer forum question you may find helpful for validating signature fields.

You can also use embeddedJS to set validations: PDFJS Express WebViewer Class: EmbeddedJS

// For example, Adobe Acrobat defines a global ADBE object that some older PDFs might check. 
// So you could define the value to prevent certain popups from appearing.
Annotations.Forms.EmbeddedJS.update(scope => { 
  // Scope represents the window scope that embedded javascript runs within
  // Define the ADBE namespace so that older PDFs will find it
  scope.ADBE = {};
});

You could also use a fieldChanged listener and then put your own logic for an error message: PDF.js Express Fillable Forms | Documentation

As for other error message options, you can use the window alert method to display the errors. We also have a way to create a custom modal: PDFJS Express WebViewer Namespace: UI

  1. For the security, I need to validate values on backend side

I think the approach involving sending the form values as a JSON object from the frontend to your backend is a good option. If you are only interested in the form values and not the entire XFDF structure, you can validate the JSON object using validation libraries such as joi or express-validator. express-joi-validation - npm
express-validator - npm

For signature fields, are you using image-based signatures? You could try sending the image data as a base64-encoded string. Then, on the backend, you could decode this base64 image and apply any validations.

Hope this helps.

1 Like
4

@darian.chen Thank you for clarification!

1 Like