help.zscaler.com | iframe test

FYI for team

you can access zia and zpa as:
help.zscaler.com/zpa
help.zscaler.com/zia
these two portals are used in Admin portals using iframe and is managed by Grace and Team

image test | zpa

image test | zia

video test




css and js code needs to be added to the host webpage so that it can receive messages from iframe

scss code:

      .iframe-modal,.iframe-modal-video {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(#000, 0.5);
  text-align: center;
  display: none;
  vertical-align: middle;
  cursor: zoom-out;
  &::before {
    content: 'B';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }
  .centered {
    display: inline-block;
    vertical-align: middle;
    width: 700px;
    padding: 10px 15px;
    border: #a0a0a0 solid 1px;
    background: #f5f5f5;
    img {
      width: 100%;
    }
  }
}    

js code( message receive listener):

  <script>
  function transferMessage(evt) {
    var message;
    if (evt.origin !== "http://help.zscaler.test") {
      message = "origin not privileged";
      console.log(message);
    }
    else {
      message = evt.data + " received ";
      console.log(message);

      if ((evt.data.match("png$")) || evt.data.match("jpg$") || evt.data.match("jpeg$") || evt.data.match("bmp$") || evt.data.match("gif$") ) {
        // do this if ends with image extension
        $('body:not(:has(.iframe-modal))').append('<div class="iframe-modal"><div class="centered"><img src="'+ evt.data + '" /></div></div>');
        $('.iframe-modal').show();
        $('.iframe-modal').click(
          function () {
            $('.iframe-modal').remove();
          });
      }
      else if (evt.data.match("^https://www.youtu")) {
        $('body:not(:has(.iframe-modal-video))').append('<div class="iframe-modal-video"><div class="centered"><iframe width="560" height="315" src="'+evt.data+'" frameborder="0" allowfullscreen></iframe></div></div>');
        $('.iframe-modal-video').show();
        $('.iframe-modal-video').click(
          function () {
            $('.iframe-modal-video').remove();
          });

      }
      else if(evt.data.match("^https://player.vimeo.com")) {
        $('body:not(:has(.iframe-modal-video))').append('<div class="iframe-modal-video"><div class="centered"><iframe width="560" height="315" src="'+evt.data+'" frameborder="0" allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe></div></div>');
        $('.iframe-modal-video').show();
        $('.iframe-modal-video').click(
          function () {
            $('.iframe-modal-video').remove();
          });
      }
    }
  }
  if (window.addEventListener) {
    window.addEventListener("message", transferMessage, false);
  }
  else {
    /**
     * for old browsers
     */
    window.attachEvent("onmessage", transferMessage);
  }
</script>