From e8219234faf0a1eba58d5890e80f9157d03f1ad1 Mon Sep 17 00:00:00 2001 From: Bhavul Gauri Date: Sun, 1 Mar 2015 23:16:41 +0530 Subject: [PATCH 1/6] JSON recievin and parsing works. --- javascripts/content_scripts/privly.js | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/javascripts/content_scripts/privly.js b/javascripts/content_scripts/privly.js index 6a24198..bc7580f 100644 --- a/javascripts/content_scripts/privly.js +++ b/javascripts/content_scripts/privly.js @@ -571,16 +571,21 @@ var privly = { "use strict"; + // typeof(message.data.frame_id) != "string" + //check the format of the message - if (typeof(message.origin) !== "string" || - typeof(message.data) !== "string" || - message.data.indexOf(',') < 1) { - return; + if (typeof(message.origin) !== "string" ){ + return; } + var msg = JSON.parse(message.data); + //Get the element by name. - var data = message.data.split(","); - var iframe = document.getElementsByName(data[0])[0]; + var frameName = msg.frame_id; + var newHeight = msg.resize; + var iframe = document.getElementsByName(frameName)[0]; + + if (iframe === undefined) { return; } @@ -601,7 +606,7 @@ var privly = { //make sure the message comes from the expected domain if (sourceURL.indexOf(originDomain) === 0) { - iframe.style.height = data[1]+'px'; + iframe.style.height = newHeight+'px'; } }, From 226d1a929d56425cbf13b3ad2651f238ca99ac4f Mon Sep 17 00:00:00 2001 From: Bhavul Gauri Date: Thu, 12 Mar 2015 02:13:41 +0530 Subject: [PATCH 2/6] added functions for hiding, showing and removing iframe --- javascripts/content_scripts/privly.js | 212 ++++++++++++++++++++++++-- 1 file changed, 202 insertions(+), 10 deletions(-) diff --git a/javascripts/content_scripts/privly.js b/javascripts/content_scripts/privly.js index bc7580f..ce729fb 100644 --- a/javascripts/content_scripts/privly.js +++ b/javascripts/content_scripts/privly.js @@ -389,6 +389,9 @@ var privly = { //Set the source URL iFrame.setAttribute("src", applicationUrl); + //URL which it will be replacing + iFrame.setAttribute("data-privlyHref",object.getAttribute("data-privlyHref")); + //The id and the name are the same so that the iframe can be //uniquely identified and resized var frameIdAndName = "ifrm" + id; @@ -559,33 +562,36 @@ var privly = { /** * Receive an iframe resize message sent by the iframe using postMessage. * Injected iframe elements need to know the height of the iframe's contents. - * This function receives a message containing the height of the iframe, and + * This function receives a message containing the height of the iframe(in px), and * resizes the iframe accordingly. * - * @param {message} message A posted message from one of the trusted domains - * it contains the name of the iframe, and height of the iframe's - * contents. Ex: "ifrm0,200" + * @param {message} message A posted message in JSON format from one of the + * trusted domains. It contains the command, the name of the iframe, and + * height of the iframe(optional). + * contents. Ex: {"command":"resize", "frameID":"ifrm0", "heightNEW":41} * */ resizeIframePostedMessage: function(message){ "use strict"; - // typeof(message.data.frame_id) != "string" - //check the format of the message - if (typeof(message.origin) !== "string" ){ + if (typeof(message.origin) !== "string"){ return; } var msg = JSON.parse(message.data); + if(msg.command != 'resize'){ + return; + } + + //Get the element by name. - var frameName = msg.frame_id; - var newHeight = msg.resize; + var frameName = msg.frameID; + var newHeight = msg.heightNew; var iframe = document.getElementsByName(frameName)[0]; - if (iframe === undefined) { return; } @@ -610,6 +616,165 @@ var privly = { } }, + /** + * Receive an iframe hide message sent by the iframe using postMessage. + * This function receives a message containing the hide command, and + * hides the iframe accordingly. After hiding the iframe, it replaces it + * with the original privly URL. + * + * @param {message} message A posted message in JSON format from one of the + * trusted domains. It contains the command, the name of the iframe, and + * height of the iframe(optional). + * contents. Ex: {"command":"hide", "frameID":"ifrm0"} + * + */ + hideIframePostedMessage: function(message){ + + "use strict"; + + //check the format of the message + if (typeof(message.origin) !== "string"){ + return; + } + + var msg = JSON.parse(message.data); + + if(msg.command != 'hide'){ + return; + } + + //Get the element by name. + var frameName = msg.frameID; + var iframe = document.getElementsByName(frameName)[0]; + var url = iframe.getAttribute("data-privlyHref"); + + if (iframe === undefined) { + return; + } + + //hides the iframe if it's not already hidden + if (iframe.getAttribute("data-privly-display") === "true") { + iframe.setAttribute("data-privly-display", "false"); + iframe.style.display = "none"; + } + + //finds the link and displays it + var link = iframe.nextSibling; + if(link.getAttribute("data-privlyhref")==url){ + //check if it is not already displayed + if(link.getAttribute("data-privly-display")=="false"){ + link.setAttribute("data-privly-display","true"); + link.style.display = "inherit"; + } + } + + }, + + /** + * Receive an iframe show message sent by the iframe using postMessage. + * This function receives a message containing the show command, and + * displays the hidden iframe accordingly. The URL appearing at the place while + * iframe was hidden gets replaced by the iframe. This is done by hiding the url. + * + * @param {message} message A posted message in JSON format from one of the + * trusted domains. It contains the command, the name of the iframe, and + * height of the iframe(optional). + * contents. Ex: {"command":"show", "frameID":"ifrm0"} + * + */ + showIframePostedMessage: function(message){ + + "use strict"; + + //check the format of the message + if (typeof(message.origin) !== "string"){ + return; + } + + var msg = JSON.parse(message.data); + + if(msg.command != 'show'){ + return;h + } + + //Get the element by name. + var frameName = msg.frameID; + var iframe = document.getElementsByName(frameName)[0]; + var url = iframe.getAttribute("data-privlyHref"); + + if (iframe === undefined) { + return; + } + + //shows the iframe + if (iframe.getAttribute("data-privly-display") === "false") { + iframe.setAttribute("data-privly-display", "true"); + iframe.style.display = ""; + } + + //finds the link and hides it + var link = iframe.nextSibling; + if(link.getAttribute("data-privlyhref")==url){ + if(link.getAttribute("data-privly-display")=="true"){ + link.setAttribute("data-privly-display","false"); + link.style.display = "none"; + } + } + + }, + + + /** + * Receive an iframe remove message sent by the iframe using postMessage. + * This function receives a message containing the remove command and name of the iframe, + * and removes the iframe accordingly. After removing it replaces iframe with the + * privly URL. + * + * @param {message} message A posted message in JSON format from one of the + * trusted domains. It contains the command, the name of the iframe, and + * height of the iframe(optional). + * contents. Ex: {"command":"remove", "frameID":"ifrm0"} + * + */ + removeIframePostedMessage: function(message){ + + "use strict"; + + //check the format of the message + if (typeof(message.origin) !== "string"){ + return; + } + + var msg = JSON.parse(message.data); + + if(msg.command != 'remove'){ + return; + } + + //Get the element by name. + var frameName = msg.frameID; + var iframe = document.getElementsByName(frameName)[0]; + var url = iframe.getAttribute("data-privlyHref"); + + if (iframe === undefined) { + return; + } + + //finds the link and displays it + var link = iframe.nextSibling; + if(link.getAttribute("data-privlyhref")==url){ + //check if it is not already displayed + if(link.getAttribute("data-privly-display")=="false"){ + link.setAttribute("data-privly-display","true"); + link.style.display = "inherit"; + } + } + + //removes the iframe + iframe.parentElement.removeChild(iframe); + }, + + /** * Indicates whether the script is waiting to run again. * This prevents DOMNodeInserted from sending hundreds of extension runs @@ -694,6 +859,24 @@ var privly = { window.addEventListener("message", privly.resizeIframePostedMessage, false, true); + //The content's iframe will post a message to the hosting document. + //This listener sets the height of the iframe according to the messaged + //height + window.addEventListener("message", privly.showIframePostedMessage, + false, true); + + //The content's iframe will post a message to the hosting document. + //This listener sets the height of the iframe according to the messaged + //height + window.addEventListener("message", privly.hideIframePostedMessage, + false, true); + + //The content's iframe will post a message to the hosting document. + //This listener sets the height of the iframe according to the messaged + //height + window.addEventListener("message", privly.removeIframePostedMessage, + false, true); + privly.runPending = true; setTimeout( function(){ @@ -721,6 +904,15 @@ var privly = { "use strict"; + window.removeEventListener("message", privly.resizeIframePostedMessage, + false); + + window.removeEventListener("message", privly.showIframePostedMessage, + false); + + window.removeEventListener("message", privly.hideIframePostedMessage, + false); + window.removeEventListener("message", privly.resizeIframePostedMessage, false); From 753ace0b9419cab69ad9fdd66447f788beb2a0cb Mon Sep 17 00:00:00 2001 From: Bhavul Gauri Date: Thu, 12 Mar 2015 02:14:58 +0530 Subject: [PATCH 3/6] added message sending recieving API doc --- javascripts/content_scripts/messagingJSON.md | 32 ++++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 javascripts/content_scripts/messagingJSON.md diff --git a/javascripts/content_scripts/messagingJSON.md b/javascripts/content_scripts/messagingJSON.md new file mode 100644 index 0000000..f14196b --- /dev/null +++ b/javascripts/content_scripts/messagingJSON.md @@ -0,0 +1,32 @@ +Sending and Recieving Messages API +======================================= + +Any injected application can send messages to the content script (privly.js) to trigger it to resize, show or hide the iframe content. JSON is used for this communication. Injected application can use the following blueprint for sending messages :- + +An example of a message could be: +``` +{command:"resize", + frameID:"name of iframe" + heightNEW:No. of pixels, + } +``` + +**A possible syntax for sending this message over the host would be:** +```javascript +var message = {command:"resize", + frameID:"name of iframe" + heightNEW:No. of pixels + }; + msgJSON = JSON.stringify(message); + parent.postMessage(JSON.stringify(resizeData),"*"); + ``` + +##Possible set of options + +* command : "resize" | "hide" | "show" +* frameID : "" +* heightNEW : no. of pixels + + +While using `hide` or `show` as the command, `heightNEW` doesn't matter and you may or may not include it in your message. + From bff6486c565061b21eaa7147b00f4e0e22ba1ed2 Mon Sep 17 00:00:00 2001 From: Bhavul Gauri Date: Mon, 16 Mar 2015 22:53:40 +0530 Subject: [PATCH 4/6] inconsistency removed and nit --- javascripts/content_scripts/privly.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/javascripts/content_scripts/privly.js b/javascripts/content_scripts/privly.js index ce729fb..230fc49 100644 --- a/javascripts/content_scripts/privly.js +++ b/javascripts/content_scripts/privly.js @@ -589,7 +589,7 @@ var privly = { //Get the element by name. var frameName = msg.frameID; - var newHeight = msg.heightNew; + var heightNew = msg.heightNew; var iframe = document.getElementsByName(frameName)[0]; if (iframe === undefined) { @@ -612,7 +612,7 @@ var privly = { //make sure the message comes from the expected domain if (sourceURL.indexOf(originDomain) === 0) { - iframe.style.height = newHeight+'px'; + iframe.style.height = heightNew + 'px'; } }, From 6b151c60e29b2f00d3a38697f6e806de7ac4e185 Mon Sep 17 00:00:00 2001 From: Bhavul Gauri Date: Mon, 16 Mar 2015 23:11:07 +0530 Subject: [PATCH 5/6] generic listener added --- javascripts/content_scripts/privly.js | 101 ++++++++++---------------- 1 file changed, 38 insertions(+), 63 deletions(-) diff --git a/javascripts/content_scripts/privly.js b/javascripts/content_scripts/privly.js index 230fc49..c95b365 100644 --- a/javascripts/content_scripts/privly.js +++ b/javascripts/content_scripts/privly.js @@ -559,6 +559,36 @@ var privly = { } }, + + checkIframePostedMessage: function(message){ + + "use strict"; + + //check the format of the message + if (typeof(message.origin) !== "string"){ + return; + } + + var msg = JSON.parse(message.data); + + if(msg.command === 'resize'){ + privly.resizeIframePostedMessage(message); + } + else if(msg.command === 'hide'){ + privly.hideIframePostedMessage(message); + } + else if(msg.command === 'show'){ + privly.showIframePostedMessage(message); + } + else if(msg.command === 'remove'){ + privly.removeIframePostedMessage(message); + } + else{ + return; + } + + }, + /** * Receive an iframe resize message sent by the iframe using postMessage. * Injected iframe elements need to know the height of the iframe's contents. @@ -575,18 +605,8 @@ var privly = { "use strict"; - //check the format of the message - if (typeof(message.origin) !== "string"){ - return; - } - var msg = JSON.parse(message.data); - - if(msg.command != 'resize'){ - return; - } - - + //Get the element by name. var frameName = msg.frameID; var heightNew = msg.heightNew; @@ -632,17 +652,8 @@ var privly = { "use strict"; - //check the format of the message - if (typeof(message.origin) !== "string"){ - return; - } - var msg = JSON.parse(message.data); - if(msg.command != 'hide'){ - return; - } - //Get the element by name. var frameName = msg.frameID; var iframe = document.getElementsByName(frameName)[0]; @@ -660,9 +671,9 @@ var privly = { //finds the link and displays it var link = iframe.nextSibling; - if(link.getAttribute("data-privlyhref")==url){ + if(link.getAttribute("data-privlyhref") === url){ //check if it is not already displayed - if(link.getAttribute("data-privly-display")=="false"){ + if(link.getAttribute("data-privly-display") === "false"){ link.setAttribute("data-privly-display","true"); link.style.display = "inherit"; } @@ -686,17 +697,8 @@ var privly = { "use strict"; - //check the format of the message - if (typeof(message.origin) !== "string"){ - return; - } - var msg = JSON.parse(message.data); - if(msg.command != 'show'){ - return;h - } - //Get the element by name. var frameName = msg.frameID; var iframe = document.getElementsByName(frameName)[0]; @@ -714,8 +716,8 @@ var privly = { //finds the link and hides it var link = iframe.nextSibling; - if(link.getAttribute("data-privlyhref")==url){ - if(link.getAttribute("data-privly-display")=="true"){ + if(link.getAttribute("data-privlyhref") === url){ + if(link.getAttribute("data-privly-display") === "true"){ link.setAttribute("data-privly-display","false"); link.style.display = "none"; } @@ -740,17 +742,8 @@ var privly = { "use strict"; - //check the format of the message - if (typeof(message.origin) !== "string"){ - return; - } - var msg = JSON.parse(message.data); - if(msg.command != 'remove'){ - return; - } - //Get the element by name. var frameName = msg.frameID; var iframe = document.getElementsByName(frameName)[0]; @@ -762,9 +755,9 @@ var privly = { //finds the link and displays it var link = iframe.nextSibling; - if(link.getAttribute("data-privlyhref")==url){ + if(link.getAttribute("data-privlyhref") === url){ //check if it is not already displayed - if(link.getAttribute("data-privly-display")=="false"){ + if(link.getAttribute("data-privly-display") === "false"){ link.setAttribute("data-privly-display","true"); link.style.display = "inherit"; } @@ -856,25 +849,7 @@ var privly = { //The content's iframe will post a message to the hosting document. //This listener sets the height of the iframe according to the messaged //height - window.addEventListener("message", privly.resizeIframePostedMessage, - false, true); - - //The content's iframe will post a message to the hosting document. - //This listener sets the height of the iframe according to the messaged - //height - window.addEventListener("message", privly.showIframePostedMessage, - false, true); - - //The content's iframe will post a message to the hosting document. - //This listener sets the height of the iframe according to the messaged - //height - window.addEventListener("message", privly.hideIframePostedMessage, - false, true); - - //The content's iframe will post a message to the hosting document. - //This listener sets the height of the iframe according to the messaged - //height - window.addEventListener("message", privly.removeIframePostedMessage, + window.addEventListener("message", privly.checkIframePostedMessage, false, true); privly.runPending = true; From aa4a05324efb97512d3c9e68aa936754505d5975 Mon Sep 17 00:00:00 2001 From: Bhavul Gauri Date: Tue, 17 Mar 2015 08:21:46 +0530 Subject: [PATCH 6/6] remove listener leftover fixed --- javascripts/content_scripts/privly.js | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/javascripts/content_scripts/privly.js b/javascripts/content_scripts/privly.js index c95b365..ea86ac8 100644 --- a/javascripts/content_scripts/privly.js +++ b/javascripts/content_scripts/privly.js @@ -879,16 +879,7 @@ var privly = { "use strict"; - window.removeEventListener("message", privly.resizeIframePostedMessage, - false); - - window.removeEventListener("message", privly.showIframePostedMessage, - false); - - window.removeEventListener("message", privly.hideIframePostedMessage, - false); - - window.removeEventListener("message", privly.resizeIframePostedMessage, + window.removeEventListener("message", privly.checkIframePostedMessage, false); privly.observer.disconnect();