Calvince Moth for Syncfusion, Inc.

Posted on Jan 8 • Originally published at syncfusion.com on Jan 7

PDF Redaction in JavaScript: A Practical Guide to Protecting Sensitive Data

#pdf #documentsecurity #javascript #pdfviewer

TL;DR: PDF redaction in JavaScript enables developers to securely remove sensitive text and images from PDFs directly in web applications. This guide covers client-side implementation, compliance considerations, and best practices for building secure document workflows.

Have you ever shared a PDF only to realize later that sensitive details, like IDs, financial data, or confidential notes, were still accessible?

With most documents now digitized, protecting sensitive information isn’t optional; it’s critical for compliance and security.

Simply covering text with shapes or colors doesn’t work. Hidden layers can still be extracted, leading to potential privacy breaches and penalties under regulations such as GDPR and HIPAA. The real solution is PDF redaction in JavaScript, a process that permanently removes sensitive content from your documents.

Using a Syncfusion^® JavaScript PDF Viewer, you can securely redact text and images in just a few clicks, ensuring your PDFs are safe to share.

In this blog, you’ll discover what PDF redaction is, why it’s essential for compliance and security, and how to enable and apply redaction in your web apps using Syncfusion’s JavaScript PDF Viewer.

What is PDF redaction?

PDF redaction permanently removes sensitive information from a document, making it unrecoverable and inaccessible. Unlike visual masking, where text is covered with a black box, the underlying data often remains in the file and can be extracted. True redaction completely deletes the content, ensuring both privacy and compliance.

Why is this important?

Prevents unauthorized access to confidential data.
Meets strict regulations like GDPR and HIPAA.
Protects industries such as healthcare, finance, legal, and government.

Sensitive data often includes:

Personally identifiable information (PII)
Financial details
Classified or confidential notes

By applying permanent redaction, organizations safeguard digital documents and maintain compliance with global data protection standards.

Step-by-step guide to enable PDF redaction in JavaScript PDF Viewer

Integrating Syncfusion’s JavaScript PDF Viewer into your project is quick and straightforward. Follow these steps to start removing sensitive data from PDFs right away:

Step 1: Create a project folder

Begin by creating a dedicated folder for your application, such as my-app. This folder will contain all your project files, including the HTML page that hosts the Syncfusion JavaScript components.

Step 2: Use the global script and style from CDN

Next, include the required Syncfusion JavaScript component scripts and CSS files. These resources are hosted on Syncfusion’s CDN, which simplifies integration by eliminating the need for package installation. Add the following links to your index.html file inside the <head> section as shown in the code example below.

<head>
    <title>Essential JS 2 PDF Viewer</title>
    <!-- Common Material 3 Theme -->
    <link href="https://cdn.syncfusion.com/ej2/31.2.2/material3.css" rel="stylesheet">
    <!-- Essential JS 2 Script -->
    <script src="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2.min.js"></script>
    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
</head>

Step 3: Create an HTML file and enable redaction tools

After setting up the scripts, add a <div> element to host the PDF Viewer, Then, enable the redaction option in the toolbar settings, and initialize the component using JavaScript.

Refer to the code example below.

<body>
    <div id="PdfViewer" style="height:700px;width:100%;"></div>
    <script>
        // Initialize PDF Viewer
        var pdfviewer = new ej.pdfviewer.PdfViewer({
            documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
            resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib'
        });

        // Inject required modules
        ej.pdfviewer.PdfViewer.Inject(
            ej.pdfviewer.TextSelection,
            ej.pdfviewer.TextSearch,
            ej.pdfviewer.Print,
            ej.pdfviewer.Navigation,
            ej.pdfviewer.Toolbar,
            ej.pdfviewer.Magnification,
            ej.pdfviewer.Annotation,
            ej.pdfviewer.FormDesigner,
            ej.pdfviewer.FormFields,
            ej.pdfviewer.PageOrganizer
        );
        pdfviewer.toolbarSettings.toolbarItems = [
            'OpenOption',
            'UndoRedoTool',
            'PageNavigationTool',
            'MagnificationTool',
            'PanTool',
            'SelectionTool',
            'CommentTool',
            'SubmitForm',
            'AnnotationEditTool',
            'RedactionEditTool',
            'FormDesignerEditTool',
            'SearchOption',
            'PrintOption',
            'DownloadOption'
        ];
        // Render PDF Viewer
        pdfviewer.appendTo('#PdfViewer');
    </script>
</body>

Step 4: Launch the page in the browser

Finally, open the index.html file in any modern web browser such as Chrome, Edge, or Firefox. The Syncfusion JavaScript PDF Viewer will load instantly, displaying the sample PDF document with as illustrated below.

JavaScript PDF Viewer with redaction enabled

Note: For a detailed guide, refer to our official Getting Started documentation.

Core features of PDF redaction in JavaScript PDF Viewer

Syncfusion’s JavaScript PDF Viewer offers a comprehensive set of tools to redact sensitive content while ensuring secure compliance. Here’s what you can do :

Mark sensitive content for redaction: Select specific text or regions to redact.
Redact entire pages or page ranges: Remove full pages when necessary.
Customize redaction appearance: Adjust colors, opacity, and overlay text for clarity.
Apply redaction permanently: Ensure sensitive data is completely removed and unrecoverable.
Review and remove redaction marks: Verify and edit before applying changes.

Now, let’s explore into each feature in detail and learn how to implement them in your web application.

Mark sensitive content for redaction

The first step in PDF redaction is identifying and marking the content you want to remove. Syncfusion’s JavaScript PDF Viewer makes this easy with two flexible options:

Shape-based redaction: Draw a rectangle over large areas, such as images or blocks of text, to mark them for removal.
Text-based redaction: Select specific text for precise redaction. The viewer automatically creates redaction boxes line by line for accurate coverage.

These options give you complete control over what to redact before applying permanent changes.

Shape-based redaction

Click Mark for Redaction in the toolbar and draw a rectangle over the section you want to remove. This method works best for large areas, such as images or blocks of sensitive text. The highlighted region allows you to review and confirm before applying permanent changes.

Shape based redaction

Text-based redaction

For text-specific redaction, simply select the text in the PDF. The PDF Viewer automatically creates redaction boxes line by line based on the text’s position and size. This ensures precise coverage without manual adjustments.

Text markup redaction

Programmatic redaction using JavaScript API

Want to automate the process? Syncfusion’s JavaScript PDF Viewer provides powerful APIs that enable developers to insert redaction annotations programmatically. You can define exact areas or text to redact and apply changes in bulk—perfect for batch processing and workflow automation.

//Insert Redaction annotation in the document
viewer.annotation.addAnnotation("Redaction", {
    bound: { x: 200, y: 480, width: 150, height: 75 },
    pageNumber: 1,
});

Redact entire pages or page range

Sometimes, you need to remove entire pages instead of individual text or images. Syncfusion’s JavaScript PDF Viewer makes this simple with flexible options in the redaction dialog:

1. Redact current page

If a page contains sensitive content, such as full-page images or confidential tables, select “ Current Page ” in the dialog. The viewer instantly marks that page for redaction.

2. Redact odd or even pages

Working with reports or booklets? Sensitive content often appears on odd or even pages. Choose ‘Odd Pages Only’ or ‘Even Pages Only’ to quickly mark multiple pages without manual effort.

3. Redact specific pages

Do you need to remove scattered pages? Enter a page number or ranges in the Page Range field (e.g., 1, 2, 5-7). This option is perfect for documents with sensitive data spread across multiple sections.

Selecting pages for redaction

4. Redact pages programmatically

For batch processing or large-scale workflows, developers can mark entire pages using Syncfusion’s JavaScript API:

//Mark Redaction to entire pages
viewer.annotation.addPageRedactions([1,3,5,7]);

Customize redaction appearance and overlay text

Want your redaction marks to look clear and professional? The Redaction Properties Panel gives you full control over annotation appearance. You can adjust colors, opacity, and text styles to make redactions visually consistent and user-friendly. Adding overlay text, such as “ Confidential ” or “ Protected Data,” helps users understand why the content was removed.

General properties

Overlay TextEnable: or disable overlay text and set custom text.
Font family: Select fonts such as Helvetica, Times New Roman, etc.
Font size: Adjust text size for better visibility.
Font color: Pick a color for overlay text.
Text alignment: Align text ( Left, Center, Right ).
Repeat overlay text: Repeat text across the redaction area.

Appearance properties

Outline color: Set the border color of the redaction box.
Fill color: Choose the background color for the redaction box.
Fill opacity: Control transparency of the fill color.

Redaction panel

Customize redaction programmatically

Developers can also set these properties through Syncfusion’s JavaScript API for automated workflows. This is useful when you need consistent styling across multiple digital documents.

//Apply annotation with customized properties
viewer.annotation.addAnnotation("Redaction", {
    bound: { x: 200, y: 480,width: 150, height: 75 },
    pageNumber: 1,
    markerOpacity: 0.5,
    markerFillColor: '#0000FF',
    markerBorderColor: 'white',
    fillColor: 'red',
    overlayText: 'text',
    fontColor: 'yellow',
    isRepeat: true,
    fontFamily: 'Times New Roman',
    fontSize: 8,
    textAlignment: 'Left',
    beforeRedactionsApplied: false
});

Apply redaction permanently

Once you’ve reviewed all redaction marks, click Redact to apply changes permanently. This completely removes underlying text or images, making them unrecoverable. Permanent redaction ensures sensitive data is deleted from your PDFs, reducing the risk of unauthorized access.

Apply Permanent redaction

Apply redaction programmatically

You can apply all marked redactions in one step using Syncfusion PDF Viewer’s redact() method. This is ideal for automating tasks and efficiently processing multiple documents.

//Apply reduction
viewer.annotation.redact();

Review and remove redaction marks

Before finalizing, review all annotations. If any mark is unnecessary, delete it using the Delete Annotation option.

Review and remove redaction marks in JavaScript PDF Viewer

Delete via API

You can remove redaction annotations using the Syncfusion JavaScript API. This is useful when you need to clean up or edit annotations before applying permanent redaction.

//Delete specific annotation 
viewer.annotationModule.deleteAnnotationById(
    viewer.annotationCollection[0].annotationId
);

Note: To learn more about PDF redaction, check the official documentation.

FAQs

Q1: Is redaction permanent in PDFs?

Yes, redacted text or images are entirely removed from the PDF, and cannot be recovered.

Q2: Can redaction be done using APIs?

Yes, Syncfusion’s JavaScript APIs let you programmatically apply redaction with just a few lines of code.

Q3: Is redaction supported by password-protected PDFs?

Yes, once the correct password is provided, you can apply redaction to protected files.

Q4: Can I customize the appearance of redaction marks?

Yes, you can change colors, opacity, and add overlay text using the Redaction Panel or APIs.

Q5: Does redaction remove hidden metadata from PDFs?

Yes, applying permanent redaction ensures that both visible content and hidden metadata are removed.

Q6: Is redaction compliant with GDPR and HIPAA standards?

A: Yes. Permanent removal of sensitive data helps meet compliance requirements for GDPR, HIPAA, and other data protection regulations.

Conclusion

Thank you for reading! PDF redaction isn’t just another feature; it’s a critical step in protecting sensitive information and ensuring compliance. In this guide, we explored how Syncfusion’s JavaScript PDF Viewer simplifies the process with intuitive UI tools and powerful APIs for automation.

With these capabilities, you can:

Permanently remove confidential data from PDFs.
Automate redaction workflows for large-scale document processing.
Customize redaction styles to match your application’s design.

By leveraging these tools, you can build secure, enterprise-grade PDF solutions that deliver a professional user experience while safeguarding data. Explore the live demo and explore all the features today!

If you’re a Syncfusion user, you can download the setup from the license and downloads page. Otherwise, you can download a free 30-day trial.

You can also contact us through our support forum, support portal, or feedback Portal for queries. We are always happy to assist you!

Related Blogs

This article was originally published at Syncfusion.com

DEV Community