Giter Site home page Giter Site logo

evandroabreu / digital-signature-chrome-extension Goto Github PK

View Code? Open in Web Editor NEW

This project forked from alessioscarfone/digital-signature-chrome-extension

0.0 0.0 0.0 41.33 MB

Chrome extension for digital signature with PKCS#11 token.

License: Apache License 2.0

JavaScript 15.00% Java 21.11% CSS 60.87% HTML 2.74% Batchfile 0.29%

digital-signature-chrome-extension's Introduction

Digital-Signature-Chrome-Extension

1. Introduction

The aim of this project is to create an integration of digital signature (Qualified Digital Signature), with PKCS#11 token, within the Chrome browser. The extension interacts with a native application developed in JAVA which has the purpose of directly interacting with the cryptographic hardware. The user through the extension can sign a document (PDF) opened in a browser tab. The software supports CAdES and PAdES signature (both visible and not visible). The app allows to sign both online document and local files.

2. Native application

The native application is an adapted version of my cli tool ( https://github.com/AlessioScarfone/Java-Digital-Signature ), slightly modified to communicate with a chrome extension. The fundamental change is the adding of a middleware object that read the messages from the extension, in JSON format, and formats them to adapt to the command line parameters and return the response to the browser.


3. Installation

Prerequisites:

  • Chrome Browser
  • Java 8
  • Token PKCS #11

1️⃣ : DOWNLOAD REQUIRED FILES

The necessary folders of the project for the installation are:

  • app: it contains the extension source code and will be used as Unpacked Extension.
  • hostapp-dist: it contains all files for the native application.

Create a folder that contains them.

2️⃣ : INSTALL THE CHROME EXTENSION

  • Open Chrome and enter chrome://extensions/ into your address bar.
  • Click on the “developer mode” toggle in the upper-right corner.
  • Click no "Load Unpacked" and select the "app" folder. At this point in the extension list will appear the loaded extension.

Loaded_Ext

Copy the ID (look at the image), you will need it later..

3️⃣ : INSTALL NATIVE APP

  • Go into hostapp-dist folder
  • open manifest.json file and modify the "allowed_origins" value with your loaded extension ID.

"allowed_origins": [ ​ "chrome-extension://YOUR_EXTESION_ID/" ]

  • After this, run the install_host.bat script that will create some registry key that are necessary for using the native application.

NOW YOU CAN USE THE APPLICATION 😄

NOTE: for uninstall the application is enough remove the extension from chrome and run uninstall_host.bat

4. Usage

  1. Open pdf with browser (local or online file).
  2. Click on extension icon, this will open a popup.
  3. Select the type of signature you want:
  4. 4.1. CAdES or PAdES not visible
    1. Insert password.
    2. The extension will download the file (if is online) and sign the pdf.
    4.2. PAdES visible signature
    1. The extension will download the file (if is online) and retrieve informations about pdf, like page number and signature fields.
    2. Configure the setting for visible signature: page and position or if some fields are present, you can select the preferred field to use for signature.
    3. Go to next step and insert password and sign the pdf.
    5. At the end of procedure you will see a confirm message or, if any problem will rise, you will see an error message.

NOTE: if the pdf contains signable fields and you have selected "PAdES visible signature", the app may modify the look of the chrome pdf viewer to add the name of the fields "above" the pdf. It tries to use the most precise position and respecting the zoom.


5. Project Structure

Folder structure:

  • app: it contains the source of the chrome extension.
  • hostapp-src: it contains the source code of the native application.
  • hostapp-dist: it contains all the files necessary for installing and running the application.

Chrome extension gets data from browser and passes it to the native application via Chrome Native Messaging. A middleware parses the received message from the browser and prepares data for the native application that will sign the document and return the data needed for the extension.

5.1. Chrome Extension structure

Work in progress... 👷 💻

Extension components:

  • Popup/Page Action: the UI of the extension, which can be activated only on the tabs that contain a pdf. Allows the user to choose the type of signatures and enter the necessary data such as password, field to sign etc. The script is also responsible for downloading the file and injection the content script if necessary.
  • Background Script: the script that manages communication with the native app and provides storage services to restore the state of the popup and data. (Allows the user to temporarily close the popup and finish the operation later).
  • Content Script: (used only for PAdES visible signature). The PDF browser viewer does not show names of signature fields, so this script adds the name of the fields "above" the pdf viewer.
  • Native Application: a Java application that deals with the creation of thesignature and communication with the token. The native application commu-nicates exclusively with the"Background Script"and it responds to two typesof requests:"sign a file"or"analyze a file"to extract information thatcan later be used to execute a signature (visible PAdES).

For details about Chrome Extension Architecture: https://developer.chrome.com/extensions/overview


NOTE:

Token Image

digital-signature-chrome-extension's People

Contributors

alessioscarfone avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.