How to Redact Sensitive Information Using React
By Josh Gozner | 2023 Jun 27
3 min
Tags
redaction
pdf redaction
javascript
react
webviewer
Welcome to the wonderful world of redaction! If you're looking to protect sensitive information within your documents or require compliance with privacy regulations, redaction is an absolute must.
In this blog, we'll delve into the Apryse WebViewer SDK and focus on using its redaction tool using React. We’ll also guide you on creating your own regex search pattern for redaction and the various benefits provided by redaction. Let's get started!
What Are the Benefits of Redaction?
Redaction, in its simplest form, is the process of obscuring or removing sensitive information from a PDF or other pieces of content.
This process is essential for a variety of reasons:
Protection of Sensitive Information: In this era of digital transformation, businesses handle a myriad of sensitive information daily, ranging from employee records, customer data, and financial details to intellectual property. Redaction allows organizations to secure this information, ensuring only authorized individuals can access it. This not only helps to maintain privacy but also supports the secure sharing and distribution of documents.
Regulatory Compliance: Several industries like healthcare, finance, and law are regulated by stringent laws that mandate the protection of specific data types. For instance, HIPAA in the US requires the protection of patient health information, while GDPR in the EU regulates personal data usage. Redaction ensures that your business stays compliant with these laws, avoiding hefty fines and penalties.
Minimizing Data Breach Impact: In the unfortunate event of a data breach, having redacted sensitive data can limit potential damage. The exposed data will be of little use to malicious parties if all sensitive details have been thoroughly redacted.
Building Trust with Customers: Customers are increasingly conscious about their data privacy. Businesses that use redaction to protect their clients' data send a powerful message about their commitment to privacy, which in turn, strengthens the trust and relationship with their customers.
Redaction is a fundamental and indispensable tool in document management processes, especially in the face of increasing data privacy concerns and stringent regulations globally.
Using WebViewer’s Redaction Tool
The WebViewer SDK is a WebAssembly/Asm.js port of the Apryse PDF SDK, meaning it can deliver almost all of the native SDK functionality, such as document redaction, in a Web App. Users can securely view and redact documents without requiring any server connections or other external dependencies, meaning all data remains client-side. This is especially important when dealing with sensitive or private information.
The redaction tool in WebViewer is a powerful feature that allows you to protect sensitive information in your documents effectively.
Using the built-in redaction tool:
1. Set up WebViewer: You can follow our guide to quickly get set up.
2. Open the document: Once your document is loaded in WebViewer, navigate to the section that contains the information you need to redact.
3. Select the Redaction Tool: On the toolbar, select the Redaction tool. This will activate the redaction mode.
4. Redact: Click and drag to create a redaction rectangle over the text or image you want to redact. Once you release the mouse, the redaction annotation will be added.
5. Apply Redactions: After all redactions have been placed, you can apply them permanently by selecting "Redact All" from the options menu. This will irreversibly apply the redactions, ensuring the redacted content can't be recovered.
The built-in redaction tool covers the simplest redaction workflows, but you can extend it and support even more complex scenarios. Let’s create our own custom regex search pattern and include it in the default UI of WebViewer.
Adding a Custom Search Pattern
By making use of the pure client-side redaction functionality built into WebViewer, developers can efficiently automate the entire redaction process. For this example, we will automate the redaction of all Canadian Passport numbers. The regex needed to match the passport numbers is \b[\w]{2}[\d]{6}\b. Now, you just need to register the search pattern using the following code:
import React, { useRef, useEffect } from 'react';
import WebViewer from '@pdftron/webviewer';
import './App.css';
const App = () => {
useEffect(() => {
WebViewer(...)
.then((instance) => {
instance.UI.addRedactionSearchPattern(
{
label: 'Canadian Passport Numbers',
type: 'passport',
icon: '<svg fill="#000000" height="15px" width="15px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 430 430" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <g> <g> <polygon points="281,0 126.263,60 281,60 "></polygon> <path d="M85,76v354h260V76H85z M310.5,152c0,4.418-3.582,8-8,8h-71c-4.418,0-8-3.582-8-8c0-4.418,3.582-8,8-8h71 C306.918,144,310.5,147.582,310.5,152z M260.151,281H223v-82.495C242.647,205.947,258.321,240.126,260.151,281z M153.5,113h123 c4.418,0,8,3.582,8,8c0,4.418-3.582,8-8,8h-123c-4.419,0-8-3.582-8-8C145.5,116.582,149.081,113,153.5,113z M115.319,297h38.509 c1.536,38.644,14.136,71.068,32.413,87.796C147.483,373.178,118.618,338.693,115.319,297z M115.318,281 c1.949-24.628,12.813-46.743,29.382-63.111c11.47-11.35,25.678-19.932,41.542-24.687c-18.278,16.728-30.878,49.152-32.415,87.798 H115.318z M207,379.495c-19.647-7.442-35.32-41.621-37.151-82.495H207V379.495z M207,281h-37.151 c1.831-40.874,17.504-75.053,37.151-82.495V281z M199.5,160h-72c-4.419,0-8-3.582-8-8c0-4.418,3.581-8,8-8h72 c4.418,0,8,3.582,8,8C207.5,156.418,203.918,160,199.5,160z M223,379.495V297h37.152 C258.321,337.874,242.647,372.053,223,379.495z M243.76,384.796c18.277-16.728,30.877-49.152,32.413-87.796h38.508 C311.382,338.693,282.517,373.178,243.76,384.796z M276.173,281c-1.536-38.646-14.137-71.07-32.415-87.798 c15.864,4.755,30.072,13.337,41.542,24.687c16.569,16.368,27.433,38.484,29.382,63.111H276.173z"></path> </g> </g> </g> </g></svg>',
regex: /\b[\w]{2}[\d]{6}\b/
}
);
})
}, []);
return (
<div className="App" >
<div className="header">React sample</div>
<div className="webviewer" ref={viewer}></div>
</div>
);
};
export default App; 
The new search pattern is now available under the redaction dropdown list! This will greatly simplify the redaction process for your users.
Pre-Searching Text for Redaction Using React
Pre-searching text for redaction can save time and ensure that you don't miss any critical information that needs to be redacted. In this scenario, you’ll need to use the ‘documentLoaded’ event and then import the following code:
documentViewer.addEventListener("documentLoaded", () => {
const searchText = 'PDF';
const searchMode = Search.Mode.HIGHLIGHT;
const searchOptions = {
fullSearch: true,
// The callback function that is called when the search returns a result.
onResult: async (result) => {
if (result.resultCode === Search.ResultCode.FOUND) {
const annotation = new Annotations.RedactionAnnotation({
Quads: [result.quads[0].getPoints()],
PageNumber: result.page_num,
});
annotationManager.addAnnotation(annotation);
annotationManager.redrawAnnotation(annotation);
}
},
};
documentViewer.textSearchInit(searchText, searchMode, searchOptions);
});
And there you have it! This script will find all occurrences of PDF in your document and place a redaction annotation over them.
Demo and Documentation
You can try out redaction using the Apryse WebViewer SDKwith our interactive demo or get started easily through our documentation. You can also chat with us on Discord if you run into any issues.
Check out our Ultimate Redaction Guide for more information.
Tags
redaction
pdf redaction
javascript
react
webviewer
Josh Gozner
Solutions Engineer
Share this post
