cleanup event listeners for u2f

src/popup/app/accounts/accountsLoginTwoFactorController.js

@@ -7,16 +7,19 @@
         utilsService.initListSectionItemListeners($(document), angular);
 
         var u2f = new U2f(function (data) {
-            $scope.login(data);
+            $timeout(function () {
-            $scope.$apply();
+                $scope.login(data);
+            });
         }, function (error) {
-            toastr.error(error, i18nService.errorsOccurred);
+            $timeout(function () {
-            $scope.$apply();
+                toastr.error(error, i18nService.errorsOccurred);
+            });
         }, function (info) {
-            if (info === 'ready') {
+            $timeout(function () {
-                $scope.u2fReady = true;
+                if (info === 'ready') {
-            }
+                    $scope.u2fReady = true;
-            $scope.$apply();
+                }
+            });
         });
 
         var constants = constantsService;
@@ -62,7 +65,6 @@
             $scope.loginPromise.then(function () {
                 $analytics.eventTrack('Logged In From Two-step');
                 $state.go('tabs.vault', { animation: 'in-slide-left', syncOnLoad: true });
-                u2f = null;
             }, function () {
                 u2f.start();
             });
@@ -87,8 +89,6 @@
         };
 
         $scope.anotherMethod = function () {
-            u2f.stop();
-            u2f = null;
             $state.go('twoFactorMethods', {
                 animation: 'in-slide-up',
                 email: email,
@@ -99,13 +99,17 @@
         };
 
         $scope.back = function () {
-            u2f.stop();
-            u2f = null;
             $state.go('login', {
                 animation: 'out-slide-right'
             });
         };
 
+        $scope.$on('$destroy', function () {
+            u2f.stop();
+            u2f.cleanup();
+            u2f = null;
+        });
+
         function getDefaultProvider(twoFactorProviders) {
             var keys = Object.keys(twoFactorProviders);
             var providerType = null;
@@ -127,6 +131,7 @@
 
         function init() {
             u2f.stop();
+            u2f.cleanup();
 
             $timeout(function () {
                 $('#code').focus();

src/scripts/u2f.js

@@ -6,65 +6,79 @@
     this.connectorLink = document.createElement('a');
 }
 
-U2f.prototype.init = function (data) {
+(function () {
-    var self = this;
+    var thisU2f = null;
 
-    self.connectorLink.href = 'https://vault.bitwarden.com/u2f-connector.html' +
+    U2f.prototype.init = function (data) {
-        '?data=' + this.base64Encode(JSON.stringify(data)) +
+        var self = thisU2f = this;
-        '&parent=' + encodeURIComponent(document.location.href) +
-        '&v=1';
 
-    self.iframe = document.getElementById('u2f_iframe');
+        self.connectorLink.href = 'https://vault.bitwarden.com/u2f-connector.html' +
-    self.iframe.src = self.connectorLink.href;
+            '?data=' + this.base64Encode(JSON.stringify(data)) +
+            '&parent=' + encodeURIComponent(document.location.href) +
+            '&v=1';
 
-    window.addEventListener('message', function (event) {
+        self.iframe = document.getElementById('u2f_iframe');
-        if (!self.validMessage(event)) {
+        self.iframe.src = self.connectorLink.href;
-            self.error('Invalid message.');
+
+        window.addEventListener('message', parseMessage, false);
+    };
+
+    U2f.prototype.validMessage = function (event) {
+        if (!event.origin || event.origin === '' || event.origin !== this.connectorLink.origin) {
+            return false;
+        }
+
+        return event.data.indexOf('success|') === 0 || event.data.indexOf('error|') === 0 || event.data.indexOf('info|') === 0;
+    };
+
+    U2f.prototype.stop = function () {
+        this.sendMessage('stop');
+    };
+
+    U2f.prototype.start = function () {
+        this.sendMessage('start');
+    };
+
+    U2f.prototype.sendMessage = function (message) {
+        var self = this;
+        if (!self.iframe || !self.iframe.src || !self.iframe.contentWindow) {
+            return;
+        }
+
+        self.iframe.contentWindow.postMessage(message, self.iframe.src);
+    };
+
+    U2f.prototype.base64Encode = function (str) {
+        return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function (match, p1) {
+            return String.fromCharCode('0x' + p1);
+        }));
+    };
+
+    U2f.prototype.cleanup = function () {
+        window.removeEventListener('message', parseMessage, false);
+    };
+
+    function parseMessage(event) {
+        if (!thisU2f) {
+            return;
+        }
+
+        if (!thisU2f.validMessage(event)) {
+            thisU2f.error('Invalid message.');
             return;
         }
 
         var parts = event.data.split('|');
-        if (parts[0] === 'success' && self.success) {
+        if (parts[0] === 'success' && thisU2f.success) {
-            self.success(parts[1]);
+            thisU2f.success(parts[1]);
         }
-        else if (parts[0] === 'error' && self.error) {
+        else if (parts[0] === 'error' && thisU2f.error) {
-            self.error(parts[1]);
+            thisU2f.error(parts[1]);
         }
         else if (parts[0] === 'info') {
-            if (self.info) {
+            if (thisU2f.info) {
-                self.info(parts[1]);
+                thisU2f.info(parts[1]);
             }
         }
-    }, false);
+    };
-};
+})();
-
-U2f.prototype.validMessage = function (event) {
-    if (!event.origin || event.origin === '' || event.origin !== this.connectorLink.origin) {
-        return false;
-    }
-
-    return event.data.indexOf('success|') === 0 || event.data.indexOf('error|') === 0 || event.data.indexOf('info|') === 0;
-};
-
-U2f.prototype.stop = function () {
-    this.sendMessage('stop');
-};
-
-U2f.prototype.start = function () {
-    this.sendMessage('start');
-};
-
-U2f.prototype.sendMessage = function (message) {
-    var self = this;
-    if (!self.iframe || !self.iframe.src || !self.iframe.contentWindow) {
-        return;
-    }
-
-    self.iframe.contentWindow.postMessage(message, self.iframe.src);
-};
-
-U2f.prototype.base64Encode = function (str) {
-    return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function (match, p1) {
-        return String.fromCharCode('0x' + p1);
-    }));
-};