How to make a digital signature in a web application (JavaScript) using a smartcard?

问题

We have written a document management system and would like to digitally sign documents using the web client. Our Java client application is already able to apply and check digital signature, but we would like to make signature even with our web client. This is written in GWT and so, when run on the client side, it is a JavaScript application.

We not want to create a Java applet and download it on the client and execute it. We would like to use the browser security device or the browser API in order to sign a document. We would also like to keep the complete document server side, and move to the client only the document hash.

We feel this should be possible using NSS or npapi/npruntime, but we did not find any information about this. (By the way, is npruntime available also in IE? Should we use ActiveX for achieving the same result with IE?)

Do you have any hints?

回答1:

After some more googling I found the answer. Mozilla export part of its NSS module via window.crypto object. A more standard way of doing such operation is probably via DOMCrypt, that is currently discusses in W3C. Google Chrome developer will wait W3C to standardize DOMCrypt, while Microsoft require the use of an ActiveX object as explained here (this works even with Firefox/Chrome/Opera on Windows).

回答2:

Currently (may 2016) it is not possible.

Chrome has dropped Java support. 'Windows edge' will not have. IE11 support is bad, and Oracle has decided to discontinue the java plugin. It would only be possible with Firefox, older versions of IE and the Java plugin.

The new WebCryptographyApi standard provides digital signature support for browsers, but it does not have pcks#11 support

Real e-goverment solution to solve this: 1) Install a local Java application on the user's PC. The application listens on a port as, for example 5678 2) In your page, javascript detects whether there is support for applets 3) If there is no support, connects to the application in the form http://127.0.01:5678/sign and sends the data to sign. 4) The application is local and has no trouble using the operating system keystore, which includes drivers PKCS # 11. Make digital signature and prepares the result 5) page javascript periodically query the result and retrieves it when ready

回答3:

One project that I have been involved with did this with Chrome and Native Messaging:

https://github.com/CACBridge/ChromeCAC

This requires the installation of the chrome plugin, but otherwise works great. Ideal for e.g. Intranet/Group environments where you know you will need to do this ahead of time.

回答4:

In Win/IE you can still use CAPICOM http://en.wikipedia.org/wiki/CAPICOM without any third party ActiveX or external libraries.
This works anywhere IE is installed.
This is being retired however.

Below is what I am using to sign in IE. I call this with e.g: var signature = signDigest(stringToBeSigned);

function signDigest(text) {
if (window.event)
    window.event.cancelBubble = true;

var dest = sign(text); //TODO  

return dest;
}

// CAPICOM constants  

var CAPICOM_STORE_OPEN_READ_ONLY = 0;
var CAPICOM_CURRENT_USER_STORE = 2;
var CAPICOM_CERTIFICATE_FIND_SHA1_HASH = 0;
var CAPICOM_CERTIFICATE_FIND_EXTENDED_PROPERTY = 6;
var CAPICOM_CERTIFICATE_FIND_TIME_VALID = 9;
var CAPICOM_CERTIFICATE_FIND_KEY_USAGE = 12;
var CAPICOM_DIGITAL_SIGNATURE_KEY_USAGE = 0x00000080;
var CAPICOM_AUTHENTICATED_ATTRIBUTE_SIGNING_TIME = 0;
var CAPICOM_INFO_SUBJECT_SIMPLE_NAME = 0;
var CAPICOM_ENCODE_BASE64 = 0;
var CAPICOM_E_CANCELLED = -2138568446;
var CERT_KEY_SPEC_PROP_ID = 6;

function IsCAPICOMInstalled() {
    if (typeof (oCAPICOM) == "object") {
        if ((oCAPICOM.object != null)) {
            // We found CAPICOM!  
            return true;
        }
    }
}

function FindCertificateByHash() {

    try {
        // instantiate the CAPICOM objects  
        var MyStore = new ActiveXObject("CAPICOM.Store");
        // open the current users personal certificate store  
        MyStore.Open(CAPICOM_CURRENT_USER_STORE, "My", CAPICOM_STORE_OPEN_READ_ONLY);

        // find all of the certificates that have the specified hash  
        var FilteredCertificates = MyStore.Certificates.Find(CAPICOM_CERTIFICATE_FIND_SHA1_HASH, strUserCertigicateThumbprint);

        var Signer = new ActiveXObject("CAPICOM.Signer");
        Signer.Certificate = FilteredCertificates.Item(1);
        return Signer;

        // Clean Up  
        MyStore = null;
        FilteredCertificates = null;
    }
    catch (e) {
        if (e.number != CAPICOM_E_CANCELLED) {
            return new ActiveXObject("CAPICOM.Signer");
        }
    }
}

function sign(src) {
    if (window.crypto && window.crypto.signText)
        return sign_NS(src);
    else

        return sign_IE(src);
}

function sign_NS(src) {
    var s = crypto.signText(src, "ask");
    return s;
}

function sign_IE(src) {
    try {
        // instantiate the CAPICOM objects  
        var SignedData = new ActiveXObject("CAPICOM.SignedData");
        var TimeAttribute = new ActiveXObject("CAPICOM.Attribute");

        // Set the data that we want to sign  
        SignedData.Content = src;
        var Signer = FindCertificateByHash();


        // Set the time in which we are applying the signature  
        var Today = new Date();
        TimeAttribute.Name = CAPICOM_AUTHENTICATED_ATTRIBUTE_SIGNING_TIME;
        TimeAttribute.Value = Today.getVarDate();
        Today = null;
        Signer.AuthenticatedAttributes.Add(TimeAttribute);

        // Do the Sign operation  
        var szSignature = SignedData.Sign(Signer, true, CAPICOM_ENCODE_BASE64);
        return szSignature;
    }
    catch (e) {
        if (e.number != CAPICOM_E_CANCELLED) {
            alert("An error occurred when attempting to sign the content, the error was: " + e.description);
        }
    }
    return "";
}

I had some issues with encoding,etc, so I have included my controller (.net) as well

        byte[] decbuff = Convert.FromBase64String(signature);


    //CAPICOM USES 16 BIT ENCODING
    Encoding utf16Enc = Encoding.GetEncoding("UTF-16LE");


    byte[] utf16Data = utf16Enc.GetBytes(getContent);


    ContentInfo content = new ContentInfo(utf16Data);

    System.Security.Cryptography.Pkcs.SignedCms cms = new System.Security.Cryptography.Pkcs.SignedCms(content,true);
    cms.Decode(decbuff);

    int length = decbuff.Length;         

    X509Certificate2 cert = cms.SignerInfos[0].Certificate;


    X509Chain chain = new X509Chain();
    bool theVal = chain.Build(cert);
    cms.CheckHash();       
    cms.CheckSignature(false);

回答5:

Now you can do that. Web application based on PKCS#11 smart cards or tokens can be implemented by using the Silverlight version of NCryptoki. See http://www.ncryptoki.com

You have two chanches:

1) using the Silverlight version of NCryptoki and develop your own Silverlight User Control that implements your logic, a Digital Signature in your case, using PKCS#11 functions supplied by the smart card

2) using the JQuery plugin based on the above Silverlight version and implement your application in JavaScript by calling the PKCS#11 functions in JavaScript

Also, you can use the Silverlight version of NDigitSign (see again http://www.ncryptoki.com) that does all you need and can be implemented in any web browser.

来源：https://stackoverflow.com/questions/10553377/how-to-make-a-digital-signature-in-a-web-application-javascript-using-a-smartc

标签

digital-signature

npapi

pkcs#11