Unreviewed, add yet another demo page for a WebCrypto API blog post
authorjiewen_tan@apple.com <jiewen_tan@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 20 Jul 2017 16:42:39 +0000 (16:42 +0000)
committerjiewen_tan@apple.com <jiewen_tan@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 20 Jul 2017 16:42:39 +0000 (16:42 +0000)
* demos/webcrypto/aes-gcm.html:
* demos/webcrypto/alice.png: Added.
* demos/webcrypto/bob.png: Added.
* demos/webcrypto/ecdh.html: Added.

git-svn-id: http://svn.webkit.org/repository/webkit/trunk@219690 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Websites/webkit.org/ChangeLog
Websites/webkit.org/demos/webcrypto/aes-gcm.html
Websites/webkit.org/demos/webcrypto/alice.png [new file with mode: 0644]
Websites/webkit.org/demos/webcrypto/bob.png [new file with mode: 0644]
Websites/webkit.org/demos/webcrypto/ecdh.html [new file with mode: 0644]

index e901a66..d89256b 100644 (file)
@@ -1,5 +1,14 @@
 2017-07-20  Jiewen Tan  <jiewen_tan@apple.com>
 
+        Unreviewed, add yet another demo page for a WebCrypto API blog post
+
+        * demos/webcrypto/aes-gcm.html:
+        * demos/webcrypto/alice.png: Added.
+        * demos/webcrypto/bob.png: Added.
+        * demos/webcrypto/ecdh.html: Added.
+
+2017-07-20  Jiewen Tan  <jiewen_tan@apple.com>
+
         Unreviewed, add another demo page for a WebCrypto API blog post
 
         * demos/webcrypto/aes-gcm.html: Added.
index d9cb398..a60a094 100644 (file)
@@ -50,7 +50,7 @@
 </head>
 <body>
     <h1>AES-GCM</h1>
-    <p>Click the corresponding buttons to do AES-CBC/GCM encryption/decryption. In the middle, try modify the cipher text to see how AES-CBC/GCM responds.</p>
+    <p>Click the corresponding buttons to do AES-CBC/GCM encryption/decryption. In the middle, try to modify the cipher text to see how AES-CBC/GCM responds.</p>
     <div>
         Plain Text: <input type="text" id="plainTextGCM" value="Hello, World!">
         <button type="button" onclick="AES_GCM_encrypt()">encryptGCM</button>
diff --git a/Websites/webkit.org/demos/webcrypto/alice.png b/Websites/webkit.org/demos/webcrypto/alice.png
new file mode 100644 (file)
index 0000000..5bddc7a
Binary files /dev/null and b/Websites/webkit.org/demos/webcrypto/alice.png differ
diff --git a/Websites/webkit.org/demos/webcrypto/bob.png b/Websites/webkit.org/demos/webcrypto/bob.png
new file mode 100644 (file)
index 0000000..5a3c2ee
Binary files /dev/null and b/Websites/webkit.org/demos/webcrypto/bob.png differ
diff --git a/Websites/webkit.org/demos/webcrypto/ecdh.html b/Websites/webkit.org/demos/webcrypto/ecdh.html
new file mode 100644 (file)
index 0000000..8dcd0ab
--- /dev/null
@@ -0,0 +1,180 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>WebCrypto API Demo: ECDH</title>
+    <style>
+    table, tr, th
+     {
+         font-weight: normal;
+     }
+    tr
+    {
+        text-align: left;
+    }
+    .th1
+    {
+        overflow: hidden;
+        white-space: nowrap;
+    }
+    </style>
+    <script type="text/javascript" src="common.js"></script>
+    <script type="text/javascript">
+    var rsaKeyGen = {
+        name: "RSA-OAEP",
+        // RsaKeyGenParams
+        modulusLength: 2048,
+        publicExponent: new Uint8Array([0x01, 0x00, 0x01]),  // Equivalent to 65537
+        hash: "sha-256"
+    };
+    var ecKeys = { a: null, b: null };
+    function AES_generate()
+    {
+        crypto.subtle.generateKey({ name: "aes-cbc", length: 128 }, true, ["decrypt", "encrypt"]).then(function(key) {
+            return crypto.subtle.exportKey("raw", key);
+        }, failAndLog).then(function(key) {
+            aesKey = key;
+            document.getElementById("aesKey").innerHTML = bytesToHexString(key);
+        }, failAndLog);
+    }
+    function RSA_generate()
+    {
+        crypto.subtle.generateKey(rsaKeyGen, true, ["decrypt", "encrypt"]).then(function(keyPair) {
+            rsaKeyPair = keyPair;
+            document.getElementById("rsaKey").innerHTML = "Done!";
+        }, failAndLog);
+    }
+    function importKey(id)
+    {
+        document.getElementById(id).innerHTML = "Done!";
+    }
+    function RSA_encrypt()
+    {
+        crypto.subtle.encrypt("rsa-oaep", rsaKeyPair.publicKey, aesKey).then(function(cipherText) {
+            rsaCipher = cipherText;
+            document.getElementById("rsaEncrypt").innerHTML = bytesToHexString(cipherText);
+        }, failAndLog);
+    }
+    function RSA_decrypt()
+    {
+        crypto.subtle.decrypt("rsa-oaep", rsaKeyPair.privateKey, rsaCipher).then(function(plainText) {
+            document.getElementById("rsaDecrypt").innerHTML = bytesToHexString(plainText);
+        }, failAndLog);
+    }
+    function EC_generate(id)
+    {
+        crypto.subtle.generateKey({ name: "ECDH", namedCurve: "P-256"}, true, ["deriveBits"]).then(function(keyPair) {
+            if (id == 'A')
+                ecKeys.a = keyPair;
+            if (id == 'B')
+                ecKeys.b = keyPair;
+            document.getElementById("ecKey" + id).innerHTML = "Done!";
+        }, failAndLog);
+    }
+    function EC_sharedSecret(id)
+    {
+        if (id == 'A')
+            crypto.subtle.deriveBits({ name:"ECDH", public:ecKeys.b.publicKey }, ecKeys.a.privateKey, 128).then(function(result) {
+                document.getElementById("ecSharedSecret" + id).innerHTML = bytesToHexString(result);
+            }, failAndLog);
+        if (id == 'B')
+            crypto.subtle.deriveBits({ name:"ECDH", public:ecKeys.a.publicKey }, ecKeys.b.privateKey, 128).then(function(result) {
+                document.getElementById("ecSharedSecret" + id).innerHTML = bytesToHexString(result);
+            }, failAndLog);
+    }
+    </script>
+</head>
+<body>
+    <h1>ECDH</h1>
+    <p>Click the following buttons step by step to get a rough feeling of how ECDH differs from RSA secret key exchange. The boy is called Bob and the girl is called Alice as they always are. :)</p>
+    <p>RSA secret key exchange:</p>
+    <table>
+        <tr>
+            <th></th>
+            <th>
+                <img src="./bob.png" style="width:150px;height:150px;">
+            </th>
+            <th>
+                <img src="./alice.png" style="width:200px;height:150px;">
+            </th>
+        </tr>
+        <tr>
+            <th class="th1">Step 1:</th>
+            <th>
+                <button type="button" onclick="RSA_generate()">generateKeyRSA</button>
+                <div id="rsaKey"></div>
+            </th>
+            <th>
+                <button type="button" onclick="AES_generate()">generateKeyAES</button>
+                <div id="aesKey"></div>
+            </th>
+        </tr>
+        <tr>
+            <th>Step 2:</th>
+            <td>
+                wait
+            </td>
+            <td>
+                <button type="button" onclick="importKey('importKey1')">getBobsPublicKey</button>
+                <div id="importKey1"></div>
+            </td>
+        </tr>
+        <tr>
+            <th>Step 3:</th>
+            <td>
+                wait
+            </td>
+            <td>
+                <button type="button" onclick="RSA_encrypt()">encryptRSA</button>
+                <div id="rsaEncrypt">
+            </td>
+        </tr>
+        <tr>
+            <th>Step 4:</th>
+            <td>
+                <button type="button" onclick="RSA_decrypt()" class="inner">decryptRSA</button>
+                <div id="rsaDecrypt" class="inner">
+            </td>
+            <td>
+                wait
+            </td>
+        </tr>
+        <tr>
+            <th>ECDH:</th>
+        </tr>
+        <tr>
+            <th>Step 1:</th>
+            <th>
+                <button type="button" onclick="EC_generate('B')">generateKeyEC</button>
+                <div id="ecKeyB"></div>
+            </th>
+            <th>
+                <button type="button" onclick="EC_generate('A')">generateKeyEC</button>
+                <div id="ecKeyA"></div>
+            </th>
+        </tr>
+        <tr>
+            <th>Step 2:</th>
+            <td>
+                <button type="button" onclick="importKey('importKey2')">getAlicesPublicKey</button>
+                <div id="importKey2"></div>
+            </td>
+            <td>
+                <button type="button" onclick="importKey('importKey3')">getBobsPublicKey</button>
+                <div id="importKey3"></div>
+            </td>
+        </tr>
+        <tr>
+            <th>Step 3:</th>
+            <td>
+                <button type="button" onclick="EC_sharedSecret('B')">computeSharedSecret</button>
+                <div id="ecSharedSecretB"></div>
+            </td>
+            <td>
+                <button type="button" onclick="EC_sharedSecret('A')">computeSharedSecret</button>
+                <div id="ecSharedSecretA"></div>
+            </td>
+        </tr>
+    </table>
+</body>
+</html>