handle image only when login is clicked, avoiding exra load and mixed content

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,
+      responseBodyText = responseBodyText.replace(login, `
-        `location.href = 'https://tmweb.troopmaster.com/Login/Index?website'`); // eslint-disable-line no-undef
+          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';