From 1ed8213ebe97f7a28626711e665c0be20cb4ec8a Mon Sep 17 00:00:00 2001
From: Emil Lerch <emil@lerch.org>
Date: Sat, 25 Apr 2020 14:14:29 -0700
Subject: [PATCH] handle image only when login is clicked, avoiding exra load
 and mixed content

---
 index.js | 37 ++++++++++++++++++++++++-------------
 1 file changed, 24 insertions(+), 13 deletions(-)

diff --git a/index.js b/index.js
index daf15dc..61a76bf 100644
--- a/index.js
+++ b/index.js
@@ -41,23 +41,34 @@ async function modifyBody(pageContentTextPromise, originalResponse) {
         `<div id="pagecontent">
           <!--edge side include via cf worker-->
           ${await pageContentResponse.text()}
-          <!--invisible image to establish tm cookie. Note that troopmaster redirects this https to
-              /Website/Home, then redirects again, explicitly to http. Since Troopmaste also
-              doesn't respect CORS, our only way to establish a cookie for login is with this image
-              tag that eventually will try to fetch an http resource, but we can't tell the browser
-              here to avoid redirects (we don't want the "image", only the cookie). as if that's not
-              enough, javascript on /Website/Home actually checks for http and does a
-              **CLIENT SIDE REDIRECT BACK TO HTTPS**, resulting in a wild flash that we just
-              avoid with a simple 302 (first in this worker, then back as a checkbox on the
-              CloudFlare dashboard. Seriously, people...I don't know whether to laugh or cry -->
-          <img src="https://tmweb.troopmaster.com/mysite/${TMSITENAME}?Home" height="1" width="1" style="opacity:0" >
-          <!--end invisible image to establish tm cookie-->
           <!--End edge side include via cf worker-->
          </div>`);
       responseBodyText = responseBodyText.replace(initialloadJs, '');
 
-      responseBodyText = responseBodyText.replace(login,
-        `location.href = 'https://tmweb.troopmaster.com/Login/Index?website'`); // eslint-disable-line no-undef
+      responseBodyText = responseBodyText.replace(login, `
+          var image = new Image(1, 1);
+          image.style.cssText = "opacity:0";
+          document.body.appendChild(image);
+
+          // listen for the image's error event before assigning a source
+          // We use error here because content policy will block loading an
+          // http resource. Why is it http? Because troopmaster redirects
+          // our nice clean https to http (then if this were a real request,
+          // would happily redirect **BACK** to https via client side JS
+          image.addEventListener('error', function() {
+              // this function is invoked in the future,
+              // when the image load event has been fired (and cookies extablished
+              location.href = 'https://tmweb.troopmaster.com/Login/Index?website';
+          });
+          // in case troopmaster fixes this bizarre behavior, we will set up
+          // a load function too
+          image.addEventListener('load', function() {
+              // this function is invoked in the future,
+              // when the image load event has been fired (and cookies extablished
+              location.href = 'https://tmweb.troopmaster.com/Login/Index?website';
+          });
+          // Set src and trigger the browser to load
+          image.src = "https://tmweb.troopmaster.com/mysite/${TMSITENAME}?Home"`); // eslint-disable-line no-undef
 
       extraheaders['X-worker-modification-status'] = 'modified';
       extraheaders['X-worker-modification-getcontent-ok'] = 'true';