Sign a Document in a Web Browser

To sign a document that contains the data and visualisation in a web browser, follow these steps:

Create a web page that performs the signing process.
Create a server side code that verifies the signature.

The web page should retrieve the data that should be signed from the server, display the visualisation to the user, sign the document and submit the signed document back to the server.

In this demo the data that should be signed is stored on the server at two different URLs:

invoice.xml contains the XML representation of the data,
vis.html contains the same data in a human-readable format (HTML).

You can use the CreaDoc data object to retrieve the data from a web server:

<HTML>
    <BODY>

        <!-- The data object that holds the XML data -->
        <OBJECT id="dataObj" data="invoice.xml" classid="clsid:F4BCA060-D74F-4C5B-835A-E192BFF4FF01" VIEWASTEXT> 
            Failed to initialize ActiveX component
        </OBJECT>
        <!-- The data object that holds the visualisation -->
        <OBJECT id="dataVis" data="vis.html" classid="clsid:F4BCA060-D74F-4C5B-835A-E192BFF4FF01" VIEWASTEXT>
            Failed to initialize ActiveX component
        </OBJECT>

The visualisation is displayed to the user inside an <IFRAME> HTML element:

        <P>Please review the Invoice</P>
        <!---- Display the visualisation to the client --->
        <IFRAME width="600" height="650" src="vis.html"></IFRAME>

The user can click the Sign button to sign the document. A hidden field is used for submitting the signed document to the server:

        
        <FORM action="VerifySignature.asp" method="post">
            <INPUT type="submit" value="Sign" onclick="DoSign();">
            <!-- Hidden field, used for submitting the signature to the server --> 
            <INPUT type="hidden" name="edSignature">
        </FORM>

To actually sign the data and the visualisation and send both to the server, follow these steps:

Create a new CreaDoc object and provide the evidence of trust.
Set the Data property to a new instance of the XmlData object.
Specify the data that needs to be signed.
Add the visualisation.
Call the CreateSignature method.
Save the signed document into the hidden field that will be submitted to the server. The Data class is used to base64 encode the document.

<SCRIPT language="javascript">
function DoSign()
{
    // Create a CreaDoc object
    var CreaDoc=new ActiveXObject("CreaSignClientIe.CreaDoc");    
    CreaDoc.SetSafetyOptions("all", "2Unldos1bhKgBDWu7u/j9FjPlXa/MBU4043O7oHqSDsFWj3SAR8tUMkpKMYG18P2FOevt2kTA5fZDpNvWIC/KSwUYp1RFsF0ojHcgtc13BgsMme3rmhkL2VYflVwN/CV5b2yDxRz7+bF+I7DeJIjXT9OvqFNg5CzZ0AeKV9YfCQ=");
    
    //  Add the data that was loaded from the server
    CreaDoc.Data=new ActiveXObject("CreaSignClientIe.XmlData");
    CreaDoc.Data.SetEmbeddedData(dataObj.object,"","text/xml");
    
    // Add the base64 encoded visualisation that was loaded from the server
    // The same visualisation has been shown to the user  
                                                                                                                                                                                                                                                                CreaDoc.Visualisations.Add("","text/html","base64","",dataVis.object ,"");
  
    // Create the signature
    var certName="CERT_FIND_SUBJECT_STR=CREA_TESTUSER_1";
    CreaDoc.CreateSignature(certName,0);
    

    // Base64 encode the signed document, store it into a hidden field and send it to the server    
    var d=new ActiveXObject("CreaSignClientIE.Data");
    CreaDoc.Xmlnode.ownerDocument.save(d);  
    document.all("edSignature").value=d.DataAsBase64; 

    document.forms(0).submit();
}
</SCRIPT>
</BODY>
</HTML>

Send comments on this topic.