handle image only when login is clicked, avoiding exra load and mixed content
This commit is contained in:
parent
4c19e7136d
commit
1ed8213ebe
37
index.js
37
index.js
|
@ -41,23 +41,34 @@ async function modifyBody(pageContentTextPromise, originalResponse) {
|
||||||
`<div id="pagecontent">
|
`<div id="pagecontent">
|
||||||
<!--edge side include via cf worker-->
|
<!--edge side include via cf worker-->
|
||||||
${await pageContentResponse.text()}
|
${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-->
|
<!--End edge side include via cf worker-->
|
||||||
</div>`);
|
</div>`);
|
||||||
responseBodyText = responseBodyText.replace(initialloadJs, '');
|
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-status'] = 'modified';
|
||||||
extraheaders['X-worker-modification-getcontent-ok'] = 'true';
|
extraheaders['X-worker-modification-getcontent-ok'] = 'true';
|
||||||
|
|
Loading…
Reference in New Issue
Block a user