Sending cross-origin iFrame content over postMessage fails

Question

First of all, I know that the topic of accessing iFrame Elements cross-domain is a tricky topic and I might be going with this nowhere.

I have a Google Forms embedded in my app that I need to set up in a way to tell me when a user has submitted his/her response. I already tried lots of things but the most optimistic way that could work would be just to read the HTML of the iFrame when the last page has been loaded saying that the response was submitted.

Therefore, I was looking for solutions on how to simply read any kind of snippet of the iFrame's content and I came across this comment in another thread: https://stackoverflow.com/a/32265508/3856569

I'm trying reading the content of the iFrame as suggested in the comment and sending it to the parent windows via postMessage like so:

$(document).ready(function() {
    document.getElementById("googleForm").addEventListener("load", 
        function() {
            var message = document.getElementById("googleForm");
            parent.postMessage(JSON.parse(JSON.stringify(message)), '*')
    });
})

and the parent-window reads the message like so:

function receiveMessageGoogleForm (event) {
    console.log(event)
}

//Listen for message events
window.addEventListener("message", receiveMessageGoogleForm, false);

However, the data property of the event object upon receiving the message seems to be empty.

Is this another inbuilt mechanism to avoid reading any kind of a cross-origin iFrame or am I missing something here?

Answer 1

Forget about postMessage for a moment.

var message = document.getElementById("googleForm");
var result = JSON.parse(JSON.stringify(message));
console.log(result);

<div id="googleForm">content</div>

If you pass a DOM element into JSON.stringify then you get a (JSON representation of an) empty object out.

DOM elements don't have any properties that will be automatically processed by JSON.stringify.

---

If you want to get data from a form, then you need to actually read the data from the form (e.g. get the input elements and read their value properties).

---

If you want to extract data from the DOM of a Google Form or if you want to send a postMessage from a Google Form then you need to write the JavaScript which does that in the HTML document containing the form.

You can't pull it across domains.

The page with the Google Form has access to the data and can push it across domains with post message.

Nothing you can do will let you just help yourself to that data.

It's private between the owner of the browser and the owner of the website and one of them needs to take explicit action if it is to be shared with anyone else (e.g. someone who has wrapped that website in an iframe).