First we will create and open to the directory /etc/pki/tls/keystore. The keytool command that creates the keystore, we need to supply the following:

• keystore file name: demo.colabrativ.com.jks
• key algorythm (keyalg): RSA
• alias: demo
• keysize: 2048 As of January 1, 2014 2048-bit or longer keys will be required by Certification Authority/Browser Forum.

In addition, we need to supply information on the website URL, when the keytool asks for “What is your first and last name?” The key and keystore passwords are optional. This information and information on our institution have been highlighted in green in the example below.

$ sudo mkdir /etc/pki/tls/keystore
$ cd /etc/pki/tls/keystore
$ sudo keytool -genkey -alias demo -keyalg RSA -keystore demo.colabrativ.com.jks -keysize 2048
Enter keystore password: password
Re-enter new password: password
What is your first and last name?
  [Unknown]:  demo.colabrativ.com
What is the name of your organizational unit?
  [Unknown]:  
What is the name of your organization?
  [Unknown]:  Colabrativ, Inc.
What is the name of your City or Locality?
  [Unknown]:  Orinda
What is the name of your State or Province?
  [Unknown]:  California
What is the two-letter country code for this unit?
  [Unknown]:  US
Is CN=demo.colabrativ.com, OU=Developmemt, O=Colabrativ, Inc., L=Orinda, ST=California, C=US correct?
  [no]:  yes

Enter key password for 
        (RETURN if same as keystore password):

$ ls -lt
total 4
-rw-r--r-- 1 marc users 2246 Aug 30 08:53 demo.colabrativ.com.jks

We need to supply the following:

• alias: demo
• keystore file name: demo.colabrativ.com.jks
• CSR file name: demo.colabrativ.com.csr

$ keytool -certreq -alias demo -keystore demo.colabrativ.com.jks -file demo.colabrativ.com.csr
Enter keystore password: password

$ ls -lt
total 8
-rw-r--r-- 1 marc users 1039 Aug 30 08:55 demo.colabrativ.com.csr
-rw-r--r-- 1 marc users 2246 Aug 30 08:53 demo.colabrativ.com.jks

Symantec Corporation provides a set of SSL tools at https://ssl-tools.verisign.com/#certChecker?sl=DENJS-0000-04-00, including a CSR Validation. After pasting your CSR into the window provided and running the validator, then following information on your CCR is shown:

Common Name	demo.colabrativ.com
Organization	Colabrativ, Inc.
Organizational Unit	Unknown
Locality	Orinda
State	California
Country	US
Signature	Verified
Signature Algorithm	SHA1
Key Algorithm	RSA
Key Length	2048

The signing request (demo.colabrativ.com.csr) can now be sent to the certificate authority.

After receiving the certificates from the certificate authority, they need to be loaded in the keystore before exporting the key. You need both the certificate for your URL and the intermediate certificate from the certificate authority. This example uses the following certificates and keystore:

• intermediate certificate file name: intermediate.crt
• certificate file name: demo.colabrativ.com.crt
• keystore file name: demo.colabrativ.com.jks

First the certificate authorities intermediate certificate is loaded using the alias root.

$ keytool -import -trustcacerts -alias root -file intermediate.crt -keystore demo.colabrativ.com.jks
Enter keystore password: password
Certificate was added to keystore

Then our certificate, demo.colabrativ.com.crt is loaded in the keystore using the alias demo.

$ keytool -import -trustcacerts -alias demo -file demo.colabrativ.com.crt -keystore demo.colabrativ.com.jks
Enter keystore password: password
Certificate was added to keystore

There are three steps in extracting the key from the keystore we created above:

1. Use keytool to create an intermediate PKCS12 keystore, demo.colabrativ.com.pkcs12, from the keystore, demo.colabrativ.com.jks.
2. Use OpenSSL to create a Privacy-enhanced Electronic Mail (PEM) formatted file containing both the certificate and the key, demo.colabrativ.com.pem.
3. Extract the key, demo.colabrativ.com.key, from the PEM file using a text editor.

$ sudo keytool -importkeystore -srckeystore demo.colabrativ.com.jks -destkeystore demo.colabrativ.com.pkcs12 -deststoretype PKCS12
Enter destination keystore password: password
Re-enter new password: password
Enter source keystore password: password
Entry for alias tomcat successfully imported.
Import command completed:  1 entries successfully imported, 0 entries failed or cancelled

$ sudo openssl pkcs12 -in demo.colabrativ.com.pkcs12 -out demo.colabrativ.com.pem -nodes
Enter Import Password: password
MAC verified OK

$ sudo cp demo.colabrativ.com.pem demo.colabrativ.com.key
$ sudo vi demo.colabrativ.com.key

$ ls -lt
total 20
-rw-r--r-- 1 marc users 1224 Aug 30 13:57 demo.colabrativ.com.key
-rw-r--r-- 1 marc users  509 Aug 30 13:53 demo.colabrativ.com.pem
-rw-r--r-- 1 marc users  509 Aug 30 13:50 demo.colabrativ.com.pkcs12
-rw-r--r-- 1 marc users 2246 Aug 30 13:48 demo.colabrativ.com.jks
-rw-r--r-- 1 marc users 1039 Aug 30 13:46 demo.colabrativ.com.crt
-rw-r--r-- 1 marc users 1039 Aug 30 13:45 intermediate.crt
-rw-r--r-- 1 marc users 1039 Aug 30 08:55 demo.colabrativ.com.csr

After the certificate and key have been prepared, they are moved the /etc/pki/tls/certs/, and /etc/pki/tls/private/ directories, respectively.

$ sudo mv intermediate.crt /etc/pki/tls/certs/.
$ sudo mv demo.colabrativ.com.crt /etc/pki/tls/certs/.
$ sudo mv demo.colabrativ.com.key /etc/pki/tls/private/.

Shown below are the differences between the original ssl.conf file and the edited version. It is a bit hard to tell where these changes were made from the file differences, so a copy of a demonstration ssl.conf file can be downloaded at the bottom of the section.

$ cd /etc/httpd/conf.d
$ sudo cp –p ssl.conf ssl.conf.orig
$ sudo vi ssl.conf
$ sudo diff ssl.conf.orig ssl.conf
19a20,21
> NameVirtualHost *:443
>
74c76,77
> <VirtualHost _default_:443>
---
> #<VirtualHost _default_:443>
> <VirtualHost *:443>
78a82
> ServerName demo.colabrativ.com:443
85a90,100
> #
> # Proxy Server directives. Uncomment the following lines to
> # enable the proxy server:
> #
> ProxyRequests Off
> ProxyPass        /admin   https://demo.colabrativ.com:8443/admin
> ProxyPass        /demoapp https://demo.colabrativ.com:8443/demoapp
>
> SSLProxyEngine on
>
105c120,121
< SSLCertificateFile /etc/pki/tls/certs/localhost.crt
---
> #SSLCertificateFile /etc/pki/tls/certs/localhost.crt
> SSLCertificateFile /etc/pki/tls/certs/demo.colabrativ.com.crt
112c128,129
< SSLCertificateKeyFile /etc/pki/tls/private/localhost.key
---
> #SSLCertificateKeyFile /etc/pki/tls/private/localhost.key
> SSLCertificateKeyFile /etc/pki/tls/private/demo.colabrativ.com.key
143c143
< #SSLCACertificateFile /etc/pki/tls/certs/ca-bundle.crt
---
> SSLCACertificateFile /etc/pki/tls/certs/intermediate.crt

Download: demo_ssl.conf

We configure Tomcat to support applications and services under the secure https protocol on port 8443. We do this by editing the server.xml file in /etc/tomcat7. We need to supply the keystore password in the 8443 Connector we enable. I have saved the original server.xml, and only show the difference between the two files below.

$ cd /etc/tomcat7
$ sudo cp -p server.xml server.xml.orig
$ sudo vi server.xml
$ sudo diff server.xml.orig server.xml
84,88c84,92
<     <!--
<     <Connector port="8443" protocol="HTTP/1.1" SSLEnabled="true"
<                maxThreads="150" scheme="https" secure="true"
<                clientAuth="false" sslProtocol="TLS" /&gt
<     -->
---
>
>     <Connector port="8443"
>                protocol="HTTP/1.1"
>                SSLEnabled="true"
>                maxThreads="150"
>                scheme="https" secure="true"
>                clientAuth="false" sslProtocol="TLS"
>                keystoreFile="/etc/pki/tls/keystore/demo.colabrativ.com.jks"
>                keystorePass="password" />

Example of “ondrop” Attribute in an HTML Table Element

<table ondrop="event.stopPropagation();
               event.preventDefault();
               droppedFile('element-id', event);">

addOnDrop Method

/** Add an ondrop attribute to an element in the DOM, for example:
 * ondrop="event.stopPropagation(); droppedFile('element-id', event);"
 *
 * @param element DOM element
 * @param elementID Element Id to be sent to droppedFile routine.
 */
 public static void addOnDrop(Element element, String elementID) {
     element.setAttribute("ondrop",
         "event.stopPropagation(); droppedFile(\'" + elementID + "\', event);");
 }

droppedFile JavaScript Routine

01  var boundary = null;
02
03  function droppedFile(dropElementID, event) {
04      if (window.File && window.FileList && window.top.dropFileListener) {
05          if (event.dataTransfer) {
06              url = secureURL + "upload";
07              boundary = "Colabrativ-" + Math.floor(999999999999999 * Math.random());
08
09              var formData = new FormData();
10              formData.append("drop-element-id", dropElementID);
11              formData.append("boundary", boundary);
12
13              var files = event.dataTransfer.files;
14
15              for (var i = 0; i < files.length; i++) {
16                  formData.append("file-length-" + i, files[i].size);
17                  formData.append("file-"        + i, files[i]);
18              }
19
20              var request = new XMLHttpRequest();
21              request.upload.onprogress = updateProgress;
22              request.upload.onload     = loaded;
23              request.upload.onerror    = loadError;
24              request.open("POST", url, true);
25
26              request.onreadystatechange = function() {
27                  if (this.readyState == 1) {
28                      var filesJSON = '"files":[';
29                      for (var i = 0; i < files.length; i++) {
30                          filesJSON = filesJSON + '"' + files[i].name + '"';
31                          if (i < files.length - 1) filesJSON = filesJSON + ', ';
32                      }
33                      filesJSON = filesJSON + ']'
34                      window.top.dropFileListener.droppedFile( '{' +
35                          '"requestBoundary": "' + boundary + '", ' + filesJSON + '}');
36                  }
37                  if (this.readyState == 4) {
38                     window.top.dropFileListener.droppedFile( request.responseText );
39                  }
40              }
41
42              request.send(formData);
43          }
44          else {
45              alert("Your browser does not support file drag and drop.  " +
46                    "We recommend that you upgrade your browser to one that supports HTML5, " +
47                    "such as Mozilla's FireFox or Google's Chrome.");
48          }
49      }
50      else {
51          alert("window.top.dropFileListener not found!");
52      }
53  }

DropFileConnector class

package com.colabrativ.common.client; 

import com.google.gwt.dom.client.Element; 

public class DropFileConnector {
    /** Used to pass information to the GWT application. Register your implementations with
      *  {@link com.colabrativ.common.client.DropFileConnector#connect( ClientSideDropFileSupport)}
      */
    public interface ClientSideDropFileSupport {
        /** The page calls this method to send dropped file information to application
          *
          * @param json JSON string containing the file name information.
          */
        void droppedFile(String json);
    } 

    /** An observer of drop file events, supplied by the GWT application. */
    static private ClientSideDropFileSupport theObserver; 

    /**
      * Connect the GWT application to the drop file JavaScript. The observer is notified
      * whenever the user drops a file on the application area (id="app-area").
      *
      * @param observer
      */
     public static void connect( ClientSideDropFileSupport observer ) {
         theObserver = observer;
         connectToPanel();
     }

     // These methods are "glue" methods that let the simple JNDI call talk to the observer through its interface.
     @SuppressWarnings("all")
     private static void droppedFile(String s) { theObserver.droppedFile(s); }

     private static native void connectToPanel() /*-{
         var listener = new Object();
         listener.droppedFile = function(json) {
             json = unescape( json );
             @com.colabrativ.common.client.DropFileConnector::droppedFile( Ljava/lang/String;)( json );
         };

         $wnd.top.dropFileListener = listener;
     }-*/; 

     /**
       * Add an ondrop attribute to an element in the DOM, for example:
       * ondrop="event.stopPropagation(); droppedFile('element-id', event);"
       *
       * @param element DOM element
       * @param elementId Element Id to be sent to droppedFile routine.
       */
      public static void addOnDrop(Element element, String elementId) {
          element.setAttribute("ondrop",
              "event.stopPropagation(); droppedFile(\'" + elementId + "\', event);");
      }
} 

DropFileConnector Connection

DropFileConnector.connect(
    new DropFileConnector.ClientSideDropFileSupport() {
        public void droppedFile(String response) {
            if (response.startsWith("OKAY:")) {
                String json = response.substring( response.indexOf(": ") + 2); // Remove OKAY:
                determineWhatToDoWithResponse(json);
            }
            else if (response.startsWith("FAIL:")) {
                // Do Nothing?
            }
            else {
                JSONObject responseJSON = (JSONObject) JSONParser.parseStrict( response );
                JSONString boundaryJSON = (JSONString) responseJSON.get( UploadResponse.requestBoundary);

                if (boundaryJSON != null) {
                    String boundary = boundaryJSON.toString();
                    JSONArray filesJSON = (JSONArray) responseJSON.get( UploadResponse.files);

                    if (filesJSON != null) {
                        UploadManager.getInstance().addProgressDialog( boundary, filesJSON);
                    }
                    else {
                        UploadManager.getInstance().update( boundary, responseJSON);
                    }
                }
            }
        }
    }
); 

Example of “ondrop” Attribute in an HTML Table Element

<table ondrop="event.stopPropagation();
               event.preventDefault();
               droppedFile('element-id', event);">

addOnDrop Method

/** Add a ondrop attribute to an element in the DOM, example:
 * ondrop="event.stopPropagation(); droppedFile('element-id', event);"
 *
 * @param element DOM element
 * @param elementID Element Id to be sent to droppedFile joutine.
 */
public static void addOnDrop(Element element, String elementID) {
    element.setAttribute("ondrop",
        "event.stopPropagation(); droppedFile(\'" + elementID + "\', event);");
}

droppedFile Javascript Routine

01  var boundary = null;
02
03  function droppedFile(dropElementID, event) {
04      if( window.top.dropFileListener ) {
05          if (event.dataTransfer) {
06              var url = secureURL + "upload";
07              var token = document.cookie.substring( 26, document.cookie.indexOf("userName") - 12);
08              var files = event.dataTransfer.files;
09              boundary = "BoUnDaRy_._-_._-_._" + Math.floor(999999999999999 * Math.random());
10              var request = new XMLHttpRequest();
11
12              request.upload.onprogress = updateProgress;
13              request.upload.onload 	  = loaded;
14              request.upload.onerror 	  = loadError;
15
16              request.open("POST", url, true); // open asynchronous post
17              request.setRequestHeader("Content-Type", "multipart/form-data; boundary=" + boundary);
18              request.setRequestHeader("Session-Token", token);
19
20              var postContent = "--" + boundary + "\r\n" +
21                  "Content-Disposition: info; name=\"drop-element-id\"\r\n" +
22                  "\r\n" +
23                  dropElementID + "\r\n" +
24                  "--" + boundary;
25
26              for (var i = 0; i < files.length; i++) {
27                  postContent = postContent + "\r\n" +
28                      "Content-Disposition: file; name=\"file\"; filename=\"" + files[i].name + "\"\r\n" +
29                      "Content-Type: application/xml\r\n" +
30                      "File-Length: " + files[i].size + "\r\n" +
31                      "\r\n" +
32                      files[i].getAsBinary() + "\r\n" +
33                      "--" + boundary;
34              }
35              postContent = postContent + "--\r\n";
36
37              request.onreadystatechange = function() {
38                  if(this.readyState == 1) {
39                      var filesJSON = '"files":[';
40                      for (var i = 0; i < files.length; i++) {
41                          filesJSON = filesJSON + '"' + files[i].name + '"';
42                          if (i < files.length - 1) filesJSON = filesJSON + ', ';
43                      }
44                      filesJSON = filesJSON + ']'
45                      window.top.dropFileListener.droppedFile( '{' +
46                          '"requestBoundary": "' + boundary + '", ' + filesJSON + '}');
47                  }
48                  if(this.readyState == 4) {
49                      window.top.dropFileListener.droppedFile( request.responseText );
50                  }
51              }
62
53              request.sendAsBinary(postContent);
54          }
55          else {
56              alert("Your browser does not support file drag and drop. " +
57                      "We recommend that upgrade your browser to one that support HTML5, " +
58                      "such as Mozella's FireFox or Apple's Safari or Google's Chrome.");
59          }
60      }
61      else {
62          alert("window.top.dropFileListener not found!");
63      }
64  }

DropFileConnector class

package com.colabrativ.common.client; 

import com.google.gwt.dom.client.Element; 

public class DropFileConnector {
    /** Used to pass information to the GWT application. Register your implementations with
     *  {@link com.colabrativ.common.client.DropFileConnector#connect( ClientSideDropFileSupport)}
     */
    public interface ClientSideDropFileSupport {
        /** The page calls this method to send dropped file information to application
         *
         * @param json JSON string containing the file name information.
         */
        void droppedFile(String json);
    } 

    /** An observer of drop file events, supplied by the GWT application. */
    static private ClientSideDropFileSupport theObserver; 

    /**
     * Connect the GWT application to the drop file JavaScript. The observer is notified
     * whenever the user drops a file on the application area (id="app-area").
     *
     * @param observer
     */
    public static void connect( ClientSideDropFileSupport observer ) {
        theObserver = observer;
        connectToPanel();
    }

    // This method are "glue" methods that let the simple JNDI call talk to the observer through its interface.
    @SuppressWarnings("all")
    private static void droppedFile(String s) { theObserver.droppedFile(s); }

    private static native void connectToPanel() /*-{
        var listener = new Object();
        listener.droppedFile = function(json) {
            json = unescape( json );
            @com.colabrativ.common.client.DropFileConnector::droppedFile( Ljava/lang/String;)( json );
        };

        $wnd.top.dropFileListener = listener;
    }-*/; 

    /**
     * Add a ondrop attribute to an element in the DOM, example:
     * ondrop="event.stopPropagation(); droppedFile('element-id', event);"
     *
     * @param element DOM element
     * @param elementId Element Id to be sent to droppedFile routine.
     */
    public static void addOnDrop(Element element, String elementId) {
        element.setAttribute("ondrop",
            "event.stopPropagation(); droppedFile(\'" + elementId + "\', event);");
    }
}

DropFileConnector Connection

DropFileConnector.connect
(
    new DropFileConnector.ClientSideDropFileSupport() {
        public void droppedFile(String response) {
            if (response.startsWith("OKAY:")) {
                String json = response.substring( response.indexOf(": ") + 2); // Remove OKAY:
                determineWhatToDoWithResponse(json);
            }
            else if (response.startsWith("FAIL:")) {
                // Do Nothing?
            }
            else {
            	JSONObject responseJSON = (JSONObject) JSONParser.parseStrict( response );
                JSONString boundaryJSON = (JSONString) responseJSON.get( UploadResponse.requestBoundary);

                if (boundaryJSON != null) {
                    String boundary = boundaryJSON.toString();
                    JSONArray filesJSON = (JSONArray) responseJSON.get( UploadResponse.files);

                    if (filesJSON != null) {
                        UploadManager.getInstance().addProgressDialog( boundary, filesJSON);
                    }
                    else {
                        UploadManager.getInstance().update( boundary, responseJSON);
                    }
                }
            }
        }
    }
);