Merge pull request #1465 from hypothesis/boot-url-template-ie11

Make boot URL templating work in IE 11 / early Edge

src/boot/test/url-template-test.js

@@ -6,7 +6,7 @@ describe('processUrlTemplate', () => {
   let fakeDocument;
 
   beforeEach(() => {
-    fakeDocument = { currentScript: null };
+    fakeDocument = { currentScript: null, querySelectorAll: sinon.stub() };
   });
 
   context('when `document.currentScript` is set', () => {
@@ -34,12 +34,27 @@ describe('processUrlTemplate', () => {
   });
 
   context('when `document.currentScript` is not set', () => {
-    it('does not replace parameters', () => {
+    beforeEach(() => {
+      fakeDocument.querySelectorAll
+        .withArgs('script')
+        .returns([{ src: 'http://test-host:3001/script.js' }]);
+    });
+
+    it('falls back to using origin info from the last <script> tag in the document', () => {
       const url = processUrlTemplate(
         '{current_scheme}://{current_host}:2000/style.css',
         fakeDocument
       );
-      assert.equal(url, '{current_scheme}://{current_host}:2000/style.css');
+      assert.equal(url, 'http://test-host:2000/style.css');
+    });
+
+    it('does not try to determine the origin if there are no URL template params', () => {
+      const url = processUrlTemplate(
+        'https://hypothes.is/embed.js',
+        fakeDocument
+      );
+      assert.equal(url, 'https://hypothes.is/embed.js');
+      assert.notCalled(fakeDocument.querySelectorAll);
     });
   });
 });

src/boot/url-template.js

 'use strict';
 
-function currentScriptUrl(document_ = document) {
+/**
+ * Extract the protocol and hostname (ie. host without port) from the URL.
+ *
+ * We don't use the URL constructor here because IE and early versions of Edge
+ * do not support it and this code runs early in the life of the app before any
+ * polyfills can be loaded.
+ */
+function extractOrigin(url) {
+  const match = url.match(/(https?):\/\/([^:/]+)/);
+  if (!match) {
+    return null;
+  }
+  return { protocol: match[1], hostname: match[2] };
+}
+
+function currentScriptOrigin(document_ = document) {
   try {
-    const scriptEl = document_.currentScript;
-    return new URL(scriptEl.src);
+    let scriptEl = document_.currentScript;
+
+    if (!scriptEl) {
+      // Fallback for IE 11.
+      const scripts = document_.querySelectorAll('script');
+      scriptEl = scripts[scripts.length - 1];
+    }
+
+    return extractOrigin(scriptEl.src);
   } catch (err) {
     return null;
   }
@@ -19,11 +41,18 @@ function currentScriptUrl(document_ = document) {
  * with the IP/hostname of the dev server.
  */
 function processUrlTemplate(url, document_ = document) {
-  const scriptUrl = currentScriptUrl(document_);
-  if (scriptUrl) {
-    url = url.replace('{current_host}', scriptUrl.hostname);
-    url = url.replace('{current_scheme}', scriptUrl.protocol.slice(0, -1));
+  if (url.indexOf('{') === -1) {
+    // Not a template. This should always be the case in production.
+    return url;
   }
+
+  const origin = currentScriptOrigin(document_);
+
+  if (origin) {
+    url = url.replace('{current_host}', origin.hostname);
+    url = url.replace('{current_scheme}', origin.protocol);
+  }
+
   return url;
 }