HOW TO: Encrypt and Decrypt requests using the HTML5 Document Viewer

#1 Posted : Monday, February 12, 2018 11:56:40 AM(UTC)

Duncan Quirk

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.html

Code:


   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:

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.


	Try the latest version of LEADTOOLS for free for 60 days by downloading the evaluation: https://www.leadtools.com/downloads Wanna join the discussion? Login to your LEADTOOLS Support account or Register a new forum account.

Notification

HOW TO: Encrypt and Decrypt requests using the HTML5 Document Viewer