Use WinChan on popup.callback again + adding origin check to keep it secure (#669)

* Use WinChan on popup.callback again + adding origin check to keep it secure

* adding tests for getLocationFromUrl

* handling IE11 edge case inside auth0.js

* remove only

* more info about ie bug

* no undefined undefined

Author: luisrudge

src/helper/object.js

@@ -4,7 +4,6 @@
 
 var assert = require('./assert');
 var objectAssign = require('./object-assign');
-var windowHelper = require('./window');
 
 function pick(object, keys) {
   return keys.reduce(function(prev, key) {
@@ -118,16 +117,32 @@ function toCamelCase(object, exceptions) {
   }, {});
 }
 
+function getLocationFromUrl(href) {
+  var match = href.match(
+    /^(https?:)\/\/(([^:/?#]*)(?::([0-9]+))?)([/]{0,1}[^?#]*)(\?[^#]*|)(#.*|)$/
+  );
+  return (
+    match && {
+      href: href,
+      protocol: match[1],
+      host: match[2],
+      hostname: match[3],
+      port: match[4],
+      pathname: match[5],
+      search: match[6],
+      hash: match[7]
+    }
+  );
+}
+
 function getOriginFromUrl(url) {
   if (!url) {
     return undefined;
   }
-  var doc = windowHelper.getDocument();
-  var anchor = doc.createElement('a');
-  anchor.href = url;
-  var origin = anchor.protocol + '//' + anchor.hostname;
-  if (anchor.port) {
-    origin += ':' + anchor.port;
+  var parsed = getLocationFromUrl(url);
+  var origin = parsed.protocol + '//' + parsed.hostname;
+  if (parsed.port) {
+    origin += ':' + parsed.port;
   }
   return origin;
 }
@@ -140,5 +155,6 @@ module.exports = {
   pick: pick,
   getKeysNotIn: getKeysNotIn,
   extend: extend,
-  getOriginFromUrl: getOriginFromUrl
+  getOriginFromUrl: getOriginFromUrl,
+  getLocationFromUrl: getLocationFromUrl
 };

src/helper/window.js

@@ -1,3 +1,5 @@
+var objectHelper = require('./object');
+
 function redirect(url) {
   global.window.location = url;
 }
@@ -14,8 +16,7 @@ function getOrigin() {
   var location = global.window.location;
   var origin = location.origin;
   if (!origin) {
-    origin =
-      location.protocol + '//' + location.hostname + (location.port ? ':' + location.port : '');
+    origin = objectHelper.getOriginFromUrl(location.href);
   }
   return origin;
 }

src/web-auth/popup.js

@@ -1,4 +1,5 @@
 var urljoin = require('url-join');
+var WinChan = require('winchan');
 
 var urlHelper = require('../helper/url');
 var assert = require('../helper/assert');
@@ -84,17 +85,41 @@ Popup.prototype.getPopupHandler = function(options, preload) {
  */
 Popup.prototype.callback = function(options) {
   var _this = this;
+  var theWindow = windowHelper.getWindow();
   options = options || {};
-  var originUrl =
-    options.popupOrigin || this.baseOptions.popupOrigin || windowHelper.getWindow().origin;
-  _this.webAuth.parseHash(options || {}, function(err, data) {
-    // {a, d} is WinChan's message format.
-    // We have to keep the same format because we're opening the popup with WinChan.
-    var response = { a: 'response', d: data };
-    if (err) {
-      response = { a: 'error', d: err };
+  var originUrl = options.popupOrigin || this.baseOptions.popupOrigin || windowHelper.getOrigin();
+
+  /*
+    in IE 11, there's a bug that makes window.opener return undefined.
+    The callback page will still call `popup.callback()` which will run this method
+    in the relay page. WinChan expects the relay page to have a global `doPost` function,
+    which will be called with the response.
+
+    IE11 Bug: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/110920/
+   */
+  if (!theWindow.opener) {
+    theWindow.doPost = function(msg) {
+      if (theWindow.parent) {
+        theWindow.parent.postMessage(msg, originUrl);
+      }
+    };
+    return;
+  }
+
+  WinChan.onOpen(function(popupOrigin, r, cb) {
+    if (popupOrigin !== originUrl) {
+      return cb({
+        error: 'origin_mismatch',
+        error_description: "The popup's origin (" +
+          popupOrigin +
+          ') should match the `popupOrigin` parameter (' +
+          originUrl +
+          ').'
+      });
     }
-    windowHelper.getWindow().opener.postMessage(JSON.stringify(response), originUrl);
+    _this.webAuth.parseHash(options || {}, function(err, data) {
+      return cb(err || data);
+    });
   });
 };
 

test/helper/object.test.js

@@ -523,41 +523,51 @@ describe('helpers', function() {
       expect(objectHelper.getOriginFromUrl(null)).to.be(undefined);
     });
     it('should use an anchor to parse the url and return the origin', function() {
-      var anchor = {
-        protocol: 'https:',
-        hostname: 'test.com'
-      };
-      stub(windowHelper, 'getDocument', function() {
-        return {
-          createElement: function createElement(e) {
-            expect(e).to.be('a');
-            return anchor;
-          }
-        };
-      });
       var url = 'https://test.com/example';
       expect(objectHelper.getOriginFromUrl(url)).to.be('https://test.com');
-      expect(anchor.href).to.be(url);
-      windowHelper.getDocument.restore();
     });
     it('should use add the `port` when available', function() {
-      var anchor = {
-        protocol: 'https:',
-        hostname: 'localhost',
-        port: 3000
-      };
-      stub(windowHelper, 'getDocument', function() {
-        return {
-          createElement: function createElement(e) {
-            expect(e).to.be('a');
-            return anchor;
-          }
-        };
-      });
       var url = 'https://localhost:3000/example';
       expect(objectHelper.getOriginFromUrl(url)).to.be('https://localhost:3000');
-      expect(anchor.href).to.be(url);
-      windowHelper.getDocument.restore();
     });
   });
+  describe('getLocationFromUrl', function() {
+    const mapping = {
+      'https://localhost:3000/foo?id=1': {
+        href: 'https://localhost:3000/foo?id=1',
+        protocol: 'https:',
+        host: 'localhost:3000',
+        hostname: 'localhost',
+        port: '3000',
+        pathname: '/foo',
+        search: '?id=1',
+        hash: ''
+      },
+      'https://auth0.com/foo': {
+        href: 'https://auth0.com/foo',
+        protocol: 'https:',
+        host: 'auth0.com',
+        hostname: 'auth0.com',
+        port: undefined,
+        pathname: '/foo',
+        search: '',
+        hash: ''
+      },
+      'https://auth0.com#access_token=foo': {
+        href: 'https://auth0.com#access_token=foo',
+        protocol: 'https:',
+        host: 'auth0.com',
+        hostname: 'auth0.com',
+        port: undefined,
+        pathname: '',
+        search: '',
+        hash: '#access_token=foo'
+      }
+    };
+    for (const url in mapping) {
+      it('should map urls correctly: ' + url, function() {
+        expect(objectHelper.getLocationFromUrl(url)).to.be.eql(mapping[url]);
+      });
+    }
+  });
 });

test/helper/window.test.js

@@ -28,7 +28,7 @@ describe('helpers window', function() {
       expect(windowHelper.getOrigin()).to.be('origin');
     });
     it('should build current origin when location.origin is not available', function() {
-      global.window = { location: { protocol: 'http:', hostname: 'hostname', port: 30 } };
+      global.window = { location: { href: 'http://hostname:30/foobar' } };
       expect(windowHelper.getOrigin()).to.be('http://hostname:30');
     });
   });