use webcrypto-liner to support Safari 10

frontend/src/common.js

@@ -1,35 +1,30 @@
-window.Raven = require('raven-js');
+const testPilotGA = require('testpilot-ga');
+const { sendEvent } = require('./utils');
+const Raven = require('raven-js');
+
 if (navigator.doNotTrack !== '1' && window.RAVEN_CONFIG) {
-  window.Raven.config(window.SENTRY_ID, window.RAVEN_CONFIG).install();
+  Raven.config(window.SENTRY_ID, window.RAVEN_CONFIG).install();
 }
 
-const testPilotGA = require('testpilot-ga');
-const { gcmCompliant, sendEvent } = require('./utils');
-window.analytics = new testPilotGA({
+const analytics = new testPilotGA({
   an: 'Firefox Send',
   ds: 'web',
   tid: window.GOOGLE_ANALYTICS_ID
 });
 
-const isSender = !location.pathname.includes('/download');
-const ec = isSender ? 'sender' : 'recipient';
 const ua = navigator.userAgent.toLowerCase();
-
-gcmCompliant().catch(err => {
-  sendEvent(ec, 'unsupported', {
-    cd6: err
-  }).then(() => {
-    location.replace('/unsupported/gcm');
-  });
-});
-
 if (
   ua.indexOf('firefox') > -1 &&
   parseInt(ua.match(/firefox\/*([^\n\r]*)\./)[1], 10) <= 49
 ) {
+  const isSender = !location.pathname.includes('/download');
+  const ec = isSender ? 'sender' : 'recipient';
   sendEvent(ec, 'unsupported', {
     cd6: new Error('Firefox is outdated.')
   }).then(() => {
     location.replace('/unsupported/outdated');
   });
 }
+
+window.analytics = analytics;
+window.Raven = Raven;

frontend/src/download.js

@@ -1,6 +1,6 @@
 require('./common');
 const FileReceiver = require('./fileReceiver');
-const { notify, findMetric, sendEvent } = require('./utils');
+const { notify, findMetric, sendEvent, gcmCompliant } = require('./utils');
 const bytes = require('bytes');
 const Storage = require('./storage');
 const storage = new Storage(localStorage);
@@ -11,6 +11,8 @@ require('jquery-circle-progress');
 const Raven = window.Raven;
 
 $(document).ready(function() {
+  gcmCompliant()
+    .then(function() {
       //link back to homepage
       $('.send-new').attr('href', window.location.origin);
 
@@ -178,4 +180,12 @@ $(document).ready(function() {
             return Promise.reject(err);
           });
       }
+    })
+    .catch(err => {
+      sendEvent('sender', 'unsupported', {
+        cd6: err
+      }).then(() => {
+        location.replace('/unsupported/gcm');
+      });
+    });
 });

frontend/src/upload.js

@@ -1,7 +1,13 @@
 /* global MAXFILESIZE EXPIRE_SECONDS */
 require('./common');
 const FileSender = require('./fileSender');
-const { notify, findMetric, sendEvent, ONE_DAY_IN_MS } = require('./utils');
+const {
+  notify,
+  gcmCompliant,
+  findMetric,
+  sendEvent,
+  ONE_DAY_IN_MS
+} = require('./utils');
 const bytes = require('bytes');
 const Storage = require('./storage');
 const storage = new Storage(localStorage);
@@ -19,6 +25,8 @@ if (storage.has('referrer')) {
 }
 
 $(document).ready(function() {
+  gcmCompliant()
+    .then(function() {
       $('#page-one').removeAttr('hidden');
       $('#file-upload').change(onUpload);
 
@@ -130,7 +138,9 @@ $(document).ready(function() {
             event.originalEvent.dataTransfer.files[0].size === 0
           ) {
             $('.upload-window').removeClass('ondrag');
-        document.l10n.formatValue('uploadPageMultipleFilesAlert').then(str => {
+            document.l10n
+              .formatValue('uploadPageMultipleFilesAlert')
+              .then(str => {
                 alert(str);
               });
             return;
@@ -176,7 +186,9 @@ $(document).ready(function() {
           const percent = progress[0] / progress[1];
           // update progress bar
           $('#ul-progress').circleProgress('value', percent);
-      $('#ul-progress').circleProgress().on('circle-animation-end', function() {
+          $('#ul-progress')
+            .circleProgress()
+            .on('circle-animation-end', function() {
               $('.percent-number').text(`${Math.floor(percent * 100)}`);
             });
           $('.progress-text').text(
@@ -351,7 +363,10 @@ $(document).ready(function() {
         const url = file.url.trim() + `#${file.secretKey}`.trim();
 
         $('#link').attr('value', url);
-    $('#copy-text').attr('data-l10n-args', '{"filename": "' + file.name + '"}');
+        $('#copy-text').attr(
+          'data-l10n-args',
+          '{"filename": "' + file.name + '"}'
+        );
         $('#copy-text').attr('data-l10n-id', 'copyUrlFormLabelWithName');
         $popupText.attr('tabindex', '-1');
 
@@ -534,4 +549,12 @@ $(document).ready(function() {
           $('#file-list').removeAttr('hidden');
         }
       }
+    })
+    .catch(err => {
+      sendEvent('sender', 'unsupported', {
+        cd6: err
+      }).then(() => {
+        location.replace('/unsupported/gcm');
+      });
+    });
 });

frontend/src/utils.js

@@ -60,16 +60,22 @@ function gcmCompliant() {
           )
           .then(() => {
             return Promise.resolve();
-          })
-          .catch(err => {
-            return Promise.reject();
           });
       })
       .catch(err => {
-        return Promise.reject();
+        return loadShim();
       });
   } catch (err) {
-    return Promise.reject();
+    return loadShim();
+  }
+  function loadShim() {
+    return new Promise((resolve, reject) => {
+      const shim = document.createElement('script');
+      shim.src = '/cryptofill.js';
+      shim.addEventListener('load', resolve);
+      shim.addEventListener('error', reject);
+      document.head.appendChild(shim);
+    });
   }
 }
 

package-lock.json

@@ -4,6 +4,12 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "@types/node": {
+      "version": "7.0.39",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-7.0.39.tgz",
+      "integrity": "sha512-KQHAZeVsk4UIT9XaR6cn4WpHZzimK6UBD1UomQKfQQFmTlUHaNBzeuov+TM4+kigLO0IJt4I5OOsshcCyA9gSA==",
+      "dev": true
+    },
     "accepts": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.3.tgz",
@@ -181,6 +187,12 @@
       "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
       "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY="
     },
+    "asmcrypto.js": {
+      "version": "0.0.11",
+      "resolved": "https://registry.npmjs.org/asmcrypto.js/-/asmcrypto.js-0.0.11.tgz",
+      "integrity": "sha1-dLshuq/Z3OFoTcBvFShoOzUMHKA=",
+      "dev": true
+    },
     "asn1.js": {
       "version": "4.9.1",
       "resolved": "https://registry.npmjs.org/asn1.js/-/asn1.js-4.9.1.tgz",
@@ -5254,6 +5266,12 @@
       "integrity": "sha1-OTvnMKlEb9Hq1tpZoBQwjzbCics=",
       "dev": true
     },
+    "tslib": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.7.1.tgz",
+      "integrity": "sha1-vIAEFkaRkjp5/oN4u+s9ogF1OOw=",
+      "dev": true
+    },
     "tty-browserify": {
       "version": "0.0.0",
       "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
@@ -5290,6 +5308,12 @@
       "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=",
       "dev": true
     },
+    "typescript": {
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.3.4.tgz",
+      "integrity": "sha1-PTgyGCgjHkNPKHUUlZw3qCtin0I=",
+      "dev": true
+    },
     "uglify-js": {
       "version": "2.8.29",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.8.29.tgz",
@@ -5440,6 +5464,37 @@
         "indexof": "0.0.1"
       }
     },
+    "webcrypto-core": {
+      "version": "0.1.16",
+      "resolved": "https://registry.npmjs.org/webcrypto-core/-/webcrypto-core-0.1.16.tgz",
+      "integrity": "sha1-3kkUtZFI23Moe8T45hz0+y9W8CA=",
+      "dev": true,
+      "requires": {
+        "@types/node": "6.0.85",
+        "tslib": "1.7.1"
+      },
+      "dependencies": {
+        "@types/node": {
+          "version": "6.0.85",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-6.0.85.tgz",
+          "integrity": "sha512-6qLZpfQFO/g5Ns2e7RsW6brk0Q6Xzwiw7kVVU/XiQNOiJXSojhX76GP457PBYIsNMH2WfcGgcnZB4awFDHrwpA==",
+          "dev": true
+        }
+      }
+    },
+    "webcrypto-liner": {
+      "version": "0.1.25",
+      "resolved": "https://registry.npmjs.org/webcrypto-liner/-/webcrypto-liner-0.1.25.tgz",
+      "integrity": "sha512-p/wtjIvs10nZvruEJlglTf5Qjb9W/sDvfEFuw5RjM+axGaXj8mBGF7tFJb5sjVbSTqv1gsxktYWzG/PZfn2A8Q==",
+      "dev": true,
+      "requires": {
+        "@types/node": "7.0.39",
+        "asmcrypto.js": "0.0.11",
+        "elliptic": "6.4.0",
+        "typescript": "2.3.4",
+        "webcrypto-core": "0.1.16"
+      }
+    },
     "which": {
       "version": "1.2.14",
       "resolved": "https://registry.npmjs.org/which/-/which-1.2.14.tgz",

package.json

@@ -17,6 +17,7 @@
     "redis": "^2.7.1"
   },
   "devDependencies": {
+    "asmcrypto.js": "0.0.11",
     "babel-polyfill": "^6.23.0",
     "browserify": "^14.4.0",
     "eslint": "^4.3.0",
@@ -38,7 +39,8 @@
     "stylelint-config-standard": "^17.0.0",
     "supertest": "^3.0.0",
     "testpilot-ga": "^0.3.0",
-    "uglifyify": "^4.0.3"
+    "uglifyify": "^4.0.3",
+    "webcrypto-liner": "^0.1.25"
   },
   "engines": {
     "node": ">=8.0.0"