feat: Update vapid to 02 draft

fixes: #25

Author: jrconlin

js/common.js

@@ -27,7 +27,7 @@ class MozCommon {
     fromUrlBase64(data) {
         /* return a binary array from a URL safe base64 string
         */
-        return atob((data + "====".substr(data.length % 4))
+        return atob(data
             .replace(/\-/g, "+")
             .replace(/\_/g, "/"));
     }

js/index.html

@@ -22,6 +22,10 @@ <h1>VAPID verification</h1>
     should be readable by many encryption libraries.</p>
 </div>
 <div id="inputs" class="section">
+    <div id="version">
+        <label for="version"><input type="radio" name="version" value="1" checked>VAPID Draft spec-01</label>
+        <label for="version"><input type="radio" name="version" value="2">VAPID Draft spec-02</label>
+    </div>
     <a name="headers"><h2>Headers</h2></a>
     <p>The headers are sent with subscription updates. They provide the
     site information to associate with this feed. PLEASE NOTE: Your private
@@ -35,11 +39,11 @@ <h1>VAPID verification</h1>
         POST update.</div>
     <textarea name="auth" placeholder="Bearer abCDef..."></textarea>
     <label for="crypt">Crypto-Key Header:</label>
-    <div class="description">This is your VAPID public key. This is included
+    <div class="description">This is included
         as part of the <code>Crypto-Key</code> header, which is included
         as part of the subscription POST update. <code>Crypto-Key</code>
         may contain more than one part. Each part should be separated by a
-        comma (",")</div>
+        comma (",") (NOTE: For Draft-02, this header is not required)</div>
     <textarea name="crypt" placeholder="p256ecdsa=abCDef.."></textarea>
     <div class="control">
     <label for="publicKey">Public Key:</label>
@@ -116,6 +120,13 @@ <h3>Claims JSON object:</h3>
     }
 }
 
+function vapid_version() {
+  if (document.getElementById('version').getElementsByTagName('input')[0].checked) {
+    return new VapidToken01();
+  }
+  return new VapidToken02();
+}
+
 function error(ex=null, msg=null, clear=false) {
     let er = document.getElementById("err");
     if (clear) {
@@ -215,6 +226,7 @@ <h3>Claims JSON object:</h3>
 
 function gen(){
     // clear the headers
+    let vapidToken = vapid_version();
     for (h of document.getElementById("inputs").getElementsByTagName("textarea")) {
         h.value = "";
         h.classList.remove("updated");
@@ -229,15 +241,17 @@ <h3>Claims JSON object:</h3>
          console.debug(sc);
          rclaims.innerHTML = sc;
          rclaims.classList.add("updated");
-         vapid.generate_keys().then(x => {
-             vapid.sign(claims)
+         vapidToken.generate_keys().then(x => {
+             vapidToken.sign(claims)
                 .then(k => {
                  let auth = document.getElementsByName("auth")[0];
                  auth.value = k.authorization;
                  auth.classList.add('updated');
                  let crypt = document.getElementsByName("crypt")[0];
-                 crypt.value = k["crypto-key"];
-                 crypt.classList.add('updated');
+                 if (k["crypto-key"]) {
+                   crypt.value = k["crypto-key"];
+                   crypt.classList.add('updated');
+                 }
                  let pk = document.getElementsByName("publicKey")[0];
                  // Public Key is the crypto key minus the 'p256ecdsa='
                  pk.innerHTML = k.publicKey;
@@ -258,6 +272,7 @@ <h3>Claims JSON object:</h3>
 }
 
 function check(){
+  let vapidToken = vapid_version();
     try {
         // clear claims
         for (let item of document
@@ -274,14 +289,14 @@ <h3>Claims JSON object:</h3>
         let token = fetchAuth();
         let public_key = fetchCrypt();
         if ((token == null) && (pubic_key == null)) {
-            if (token == null){
-                error(null, err_strs.enus.BAD_AUTH_HE);
-                return
-            }
-            failure(null, err_strs.enus.BAD_CRYP_HE);
+          if (token == null) {
+            error(null, err_strs.enus.BAD_AUTH_HE);
             return
+          }
+          failure(null, err_strs.enus.BAD_CRYP_HE);
+          return
         }
-        vapid.verify(token, public_key)
+        vapidToken.verify(token, public_key)
             .then(k => success(k))
             .catch(err => error(err, err_strs.enus.BAD_HEADERS));
     } catch (e) {
@@ -293,8 +308,6 @@ <h3>Claims JSON object:</h3>
 document.getElementById("gen").addEventListener("click", gen);
 document.getElementById('vapid_exp').value = parseInt(Date.now()*.001) + 86400;
 
-var vapid = new VapidToken();
-var mzcc = new MozCommon();
 
 </script>
 </body>

js/vapid.js

@@ -14,7 +14,7 @@ try {
     var webCrypto = window.crypto.subtle;
 }
 
-class VapidToken {
+class VapidCore {
     constructor(aud, sub, exp, lang, mzcc) {
         /* Construct a base VAPID token.
          *
@@ -131,16 +131,14 @@ class VapidToken {
             key_ops: ["verify"],
             kty: "EC",
             x: x,
-            y, y
+            y: y,
         };
 
         return webCrypto.importKey('jwk', jwk, 'ECDSA', true, ["verify"])
             .then(k => this._public_key = k)
     }
 
-
-
-    sign(claims) {
+    _sign(claims) {
         /* Sign a claims object and return the headers that can be used to
          * decrypt the string.
          *
@@ -186,9 +184,8 @@ class VapidToken {
                 return this.export_public_raw()
                     .then( pubKey => {
                         return {
-                            authorization: "WebPush " + content + "." + sig,
-                            "crypto-key": "p256ecdsa=" + pubKey,
-                            publicKey: pubKey,
+                            jwt: content + "." + sig,
+                            pubkey: pubKey,
                         }
                     })
             })
@@ -197,7 +194,7 @@ class VapidToken {
             })
     }
 
-    verify(token, public_key=null) {
+    _verify(token) {
         /* Verify a VAPID token.
          *
          * Token is the Authorization Header, Public Key is the Crypto-Key
@@ -207,33 +204,8 @@ class VapidToken {
          */
 
         // Ideally, just the bearer token, Cheat a little to be nice to the dev.
-        scheme = token.toLowerCase().split(" ")[0]
-        if (scheme == "bearer" || scheme == "webpush") {
-            token = token.split(" ")[1];
-        }
-
-        // Again, ideally, just the p256ecdsa token.
-        if (public_key != null) {
-
-            if (public_key.search('p256ecdsa') > -1) {
-                let sc = /p256ecdsa=([^;,]+)/i;
-                public_key = sc.exec(public_key)[1];
-            }
-
-            // If there's no public key already defined, load the public_key
-            // and try again.
-            return this.import_public_raw(public_key)
-                .then(key => {
-                    this._public_key = key;
-                    return this.verify(token);
-                })
-                .catch(err => {
-                    console.error("Verify error", err);
-                    throw err;
-                });
-        }
         if (this._public_key == "") {
-            throw new Error(this.lang.errs.ERR_NO_KEYS);
+          throw new Error(this.lang.errs.ERR_NO_KEYS);
         }
 
         let alg = {name: "ECDSA", namedCurve: "P-256",
@@ -316,3 +288,89 @@ class VapidToken {
         return webCrypto.verify(alg, this._public_key, vsig, t2v);
     }
 }
+
+class VapidToken01 extends VapidCore {
+
+    sign(claims) {
+        return this._sign(claims)
+          .then(elements=> {
+              return {
+                  authorization: "WebPush " + elements.jwt,
+                  "crypto-key": "p256ecdsa=" + elements.pubkey,
+                  publicKey: elements.pubkey,
+              }
+            }
+          )
+    }
+
+    verify(token, public_key) {
+      let scheme = token.toLowerCase().split(" ")[0]
+      if (scheme == "bearer" || scheme == "webpush") {
+        token = token.split(" ")[1];
+      }
+
+      // Again, ideally, just the p256ecdsa token.
+      if (public_key != null) {
+
+        if (public_key.search('p256ecdsa') > -1) {
+          let sc = /p256ecdsa=([^;,]+)/i;
+          public_key = sc.exec(public_key)[1];
+        }
+
+        // If there's no public key already defined, load the public_key
+        // and try again.
+        return this.import_public_raw(public_key)
+          .then(key => {
+            this._public_key = key;
+            return this._verify(token);
+          })
+          .catch(err => {
+            console.error("Verify error", err);
+            throw err;
+          });
+      }
+
+      return this._verify(token)
+    }
+}
+
+class VapidToken02 extends VapidCore {
+
+    sign(claims) {
+        return this._sign(claims)
+          .then(elements=> {
+              return {
+                  authorization: "vapid t=" + elements.jwt + ",k=" + elements.pubkey,
+                  publicKey: elements.pubkey,
+              }
+            }
+          )
+    }
+
+    verify(token) {
+      let scheme = token.toLowerCase().split(" ")[0]
+      if (scheme == "vapid") {
+        token = token.split(" ")[1];
+      }
+      let vals = {};
+      let elements = token.split(",");
+      for (let element of elements) {
+          let label = element.slice(0,2);
+          if (label == "t=") {
+              vals.t = element.slice(2);
+          }
+          if (label == "k=") {
+              vals.k = element.slice(2);
+          }
+      }
+      return this.import_public_raw(vals.k)
+        .then(key => {
+          this._public_key = key;
+          return this._verify(vals.t);
+        })
+        .catch(err => {
+          console.error("Verify error", err);
+          throw err;
+        });
+    }
+}