@import url('https://fonts.googleapis.com/css?family=Tenali+Ramakrishna&display=swap')
  
html,body
  margin 0
  display flex
  align-items center
  justify-content center
  height 100vh
  background #236
  color #8bd
  font-family 'Tenali Ramakrishna', sans-serif
  font-size 2rem

const url = 'https://get.geojs.io/v1/ip/country.json?ip=8.8.8.8';

hackXHR({onFinish: ()=> log('Hacked XHR #1')});
makeRegularXHR({onFinish: ()=> log('Successful XHR #1')});
hackXHR({onFinish: ()=> log('Hacked XHR #2')});
makeSecureXHR({onFinish: ()=> log('Successful XHR #2')});
hackXHR({onFinish: ()=> log('Hacked XHR #3')});

function hackXHR({onFinish}) {
  const XHR = XMLHttpRequest,
        XHRopen = XHR.prototype.open;
  
  XHR.prototype.open = function() {
    onFinish();
    XHRopen.apply(this, arguments);
  };
} //end hackXHR()

function makeSecureXHR({onFinish}) {
  const iframe = document.createElement('iframe');

  // we synchronously append the iframe so the browser will create a pristine version
  // of the XMLHttpRequest object, then immediately detach it so no listeners can
  // attempt to manipulate it
  document.body.appendChild(iframe);
  XMLHttpRequest.prototype.open = iframe.contentWindow.XMLHttpRequest.prototype.open;
  document.body.removeChild(iframe);
  makeRegularXHR({onFinish});
} //end makeSecureXHR()

function makeRegularXHR({onFinish}) {
  const req = new XMLHttpRequest();
  
  req.addEventListener('load', onFinish);
  req.open('GET', url, true);
  req.send();
} //end makeRegularXHR()

function log(text) {
  document.body.innerHTML += `<br>${text}`;
} //end log()