Tushar Shukla Tushar Shukla - 5 months ago 22
Javascript Question

How pinterest managed to load an iframe on any website when their extension is clicked?

I'm trying to develop an extension similar to that of Pinterest's PinIt extension for google chrome.

In general, i know that loading any URL in an iframe which is not from the same origin would result in giving an error "Refused to display 'https://www.someWebsite.com/' in a frame because it set 'X-Frame-Options' to 'DENY'."

However, i do see that Pinterest is loading a URL on any website when using their extension. For Example, i was using the extension on instagram.com (i've used it on other sites as well) and then i took a screenshot enter image description hereof what i could not understand. (Please refer to selected area in DOM)


Can anyone tell me how this can be achieved or probably how pinterest is doing this?

Answer

I finally figured out how to deal with this. I still do not know how exactly pinterest is doing it but i'm sure i'm close to it.
I simply load an iframe in the body of the parent by injecting my own JS to the page.

Then i iterate through all the images available on the page like

$('img).each(function(){
    // do my stuff to see if i need this image
    // push them in an array (say, var imgArray)
})
    var imgToString = imgArray.toString();
    var myIframe = document.getElementById('iframe_id').contentWindow;
    myIframe..postMessage(imgToString , '*');


And then in the iFrame that i load, i recieve the message and use the images...
So the gist of the whole issue is that postMessage() is my saviour.

Comments