Banking Transactions

Park Jae-sang opens up a bank account with Gangnam Bank, and wishes to log-in and engage in online transactions, including account balance checking, online payments (with some automated scheduled payments), and account transfers between domestic and investment accounts. The first time Park logs in to the Gangnam Bank website (abbreviated "GB") with a temporary verification code sent to his cell phone, the bank asks him to ascertain if the browser he is using is not at a kiosk; moreover, he is asked if it is a web browser and machine configuration he will use often.

He confirms that it is. The GB web site then generates a public key/private key pair and stores the key pair in client-side storage, along with a one-time key escrow by the bank. Additionally, Jae-sang is presented with the bank's public key, such that documents issued by the bank can be verified and decrypted. Jae-sang is also presented with a user guide that explains the validity period of the key pair, and for how long they will persist. [KEYGEN-ASYM].

GB may generate asymmetric keys as in the example below.

// Algorithm Object
var algorithmKeyGen = {
name: "RSASSA-PKCS1-v1_5",
// RsaKeyGenParams
  params: {
    modulusLength: 2048,
    publicExponent: new Uint8Array([0x01, 0x00, 0x01]),  // Equivalent to 65537
  }
};


window.crypto.subtle.generateKey(algorithmKeyGen, false, ["sign"]).then(
  function(keyPair)
  {
    // Store the key pair in IndexedDB
  },
  console.error.bind(console, "Unable to generate keys -- call your Banker or retry later.")); 

      

Subsequent access to the GB website -- always over TLS -- may use keypairs for Jae-sang generated by GB. For instance, JavaScript initially loaded by GB may contain a message that only Jae-sang can decipher, since it is encrypted with his public key; moreover, that message is signed by GB, which gives Jae-sang confidence that the message originates from GB, whose public key is used to verify signed messages by GB. The message is deciphered, and the deciphered message is then digitally signed and sent back to the GB server.

[KEYCALL | VERIFY | DECRYPT-ASYM | SIGN]

In the example below, an encrypted message is signed by GB. The signature is verified, and upon successful verification of the digital signature, the encrypted message is decrypted. The decrypted message is then processed. This example should be seen as a simplification for illustrative purposes only.

        // Encrypted and Signed Message generated by GB... the ellipsis are added. 
        // This could be in a parsable JWT format such that portions with signature and message are easily understood

        var cat = "qANQR1DBw04Dk2uPpEjcJT8QD/0VCfFK2XDM5Cg4iTRwmXrB+Pp8SMK5x09WkYqc... ";

        /** 
          1. Generate an ArrayBufferView of the overall message.
          2. Bit-manipulate this with the ArrayBufferView API to obtain the portion of bytes 
          constituting the signature as an ArrayBufferView, and the message as an ArrayBufferView.
          This could use JWT objects.
          3. Obtain the public key of GB from IndexedDB -- pubGBKeySign -- a step not shown here.
          4. Verify the signature.
          5. Upon verification, decrypt the message.  This message can be decrypted only by Jae-Sang, using his private key          

        **/

        var data = createArrayBufferView(cat);
        var signature = extractSignature(data);
        var pMessage = extractMessage(data);
        var mRSARFC3447 = {
          name: "RSASSA-PKCS1-v1_5", params: {
                            hash: "SHA-256"
                        }
        };
        // Verify GB signature
        window.crypto.subtle.verify(mRSARFC3447, pubGBKeySign, signature).then(
        function(verified){

        /* 
          If verified, obtain a prvKeyEncrypt from IndexedDB representing Jae-sang's private key and:
          1. Decrypt the message.  Note that here, typically the encryption key might be symmetric
             and wrapped.  This sample simplifies this by not demonstrating key wrapping.
          2. Do further operations, like sign the decrypted message and send it back
          Else the signature is invalid -- abort
        */

          return window.crypto.subtle.decrypt("RSAES-PKCS1-v1_5", prvKeyEncrypt, pMessage);

        },
        console.log.bind(console, "Verification Error!  Contact Bank.")).then(
        function decrypted(message){

          // Conduct operations on GB message
          // This could include signing the decrypted message and sending it back to GB

        },
        console.error.bind(console, "Decryption Error!  Contact Bank.")

        );

As long as Jae-sang uses the same browser, within the validity period of the keys that he generated, he can use them as credentials by signing, verifying, encrypting and decrypting bits of data sent by GB. Additionally, Jae-sang can digitally sign online checks, authorize payments, and sign tax forms that he submits to the bank site using similarly generated asymmetric keys. He can also perform the following tasks:

1. Submit documents to GB that only GB can read, with the assurance that these have come from Jae-sang. Such documents include confidential financial information, and may be encrypted at submission. This can follow the well-understood pattern of wrapping keys using asymmetric encryption, but encrypting and decrypting larger documents using symmetric encryption. [SIGN | DERIVE-SYM | ENCRYPT-SYM | WRAP-ASYM]
2. Receive encrypted documents from GB that only he can read, with the assurance that they have come from GB and only GB. These include his private bank statements and tax documents, which are signed with his public key, already generated and obtained by GB in a previous step. [VERIFY | UNWRAP-ASYM | DECRYPT-SYM]

Authenticated Video Services

A Video Service Provider wishes to distribute high quality commercial video to users of web-enabled TVs and Set Top Boxes. The video in question can only be delivered to devices with certain capabilities that meet the service provider's security requirements, which may vary based on the content and content quality to be delivered. In order to determine whether the device is indeed approved to be used with the video service, the service provider arranges for suitable devices to each be pre-provisioned with a cryptographic key and associated identifier by the device manufacture, which are made known to the service provider.

Ryan has just bought a new TV and wishes to watch video content from the service provider. He connects the TV to the Internet, and navigates to the video provider's website. The video provider's site establishes a secure communication channel between the video provider's page on the TV and the video provider's servers, proving to the servers that Ryan's TV is indeed one of those that meets the security requirements by use of the cryptographic key and identifier pre-provisioned on the TV. The video provider's page on the TV likewise verifies that it is talking to a genuine server, preventing the hijacking of Ryan's video watching by a malicious third party. To ensure the highest security, the pre-provisoned key is used minimally in this process to deliver session keys.

[NAMEDKEY | VERIFY | UNWRAP | MAC | ENCRYPT-SYM | DECRYPT-SYM | SIGN]

The Key Discovery API [[webcrypto-key-discovery]] provides a mechanism for an application in JavaScript to detect the presence of a pre-provisioned key using the name of a disclosed identifier. Unlike other examples presented here, this example presumes a key store that is not IndexedDB [[INDEXEDDB]] or localStorage [[webstorage]].

window.cryptoKeys.getKeysByName("VetFlxL33t_Device.p1a.b11").then(
function authorize(namedKey)
{
  if(namedKey.name = "VetFlxL33t_Device.p1a.b11")
  // Authorize
  // else console.log.bind(console, "Device Not Authorized!")
}
function signUp()
{
  // Named Key not found scenario
  // Convert new device to New User

  .....
}
);

Ryan creates an account with the service provider and signs up for the lowest level of service, which enables him to connect five devices to the service at any one time. Ryan's account creation involved the creation of a specific key pair to uniquely identify him, and safely exchanges keys with the video service's servers. [KEYGEN-ASYM | KEYEX | KEYCALL | SIGN | VERIFY]

The video service provider is able to track the number of devices Ryan has connected to the service by virtue of the pre-provisioned keys and identifiers, so that when he attempts to connect a sixth device, the service can prompt him to upgrade his service level or deactivate one of the existing devices. [KEYCALL | NAMEDKEY]

Ryan finally attempts to play some video through the service. By virtue of the secure connection, the video service provider is able to make content authorization decisions that are tailored to the security capabilities of the exact make, model and version of TV that Ryan has purchased, thereby ensuring that the content providers security requirements are met in respect of the specific content requested. Ryan's devices send encrypted messages about quality of service and watching behavior to the video service provider. [NAMEDKEY | KEYCALL | SIGN | VERIFY | MAC | WRAP | ENCRYPT]

Code Sanctity and Bandwidth Saver

A major social networking site wishes to optimize website performance by storing JavaScript libraries that are served from a CDN in localStorage [[webstorage]] or in IndexedDB [[INDEXEDDB]], preventing server rountrips to the CDN. When the code in the libraries has undergone critical modifications, the social networking site wishes to determine whether the version stored in the client needs updating.

Using the Web Crypto API, the social networking site might verify a digest of the code from the CDN and compare it to a digest of the code in localStorage [[webstorage]]. The social network can generate a digest of the material extracted from the client storage, and compare this to a pristine version of the digest that the social networking site makes available to the client. If the two digests match, the code is deemed the latest from the CDN, and does not need to be refreshed. [DIGEST]

// Retrieve a SHA-256 digest of the pristine version of the code
// This is retrieved from the server
        var src_hash = getHashFromCDN();
        function init()
        {
          var src = window.localStorage.getItem('src');

          /*  Create a Digester and compare 

            1. Assume utility function createArrayBufferView that creates an ArrayBufferView of the src
            (and note that the comparison does depend on this being consistent on client and server).

            2. Compare the two values after digest is successfully generated.

            In practice including an onprogress handler and onerror handler is recommended - the code here
            is terse for readability.

            */
          bufferData = createArrayBufferView(src);  
          window.crypto.subtle.digest("SHA-256", bufferData).then(
          function(digest){
            if(digest === src_hash)
            {
              var transformed = JSON.parse(src);
        
              /* Now do stuff with transformed -- it is legitimately from the mothership */


            }
            else
            {
              request.pull("https://cdn.example/src.js")

              // Put it in localStore
            }  
           },
           function(error){
           // Fetch the code anew 

            request.pull("https://cdn.example/src.js");

           // Put it in localStore

         });

        }
The conversion to an ArrayBufferView must be consistent with the conversion to the bits on the server-side, so that the SHA-256 digests can be compared accurately.

In this case, getHashFromCDN() runs within the origin of the page of the social networking site, accessed through TLS, and allows the CDN to transform the code blob into an ArrayBufferView, perform a digest operation, and then allow client-side code to do the same with what is in localStorage; if the two digests are exactly equivalent, the code in localStorage is sanctioned for use, and if not, code is fetched anew from the CDN.

Encrypted Communications via Webmail

Tantek wishes to communicate with Ryan securely. Moreover, Tantek wishes to use an email web application (EWA) provided by a third party, which is a web site that allows users who have accounts to set up email accounts of their own choosing -- that is, users can enter in existing POP/IMAP/SMTP username and password credentials, or simply use an email address provided by the EWA at its own address. The EWA serves to send messages, as well as provide a message store available from anywhere. It allows for the possibility of sending encrypted messages.

Ryan provides a PGP key on his website, encoded in the relevant conventions. For instance, he follows the common practice of including a Base64 text string that represents his public key.

Ryan uses the hCard format [[hCard]] to encapsulate contact information with some semantic annotation within the markup of his webpage. Within the hCard ([[hCard]]), he may include a snippet like this:

    
    <span class="key">
-----BEGIN PGP PUBLIC KEY BLOCK-----
Version: GnuPG/MacGPG2 v2.0.17 (Darwin)
Comment: GPGTools - http://gpgtools.org
 
nQENBE4sjPMBCAC0ublKDnsdwD9B71bygmwVxn3hX6zw4H1Qlc6wPc0/OepjqVyq
...
-----END PGP PUBLIC KEY BLOCK-----
</span>
  

Logging on to EWA, Tantek is prompted to import Ryan's contact information from his web page, and is notified that Ryan's public key will also be imported. EWA then begins the process of importing Ryan's PGP key, since it understands how to parse public keys within hCard content in markup. In order to import the key for storage under EWA's origin, it must first "scrub" the key format to be in one of the accepted import formats of the WebCrypto API.

Here, a standardized Contacts API could be used to procure Ryan's contact information, and can be one way of importing the key for use by an application such as EWA. Due the same origin policy [[HTML]], EWA must import the key, so that operations conducted with it fall under the domain of EWA. The key is converted to JSON Web Key format [[JWK]], which the WebCrypto API accepts and then imports it for use within the web application.

/**
  1. First convert the PGP key format into an "importable" format by the WebCrypto API; assume "keyString" is the PGP format
     Utility functions are assumed here as well. JWK by JOSE is supported format.
  2. Import the key using the WebCrypto API
  **/

var alg = "RSA";

var jwkKey = convertToJWK(keyString, alg);

var jwkKeyObject = JSON.parse(jwkKey);

/**

  Key import syntax is still undefined in the spec.

  1. The key gets imported, and is used to sign messages.
  2. The key can also be used to WRAP-ASYM a symmetric key
  3. The symmetric key from 2. above can be used to encrypt messages

**/

  window.crypto.subtle.importKey("jwk", jwkKey, "RSAES-PKCS1-v1_5", "true", ["encrypt", "verify"]).then(handleImport);

  function handleImport(bool)
  {
    // If successfully imported, store key in IndexedDB
    // Retrieve key later for encypted communications and signature verification
    // If not, console.error.bind(console, "Error Importing Key")
  }

The key now serves as a key within the origin of EWA. EWA can then offer Tantek the option of encrypting messages to Ryan, which may follow the pattern below:

1. Tantek imports the key into the EWA, and composes a message that he wishes to send only to Ryan. [JWK]
2. EWA generates a symmetric key on Tantek's behalf, and uses Ryan's public key, just imported, to wrap that key. [DERIVE-SYM | KEYCALL | WRAP-ASYM].
3. EWA then signs the encrypted message and wrapped key, and sends them from Tantek's email account on Tantek's behalf [SIGN | ENCRYPT-SYM].
4. Ryan also logs into EWA. Separately, he has also imported Tantek's public key to EWA using a similar mechanism that Ryan did. In this case, as long as Ryan has Tantek's public key, he does not strictly need to log into the same EWA as Tantek does; instead, Ryan may choose another email web application with a different origin, but with similar functionality, such that the public key is imported to be used within the origin of the web application. Ryan receives the message, verifies that it is indeed from Tantek, decrypts and reads the message using his corresponding private key. [KEYCALL | VERIFY | UNWRAP-ASYM | DECRYPT-SYM].

Off The Record Real Time Messaging

David and Nadim wish to have an "Off The Record" chat in real time, completely between them, primarily using text, as well as the ability to share digital data such as photographs. They log on to a chat server, and connect to each other's machines directly. The server merely serves up the UI for the chat client, and does not log their conversation (and in fact, cannot). The respective web pages on David and Nadim's browsers may use the WebCrypto API to do the following things:

1. Generate asymmetric keys for David and Nadim respectively, such that both get public and private keys. [DERIVE-ASYM]
2. Engage in a key exchange, so that David and Nadim get each other's public keys. It is conceivable that using the WebCrypto API the chat application can enable David and Nadim to use a Diffie-Hellman key exchange, or a mechanism such as SIGMA over WebSockets [[WEBSOCKETS-API]][[WEBSOCKETS-PROTOCOL]]. The key exchange which accompanies message exchanges involves the generation of cryptographically secure random numbers. [RANDOM | KEYEX | KEYEX-DH]
3. David or Nadim may now compose a message to each other. Each message exchange involves authentication, message authentication codes, further key derivation, and further key exchanges. [SIGN | VERIFY | MAC | RANDOM | DERIVE | KEYEX | KEYEX-DH]

Documents In The Cloud

Vijay wishes to confidentially store certain documents of various file types using a web service that he pays a monthly subscription to for such confidential storage. The confidential storage web application (abbreviated "SWA") makes the claim that all storage is encrypted, and that even it cannot access the contents of what a user stores. He can drag and drop content from his laptop onto a web page of the service, and it automatically encrypts it and stores it in an encrypted manner. Vijay can do the following:

1. Log on to the service using his credentials; after the service determines that Vijay is using his primary browser, which he will use to access the service subsequently, it generates both signature and encryption key pairs. Key generation may be similar to the banking use case. [KEYGEN-ASYM | KEYEX-DH | VERIFY | UNWRAP | DECRYPT-SYM | SIGN]
2. Drag over content from his underlying file system that he wishes to store. The SWA signs and encrypts the content, and uploads it. It may make multipart cryptographic operations on a given file, and it may also "chunk upload" large content, depending on file-size. [SIGN | HMAC | DERIVE-SYM | ENCRYPT-SYM | KEYCALL | WRAP]
3. Store that content on the server, with the assurance that it is stored there in a way that is virtually undecipherable to third-parties, including those running the SWA.
4. Later, Vijay can retrieve the content, and save it back to his local file system. He has the assurance that the content has not been tampered with since it was stored, and that it in fact is from SWA. [KEYCALL | VERIFY | HMAC | UNWRAP | DECRYPT-SYM]

BrowserID: Use of Cryptography for Identity Protocols

Karen, an avid photographer, has been looking for a site to store all the photos that she posts on various websites. Instead of creating yet another online identity for another photo storage website, Karen is pleased to find a photo-storage service that uses the BrowserID protocol [[BrowserID]], allowing her to use any email address as an identity. The photo-storage service (PSS) is a Relying Party of the protocol, and Karen elects to use Persona.org as an Identity Provider, since she sees a "log-in with Persona" button on the PSS website. She notes that her preferred email provider is not yet an Identity Provider for use with BrowserID [[BrowserID]], and thus uses Persona.org as an interim or fallback option.

Karen first creates a "verified email" identity with Persona.org. Persona.org sends out an email with a hyperlink in it to an email address that she chooses to use as one of her identities (she chooses "karen@webcrypto.com"), especially for use with PSS. She then logs in to this email account and clicks on the verification link sent by Persona.org. Persona.org is thus able to determine that Karen owns this email address. The following now happens:

1. Persona.org creates asymmetric keys, public and private, on behalf of the user. [KEYGEN-ASYM]

2. Persona.org's web page then sends the public key just created over TLS for storage on Persona.org's servers, and stores the keypair in the browser's client-side storage. This could include [[INDEXEDDB]] and localStorage [[webstorage]], although in browsers with a native implementation of BrowserID [[BrowserID]], this might include another key store.

3. Persona.org then generates a certificate, which involves signing the public key just created, the email address, and a validity interval; the signature here is performed by Persona.org. This certificate takes the form of a JSON Web Token [[JWT]] object. The [[JWT]] object -- the certificate created above -- is itself stored in the browser's client storage, which can be [[INDEXEDDB]] or localStore [[webstorage]]; if the browser implementation has a native implementation of [[BrowserID]], another key and certificate store could exist. [KEYCALL | SIGN]

Karen now has at least one identity, namely her email of choice, verified on Persona.org, along with a certificate issued by Persona.org. She then decides to log in to the PSS website using that identity. The following sequence then takes place:

1. Karen accesses the website of the PSS, and then clicks on the "Log in with Persona" link. The log-in link loads script from Persona.org in an iframe, which creates an assertion structure as a JWT [[JWT]]. The assertion consists of the name of the Relying Party, also referred to as an audience, and a validity period. This assertion is signed using the private key that was created previously. [KEYCALL | SIGN]

2. Within script loaded by Persona.org, the signed assertion is then combined with the certificate created previously into a new [[JWT]] structure, which might look like this:

     // This is for illustrative purposes only
     // Proper use of JWT uses Base64 
   
     assertionPlusCert = 
     {
       "assertion": {
         "audience": "photosharingsite.example",
         "valid-until": 1308859352261,
       }, // signed using Karen's private key minted by Persona.org for karen@webcrypto.com
       "certificate": {
           "email": "karen@webcrypto.com",
           "public-key": "",
           "valid-until": 1308860561861,
       } // certificate is signed by Persona.org
     };
   
     

3. Persona.org then sends this over to script hosted by PSS using cross-origin messaging.

   /** 
      This code is for illustrative purposes only and runs on Persona.org.
   
      1. Assume a combined assertion and certificate structure in JWT format for use with postMessage()
         var assertionPlusCert is a JWT like above
      2. Obtain the karen@webcrypto.com private key for signing assertion from client-side storage
      3. Send the certificate structure assertionPlusCert over for verification
      
      Caveat emptor: step 3 can be made more efficient in terms of WebCrypto API usage if
      Karen's public key can be sent over using the structured clone algorithm.  Currently
      we proceed with it as a JWK embedded in a JWT.
   
   **/
   
   // Retrieve Karens public key
   
   transaction.objectStore("publicBrowserIDKeys").get("karen@webcrypto.com").onsuccess = function(evt) {
     var privateKey = event.target.result;
   
   // Sign the assertion -- signature syntax resembles verification syntax in banking example
   // Send the assertionPlusCert structure to script on photosharingsite.example
   
     pssHandle.postMessage(assertionPlusCert, "http://photosharingsite.example");
     
     window.addEventListener("message", receiveCallBackFromPSS, false);
   
   
     function receveCallBackFromPSS(event)
     {
       if(event.origin != "http://photosharingsite.example")
         return;
       if(event.data === "OK") 
         // Auth was successful
       else
         // Auth Fail on PSS side
     }
   
   /** 
     On the receiving end, namely http://photosharingsite.example:
   
     0. Register to receive message events
     1. Obtain the public key from Persona.org to verify the signed certificate
     2. Use karen@webcrypto.org's public key to verify the signature on the assertion
   
   **/
   
   window.addEventListener("message", receiveCryptoFromIDP, false);
   
   function receiveCryptoFromIDP(event)
   {
   
     if(event.origin!="http://login.persona.org/")
     {
       event.source.postMessage("authFail", event.origin);
       return "authFail";
     }
   
     
     /* 
        Note that event.data is assertionPlusCert with two signatures
        JWT specifies a way this can be represented, following use of
        Base64 encoding and "." as a delimiter separating components
   
        1. Assume a utility function to obtain a JWK from a well-known location
           Import the JWK key from Persona.org -- see Example 6
        2. Verify the part signed by Persona.org
        3. Assume utility functions to parse the event.data into subcomponents
        4. Obtain Karen's public key from event.data using utility function
        5. Import Karen's public key for use within PSS
        6. Verify the assertion signed by Karen's private key
        7. Step 2. and 6. succeeding allow authentication to occur
     */
     
     var mRSARFC3447 = 
     {
       name: "RSASSA-PKCS1-v1_5", params: {
                               hash: "SHA-256"
                           }
     };
   
     var JWKIDPKey = createJWK("https://login.persona.org/.well-known/browserid");
   
     var certificateSignature = parseCertSignature(event.data);
   
     var assertionSignature = parseAssertionSignature(event.data);
     // Import the JWK key -- see Example 6 -- this results in publicKeyIDP
   
     var JWKuserPubKey = parseUserPublicKey(event.data);
     // Import the user public key -- see Example 6 -- this results in userPublicKey
     
     window.crypto.subtle.verify(mRSARFC3447, publicKeyIDP, certificateSignature).then(
     function(successCert)
     {
       window.crypto.subtle.verify(mRSARFC3447, userPublicKey, assertionSignature).then(
       function(successUserClaim)
       {
         event.source.postMessage("OK", event.origin);
         return "OK";
       },
       function(failUserClaim)
       {
         event.source.postMessage("authFail", event.origin);
         return "authFail";
       }
       );
     },
     function(failCert)
     {
       event.source.postMessage("authFail", event.origin);
       return "authFail";
     }
     );
   }
   

4. The PSS website receives the message, sent via cross-origin messaging, and proceeds to validate the assertion. In order to do this, the PSS website first obtains Persona.org's public key, hosted at a well-known location, and verifies the signature on the certificate. The script at PSS may choose to "import" the public key of Persona.org in order to verify the signature, and store it within PSS's application storage. [IMPORT | VERIFY]

5. The PSS website then verifies the signature of the user on the assertion. Karen's public key has also been sent to script hosted on PSS. [VERIFY]

6. Upon successful verification of both signatures, Karen is granted access to PSS, which now identifies her and considers her authenticated.