Cross-Document Messaging Receiver

by Mladen Petrovic

HTML

<h3>Messages Received (from main page):</h3>
  <div id="messages"></div>

CSS

body {
  font-family: sans-serif;
  padding: 10px;
}

h3 {
  padding-bottom: 5px;
}

#messages {
  font-size: small;
  border-top: 1px solid #000;
  padding-top: 10px;
}

JavaScript

//This function is called whenever the window receives a message event, the message object is passed in as it's only parameter

function receiver(message) {
	console.log('receiver')
  //get the message container html element (in this case, the messages div)
  var messagecontainer = document.getElementById("messages");
  var trusteddomain = "http://jsfiddle.net";

  //Get the time of message receipt
  var currenttime = new Date();
  //format the time into a user readable format
  var formattedtime = currenttime.getHours() + ":" + currenttime.getMinutes() + ":" + currenttime.getSeconds();


  //inspect the origin property of the message event to ensure the message originates from the same domain)
  if (message.origin == trusteddomain) {
    var msgcontent = message.data;
    //check the content of the message only contains letters and numbers to prevent xss attacks
    if (msgcontent.match(/^[A-Za-z0-9]+$/)) {
      //if no illegal characters are found in the message, print it to the message container div along with the time of receipt
      messagecontainer.innerHTML += "message received @ " + formattedtime + ": " + message.data + "<br />";
    } else {
      //if illegal characters are found in the message content, print an error message to the message container
      messagecontainer.innerHTML += "Illegal characters found in the message received @ " + formattedtime + ". Message rejected<br/>";
    }
  } else {
    messagecontainer.innerHTML += "Message received from un-trusted domain:" + message.origin + "<br />";
  }
}

//Add an event listener to the window object to catch any message events
window.addEventListener('message', receiver, false);