OverviewEmbed as an IFrameEmbed as WebCompoentUse several documentsConfigure viewerShow signature if presentNotify if not signedDisable Sign, Search, Download AbilityProvide Useful IntermediatesProvide Trusted Root CertificatesInteracting with a WebComponentHints and limitationsCORS policyDocument name resolution

Overview

Hancock offers all you need to get the strongest available forms of digital signatures without compromising on usability. However, viewing the shared documents can be inconvenient for your users. With Verify by Hancock your users will not need to install Adobe Acrobat to verify that the viewed documents are authentic and have not been modified.

There are a few ways to use Verify by Hancock.

Embed as IFrame

You can simply use an iframe with a link to the document. Just paste it into your site. 

<iframe
 	allowfullscreen
 	src="https://verify.ink/viewer?url=${YOUR_DOCUMENT_URL}"
 ></iframe>

Where YOUR_DOCUMENT_URL is just a link, for example: https://peculiarventures.github.io/ExamplePDFs/signed/BILLS-106s761enr.pdf. You will get a frame like this:

verify-iframe

Embed as WebComponent

Web component is a set of web platform APIs that allow you to use custom, reusable, encapsulated HTML tags in web pages and web apps. It is built on the basis of the Web Component standards; therefore, it will work across modern browsers and with any JavaScript library or framework that works with HTML. You can read more about web components here.

Firstly, you need to include a webcomponent script. You can do it in several ways:

1. As a script tag at the end of your HTML.

<script
 	type="module"
 	src="https://verify.ink/webcomponent/index.js"
 ></script>

2. As an imported ES module in a script tag or ES module file.

<script type="module">
 	import 'https://verify.ink/webcomponent/index.js';
 </script>

After that you could simply use HTML tag verify-viewer, like this:

<verify-viewer
 	url="${YOUR_DOCUMENT_URL}"
 ></verify-viewer>

Use several documents

Sometimes it is necessary to use more than one document at the same time and Verify provides the opportunity to do this.

several-documents-menu-close several-documents-menu-open You can specify more than one document for the viewer. All you need to do is to write URLs separated with commas:

<iframe
 	allowfullscreen
 	src="https://verify.ink/viewer?
 			 url=${YOUR_DOCUMENT_URL},${YOUR_SECOND_DOCUMENT_URL},${YOUR_THIRD_DOCUMENT_URL}"
 ></iframe>

<verify-viewer
 	url="${YOUR_DOCUMENT_URL},
 			 ${YOUR_SECOND_DOCUMENT_URL},
 			 ${YOUR_THIRD_DOCUMENT_URL}"
 ></verify-viewer>

Configure viewer

You may have the need to modify a standard behavior of Verify. There are a few options you can configure.

All features are enabled by default:

You can disable the some settings in the following ways:

<verify-viewer
 	url="${YOUR_DOCUMENT_URL}"
 	show-signature-if-present="false"
 	notify-if-not-signed="false"
 ></verify-viewer>

Or for an iframe

<iframe
 	allowfullscreen
 	src="https://verify.ink/viewer?url=${YOUR_DOCUMENT_URL}
 			 &show-signature-if-present=false
 			 &notify-if-not-signed=false"
 ></iframe>

If you want to configure the viewer manually, specify the attributes like blacklist in the web component:

<verify-viewer
 	url="${YOUR_DOCUMENT_URL}"
 	search="true"
 ></verify-viewer>

Or you can use the comma-separated values of the query settings in Iframe. Please note that Iframe uses the camelCase notation.

<iframe
 	allowfullscreen
 	src="https://verify.ink/viewer?
 			 url=${YOUR_DOCUMENT_URL}
 			 &search=true"
 ></iframe>

Possible options are described below.

Show signature if present

Enabling this option will show a bar with signatures if the document has been signed. There will be a list of document’s signatures, timestamps and seals. You can see the details by clicking them. Set show-signature-if-present attribute to webcomponent or settings query.

show-signature-if-present-several show-signature-if-present-single

Notify if not signed

Enabling this option will show a dialog window with a warning that the document is not signed. User will have an opportunity either to close the window or to sign the document using Hancock if this feature is not disabled by the sign option. Set notify-if-not-signed attribute to webcomponent or settings query.

notify-if-not-signed

Disable Sign, Search, Download Ability

Specifying the following options

  • sign="false" - hides "Sign" button for unsigned documents. disable-sign
  • search="false" - disables the ability to search in document's content. disable-search
  • download="false" - disables the ability to download a viewable document. disable-download

Provide Intermediate Certificates for correct signature verification

You could specify intermediate-certificates option with comma-separated Base64 BER-encoded certificates

<verify-viewer
 	url="${YOUR_DOCUMENT_URL}"
 	intermediate-certificates="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"
 ></verify-viewer>

Provide Root Certificates to trust during signature verification

You could specify root-certificates option with comma-separated Base64 BER-encoded certificates

<verify-viewer
 	url="${YOUR_DOCUMENT_URL}"
 	root-certificates="MIIFYDCCA0igAwIBAgIUeFhfLq0sGUvjNwc1NBMotZbUZZMwDQYJKoZIhvcNAQELBQAwSDELMAkGA1UEBhMCQk0xGTAXBgNVBAoTEFF1b1ZhZGlzIExpbWl0ZWQxHjAcBgNVBAMTFVF1b1ZhZGlzIFJvb3QgQ0EgMSBHMzAeFw0xMjAxMTIxNzI3NDRaFw00MjAxMTIxNzI3NDRaMEgxCzAJBgNVBAYTAkJNMRkwFwYDVQQKExBRdW9WYWRpcyBMaW1pdGVkMR4wHAYDVQQDExVRdW9WYWRpcyBSb290IENBIDEgRzMwggIiMA0GCSqGSIb3DQEBAQUAA4ICDwAwggIKAoICAQCgvlAQjunybEC0BJyFuTHK3C3kEakEPBtVwedYMB0ktMPvhd6MLOHBPd+C5k+tR4ds7FtJwUrVu4/sh6x/gpqG7D0DmVIB0jWerNrwU8lmPNSsAgHaJNM7qAJGr6Qc4/hzWHa39g6QDbXwz8z6+cZM5cOGMAqNF34168Xfuw6cwI2H44g4hWf6Pser4BOcBRiYz5P1sZK0/CPTz9XEJ0ngnjybCKOLXSoh4Pw5qlPafX7PGglTvF0FBM+hSo+LdoINofjSxxR3W5A2B4GbPgb6Ul5jxaYA/qXpUhtStZI5cgMJYr2wYBZupt0lwgNm3fME0UDiTouG9G/lg6AnhF4EwfWQvTA9xO+oabw4m6SkltFi2mnAAZauy8RRNOoMqv8hjlmPSlzkYZqn0ukqeI1RPToV7qJZjqlc3sX5kCLliEVx3ZGZbHqfPT2YfF72vhZooF6uCyP8Wg+qInYtyaEQHeTTRCOQiJ/GKubX9ZqzWB4vMIkIG1SitZgj7Ah3HJVdYdHLiZxfokqRmu8hqkkWCKi9YSgxyXSthfbZxbGL0eUQMk1fiyA6PEkfM4VZDdvLCXVDaXP7a3F98N/ETH3Goy7IlXnLc6KOTk0k+17kBL5yG6YnLUlamXrXXAkgt3+UuU/xDRxeiEIbEbfnkduebPRq34wGmAOtzCjvpUfzUwIDAQABo0IwQDAPBgNVHRMBAf8EBTADAQH/MA4GA1UdDwEB/wQEAwIBBjAdBgNVHQ4EFgQUo5fW816iEOGrRZ88F2Q87gFwnMwwDQYJKoZIhvcNAQELBQADggIBABj6W3X8PnrHX3fHyt/PX8MSxEBd1DKquGrX1RUVRpgjpeaQWxiZTOOtQqOCMTaIzen7xASWSIsBx40Bz1szBpZGZnQdT+3Btrm0DWHMY37XLneMlhwqI2hrhVd2cDMT/uFPpiN3GPoajOi9ZcnPP/TJF9zrx7zABC4tRi9pZsMbj/7sPtPKlL92CiUNqXsCHKnQO18LwIE6PWThv6ctTr1NxNgpxiIY0MWscgKCP6o6ojoilzHdCGPDdRS5YCgtW2jgFqlmgiNR9etT2DGbe+m3nUvriBbP+V04ikkwj+3x6xn0dxoxGE1nVGwvb2X52z3sIexe9PSLymBlVNFxZPT5pqOBMzYzcfCkeF9OrYMh3jRJjehZrJ3ydlo28hP0r+AJx2EqbPfgna67hkooby7utHnNkDPDs3b69fBsnQGQ+p6Q9pxyz0fawx/kNSBT8lTR32GDpgLiJTjehTItXnOQUl1CxM49S+H5GYQd1aJQzEH7QRTDvdbJWqNjZgKAvQU6O0ec7AAmTPWIUb+oI38YB7AL7YsmoWTTYUrrXJ/es69nA7Mf3W1daWhpq1467HxpvMc7hU6eFbm0FU/DlXpY18ls6Wy58yljXrQs8C097Vpl4KlbQMJImYFtnh8GKjwStIsPm6Ik8KaN1nrgS7ZklmOVhMJKzRwuJIczYOXD"
 ></verify-viewer>

Please note that default trusted certificates will lost their trust for signature verification when this option specified.

Interacting with a WebComponent

You could dynamically change settings and url attributes of <verify-viewer>. Viewer will pick up the changes and will update the document list, disable/enable features on the fly.

Hints and limitations

  • If you want to use a WebComponent don't forget to polyfill webcomponents API for old browsers;
  • Documents must be hosted on a publically available URLs, if you use a web-server to host it, make sure the CORS is configured correctly, learn more.

CORS policy

Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources on a web page to be requested from another domain outside the domain from which the first resource was served. A web page may freely embed cross-origin images, stylesheets, scripts, iframes, and videos. Certain "cross-domain" requests, notably Ajax requests, are forbidden by default by the same-origin security policy. CORS defines a way in which a browser and server can interact to determine whether or not it is safe to allow the cross-origin request. It allows for more freedom and functionality than purely same-origin requests, but is more secure than simply allowing all cross-origin requests.

If Access-Control-Allow-Origin Header is not present on the requested resource it means that the website with your document doesn't allow Verify by Hancock to get the resource from it. This could be done with an additional HTTP Header, Access-Control-Allow-Origin to requested resource. This header could take the following values:

Access-Control-Allow-Origin : [https://verify.ink]

In this case, https://verify.ink can access your web resource, since it is explicitly allowed.

Access-Control-Allow-Origin : * 

Wildcard character (*) means that any site can access the resource you have it in your site and obviously its unsafe. More information about CORS you can find here.

Document name resoultion

Several sources could be used to determine the document display name, there is a list of priorities:

  1. 1."Content-Disposition" header, with filename="displayname.pdf" *;
  2. 2.From url if ends with file name, for example: "https://domain.example/files/contract.pdf ";
  3. 3.Title from PDF metadata;
  4. 4.In a case document name couldn't be determined, it will be marked as "Unnamed".

*: Note that your server must send a "Access-Control-Expose-Headers": "Content-Disposition" response header to make Verify able to read "Content-Disposition" header value.