Feed pushManger with Uint8Array VapidKey (#2809)

* Feed pushManger with Uint8Array VapidKey

Since Chrome <= 75 doesn't support base64-encoded VAPID key. For backward compatibility, VAPID key submitted to pushManager#subscribe must be of type Uint8Array.

Author: zwu52

packages/messaging/src/core/token-management.test.ts

@@ -29,7 +29,7 @@ import * as apiModule from './api';
 import { Stub } from '../testing/sinon-types';
 import { getFakeTokenDetails } from '../testing/fakes/token-details';
 import { TokenDetails, SubscriptionOptions } from '../interfaces/token-details';
-import { arrayToBase64 } from '../helpers/array-to-base64';
+import { arrayToBase64} from '../helpers/array-base64-translator';
 
 describe('Token Management', () => {
   let tokenDetails: TokenDetails;

packages/messaging/src/core/token-management.ts

@@ -19,7 +19,7 @@ import { dbGet, dbSet, dbRemove } from '../helpers/idb-manager';
 import { FirebaseInternalDependencies } from '../interfaces/internal-dependencies';
 import { TokenDetails, SubscriptionOptions } from '../interfaces/token-details';
 import { requestUpdateToken, requestGetToken, requestDeleteToken } from './api';
-import { arrayToBase64 } from '../helpers/array-to-base64';
+import { arrayToBase64, base64ToArray} from '../helpers/array-base64-translator';
 import { ERROR_FACTORY, ErrorCode } from '../util/errors';
 
 /** UpdateRegistration will be called once every week. */
@@ -158,7 +158,9 @@ async function getPushSubscription(
   }
   return swRegistration.pushManager.subscribe({
     userVisibleOnly: true,
-    applicationServerKey: vapidKey
+    // Chrome <= 75 doesn't support base64-encoded VAPID key. For backward compatibility, VAPID key
+    // submitted to pushManager#subscribe must be of type Uint8Array.
+    applicationServerKey: base64ToArray(vapidKey)
   });
 }
 

packages/messaging/src/helpers/array-base64-translator.test.ts

@@ -0,0 +1,75 @@
+/**
+ * @license
+ * Copyright 2017 Google Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { arrayToBase64, base64ToArray } from './array-base64-translator';
+import { expect } from 'chai';
+import '../testing/setup';
+
+// prettier-ignore
+const TEST_P256_ARRAY = new Uint8Array([
+  4, 181, 98, 240, 48, 62, 75, 119, 193, 227, 154, 69, 250, 216, 53, 110,
+  157, 120, 62, 76, 213, 249, 11, 62, 12, 19, 149, 36, 5, 82, 140, 37, 141,
+  134, 132, 98, 87, 152, 175, 98, 53, 83, 196, 242, 202, 155, 19, 173, 157,
+  216, 45, 147, 20, 12, 151, 160, 147, 159, 205, 219, 75, 133, 156, 129, 152
+]);
+const TEST_P256_BASE64 = 'BLVi8DA-S3fB45pF-tg1bp14PkzV-Qs-DBOVJAVSjCWNhoRi' +
+  'V5ivYjVTxPLKmxOtndgtkxQMl6CTn83bS4WcgZg';
+
+// prettier-ignore
+const TEST_AUTH_ARRAY = new Uint8Array([
+  255, 237, 107, 177, 171, 78, 84, 131, 221, 231, 87, 188, 22, 232, 71, 15
+]);
+const TEST_AUTH_BASE64 = '_-1rsatOVIPd51e8FuhHDw';
+
+// prettier-ignore
+const TEST_VAPID_ARRAY = new Uint8Array([4, 48, 191, 217, 11, 218, 74, 124, 103, 143, 63, 182, 203,
+  91, 0, 68, 221, 68, 172, 74, 89, 133, 198, 252, 145, 164, 136, 243, 186, 75, 198, 32, 45, 64, 240,
+  120, 141, 173, 240, 131, 253, 83, 209, 193, 129, 50, 155, 126, 189, 23, 127, 232, 109, 75, 101,
+  229, 92, 85, 137, 80, 121, 35, 229, 118, 207]);
+const TEST_VAPID_BASE64 = 'BDC_2QvaSnxnjz-2y1sARN1ErEpZhcb8kaSI87pLxiAtQPB4ja3wg_1T0cGBMpt' +
+  '-vRd_6G1LZeVcVYlQeSPlds8';
+
+
+describe('arrayToBase64', () => {
+  it('array to base64 translation succeed', () => {
+    expect(arrayToBase64(TEST_P256_ARRAY)).to.equal(TEST_P256_BASE64);
+    expect(arrayToBase64(TEST_AUTH_ARRAY)).to.equal(TEST_AUTH_BASE64);
+    expect(arrayToBase64(TEST_VAPID_ARRAY)).to.equal(TEST_VAPID_BASE64);
+  });
+});
+
+describe('base64ToArray', () => {
+  it('base64 to array translation succeed', () => {
+    expect(isEqual(base64ToArray(TEST_P256_BASE64), TEST_P256_ARRAY)).to.equal(true);
+    expect(isEqual(base64ToArray(TEST_AUTH_BASE64), TEST_AUTH_ARRAY)).to.equal(true);
+    expect(isEqual(base64ToArray(TEST_VAPID_BASE64), TEST_VAPID_ARRAY)).to.equal(true);
+  });
+});
+
+function isEqual(a: Uint8Array, b: Uint8Array): boolean {
+  if (a.length !== b.length) {
+    return false;
+  }
+
+  for (let i = 0; i < a.length; i++) {
+    if (a[i] !== b[i]) {
+      return false;
+    }
+  }
+
+  return true;
+}

packages/messaging/src/helpers/array-to-base64.ts renamed to packages/messaging/src/helpers/array-base64-translator.ts

@@ -23,3 +23,18 @@ export function arrayToBase64(array: Uint8Array | ArrayBuffer): string {
     .replace(/\+/g, '-')
     .replace(/\//g, '_');
 }
+
+export function base64ToArray(base64String: string): Uint8Array {
+  const padding = '='.repeat((4 - (base64String.length % 4)) % 4);
+  const base64 = (base64String + padding)
+    .replace(/\-/g, '+')
+    .replace(/_/g, '/');
+
+  const rawData = atob(base64);
+  const outputArray = new Uint8Array(rawData.length);
+
+  for (let i = 0; i < rawData.length; ++i) {
+    outputArray[i] = rawData.charCodeAt(i);
+  }
+  return outputArray;
+}

packages/messaging/src/helpers/array-to-base64.test.ts

@@ -26,6 +26,7 @@ import {
 } from './migrate-old-database';
 import { FakePushSubscription } from '../testing/fakes/service-worker';
 import { getFakeTokenDetails } from '../testing/fakes/token-details';
+import { base64ToArray} from './array-base64-translator';
 
 describe('migrateOldDb', () => {
   it("does nothing if old DB didn't exist", async () => {
@@ -49,7 +50,7 @@ describe('migrateOldDb', () => {
       const v2TokenDetails: V2TokenDetails = {
         fcmToken: 'token-value',
         swScope: '/scope-value',
-        vapidKey: base64ToArrayBuffer('dmFwaWQta2V5LXZhbHVl'),
+        vapidKey: base64ToArray('dmFwaWQta2V5LXZhbHVl'),
         fcmSenderId: '1234567890',
         fcmPushSet: '7654321',
         auth: 'YXV0aC12YWx1ZQ',
@@ -87,7 +88,7 @@ describe('migrateOldDb', () => {
       const v2TokenDetails: V2TokenDetails = {
         fcmToken: 'token-value',
         swScope: '/scope-value',
-        vapidKey: base64ToArrayBuffer('dmFwaWQta2V5LXZhbHVl'),
+        vapidKey: base64ToArray('dmFwaWQta2V5LXZhbHVl'),
         fcmSenderId: '1234567890',
         fcmPushSet: '7654321',
         subscription: new FakePushSubscription()
@@ -105,11 +106,11 @@ describe('migrateOldDb', () => {
         createTime: 1234567890,
         fcmToken: 'token-value',
         swScope: '/scope-value',
-        vapidKey: base64ToArrayBuffer('dmFwaWQta2V5LXZhbHVl'),
+        vapidKey: base64ToArray('dmFwaWQta2V5LXZhbHVl'),
         fcmSenderId: '1234567890',
         fcmPushSet: '7654321',
-        auth: base64ToArrayBuffer('YXV0aC12YWx1ZQ'),
-        p256dh: base64ToArrayBuffer('cDI1Ni12YWx1ZQ'),
+        auth: base64ToArray('YXV0aC12YWx1ZQ'),
+        p256dh: base64ToArray('cDI1Ni12YWx1ZQ'),
         endpoint: 'https://example.org'
       };
 
@@ -143,10 +144,10 @@ describe('migrateOldDb', () => {
         createTime: 1234567890,
         fcmToken: 'token-value',
         swScope: '/scope-value',
-        vapidKey: base64ToArrayBuffer('dmFwaWQta2V5LXZhbHVl'),
+        vapidKey: base64ToArray('dmFwaWQta2V5LXZhbHVl'),
         fcmSenderId: '1234567890',
-        auth: base64ToArrayBuffer('YXV0aC12YWx1ZQ'),
-        p256dh: base64ToArrayBuffer('cDI1Ni12YWx1ZQ'),
+        auth: base64ToArray('YXV0aC12YWx1ZQ'),
+        p256dh: base64ToArray('cDI1Ni12YWx1ZQ'),
         endpoint: 'https://example.org'
       };
 
@@ -198,19 +199,4 @@ async function put(version: number, value: object): Promise<void> {
   } finally {
     db.close();
   }
-}
-
-function base64ToArrayBuffer(base64String: string): Uint8Array {
-  const padding = '='.repeat((4 - (base64String.length % 4)) % 4);
-  const base64 = (base64String + padding)
-    .replace(/\-/g, '+')
-    .replace(/_/g, '/');
-
-  const rawData = atob(base64);
-  const outputArray = new Uint8Array(rawData.length);
-
-  for (let i = 0; i < rawData.length; ++i) {
-    outputArray[i] = rawData.charCodeAt(i);
-  }
-  return outputArray;
-}
+}

packages/messaging/src/helpers/migrate-old-database.test.ts

@@ -17,7 +17,7 @@
 
 import { openDb, deleteDb } from 'idb';
 import { TokenDetails } from '../interfaces/token-details';
-import { arrayToBase64 } from './array-to-base64';
+import { arrayToBase64 } from './array-base64-translator';
 
 // https://github.com/firebase/firebase-js-sdk/blob/7857c212f944a2a9eb421fd4cb7370181bc034b5/packages/messaging/src/interfaces/token-details.ts
 export interface V2TokenDetails {

packages/messaging/src/helpers/migrate-old-database.ts

@@ -17,7 +17,7 @@
 
 import { TokenDetails } from '../../interfaces/token-details';
 import { FakePushSubscription } from './service-worker';
-import { arrayToBase64 } from '../../helpers/array-to-base64';
+import { arrayToBase64 } from '../../helpers/array-base64-translator';
 
 export function getFakeTokenDetails(): TokenDetails {
   const subscription = new FakePushSubscription();