LEADTOOLS Support
Document
Document SDK Examples
HOW TO: Encrypt and Decrypt requests using the HTML5 Document Viewer
#1
Posted
:
Monday, February 12, 2018 11:56:40 AM(UTC)
Groups: Registered, Tech Support, Administrators
Posts: 70
Was thanked: 4 time(s) in 4 post(s)
Protecting request data in-transit is important in preserving the integrity of the application's data. Encryption/Decryption can be easily integrated into the LEADTOOLS HTML5 Document Viewer by manipulating AJAX properties. The code snippets in this tutorial will use v20 of the LEADTOOLS SDK. All of the code snippets found in this tutorial can be added quickly to the Tutorial 1 project in the Document Viewer found in the following installation path within the SDK: <install directory>:\LEADTOOLS 20\Examples\JS\Documents\DocumentViewer\Clients\Tutorials\Tutorial1\site\
As far as encrypting requests from the LEADTOOLS JS libraries that are sent to the DocumentsService, you will need to hook into the prepareAjax event of the DocumentFactory. This will allow you to intercept the request before it is sent from our JS libraries, allowing you to encrypt the request. Here is our documentation for this event:
https://www.leadtools.co...factory-prepareajax.htmlCode:
function BeforeSendingRequest(request) {
console.log("Requests being made to the service can be encrypted here.");
};
var ajaxHandler = function (sender, request) {
BeforeSendingRequest(request);
};
lt.Document.DocumentFactory.prepareAjax.add(ajaxHandler);
The trickier part is decrypting requests that are sent from the service back to the LEADTOOLS javascript libraries. The JS Libraries expects the raw request data to be formatted a certain way -- if it is not, then an error will be thrown because the data will be in a format that is not recognized. So, if a request has encrypted data, the JS libraries will not be able to parse it. Therefore, we will need to intercept the request before it is processed by the JS libraries. In the prepareAjax event, we have access to the underlying AJAX settings that are used when a request is sent and received from the DocumentsService. To intercept the response, we need to add an event handler for the dataFilter AJAX parameter. A dataFilter event will be fired before the .success/.done/.fail ajax callbacks, so we will be able to grab the request data before it is processed by the LEADTOOLS JS libraries. In this event, the raw data/parameters can be run through whatever decryption algorithm is being used. After the request is decrypted, the request will need to be returned back into the raw format that the javascript libraries expects. The decryption method will look something like this:
Code:
function Decrypt(response, type) {
//Decryption Logic can be added here:
//Parse the request back as an object. The properties of the file can be modified here if you want.
var x = JSON.parse(response);
console.log("User Data returned by the service:");
console.log(x);
x.userData = "I changed the userData :)";
console.log("Passing the request to our JS libraries...");
//Serialize the object back into a raw format, and return it.
var y = JSON.stringify(x);
return y;
};
var ajaxHandler = function (sender, request) {
BeforeSendingRequest();
request.settings.dataFilter = Decrypt;
};
The resulting console output for this series of events will look like this:
![Console Output Console Output](http://i.imgur.com/41dPuBf.png)
The full tutorial code will look like this:
Code:
var _this = this;
window.onload = function () {
// Create the options object for the DocumentViewer
var createOptions = new lt.Document.Viewer.DocumentViewerCreateOptions();
// We will choose to use Elements Mode for this example, but you can disable it
// Elements Mode can be styled with CSS - see the HTML for information
createOptions.viewCreateOptions.useElements = true;
createOptions.thumbnailsCreateOptions.useElements = true;
// Set thumbnailsContainer to #thumbnails
createOptions.thumbnailsContainer = document.getElementById("thumbnails");
// Set viewContainer to #documentViewer
createOptions.viewContainer = document.getElementById("documentViewer");
// Create the document viewer
_this.documentViewer = lt.Document.Viewer.DocumentViewerFactory.createDocumentViewer(createOptions);
// Set interactive mode to Pan / Zoom
_this.documentViewer.commands.run(lt.Document.Viewer.DocumentViewerCommands.interactivePanZoom);
// We prefer SVG viewing over Image viewing for this example
_this.documentViewer.view.preferredItemType = lt.Document.Viewer.DocumentViewerItemType.svg;
// To use Image: lt.Document.Viewer.DocumentViewerItemType.image;
// Change our thumbnails to be centered horizontally in the provided container
_this.documentViewer.thumbnails.imageViewer.viewHorizontalAlignment = lt.Controls.ControlAlignment.center;
// Before we call the service, we need to explain where it is ("localhost:20000/api", for example):
lt.Document.DocumentFactory.serviceHost = "http://localhost:20000"; // or wherever your host is
lt.Document.DocumentFactory.servicePath = ""; // the path to the root of the service, which is nothing for this example
lt.Document.DocumentFactory.serviceApiPath = "api"; // Routing occurs at "/api", unless you change the routing in the DocumentsService
// Load a PDF document
var url = "https://demo.leadtools.com/images/pdf/leadtools.pdf";
// Call the "LoadFromUri" and pass success and failure callbacks to the promise
function BeforeSendingRequest(request) {
console.log("Requests being made to the service can be encrypted here.");
};
function Decrypt(response, type) {
//Decryption Logic can be added here:
//Parse the request back as an object. The properties of the file can be modified here if you want.
var x = JSON.parse(response);
console.log("User Data returned by the service:");
console.log(x);
x.userData = "I changed the userData :)";
console.log("Passing the request to our JS libraries...");
//Serialize the object back into a raw format, and return it.
var y = JSON.stringify(x);
return y;
};
var ajaxHandler = function (sender, request) {
BeforeSendingRequest(request);
request.settings.dataFilter = Decrypt;
};
lt.Document.DocumentFactory.prepareAjax.add(ajaxHandler);
lt.Document.DocumentFactory.loadFromUri(url, null)
.done(function (document, data) {
// Set the document in the viewer
console.log("Request received by our libraries");
console.log("User data received: " + data);
_this.documentViewer.setDocument(document);
})
.fail(function (jqXHR, statusText, errorThrown) {
// Get more information from LEADTOOLS
var serviceError = lt.Document.ServiceError.parseError(jqXHR, statusText, errorThrown);
lt.LTHelper.log(serviceError);
// Show an alert about what the issue is
var lines = [];
lines.push("Document Viewer Error:");
lines.push(serviceError.message);
lines.push(serviceError.detail);
lines.push("See console for details.");
alert(lines.join("\n"));
});
};
Duncan Quirk
Developer Support Engineer
LEAD Technologies, Inc.
![LEAD Logo LEAD Logo](https://www.leadtools.com/images/new-site-images/leadtools-logo-header.png)
LEADTOOLS Support
Document
Document SDK Examples
HOW TO: Encrypt and Decrypt requests using the HTML5 Document Viewer
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.