Facebook Is it possible to grab a user's data and populate a form in an iframe?

Question

I am trying to create an iframe tab for a Facebook Page.

On this page, I am loading in an iframe which consists of a form from another domain/site.

Is it possible to use javascript to query the graph api to load the user's data into this iframe loaded form using javascript such that is appears pre-populated to the user?

I am aware that there is a cross domain security issue. In that case, suppose that my iframe tab is now hosted on the same domain as the iframe loaded form, will this be doable now?

Pattern

Just to check if I got this right: You have a page app which is hosted from domain dX, in that page (pA) you want to load another page (pB, with a form) which is also served from domain dX in an iframe, is that right so far? If so, from where do you want to make api calls? pA, pB, or both? Also, in the app settings the app domain is set to dX? – Afrit

Negative. pB, with a form is served from domain dZ in an iframe. I want to make an API call via FB Javascript SDK in pA to update the form (user details) in pB. Personally, I don't think its possible as it sounds like a huge security issue if I could. But I just wanted to double check this on SO. – Pattern

You also should double check that what you trying to do doesn't violates platform policies, at least due to transfer of data to other domain/site, and/or because of form data built upon details retrieved from Facebook's API. – Tourist

Answer 1

You are right, what you want will be blocked by the browser due to security reasons (same origin policy).

What you can do:

1. Reload the form in the iframe and pass it the data you get from the js sdk, you can even POST the data into the iframe (like facebook does with canvas apps).

2. You should be able to change the location of the iframe, but just the hash part (fragment), which will not cause the iframe to reload.
   In the iframe be aware of location changes and extract the data from the fragment.
   The problem is that this method will probably mess up with the browser history.

3. Find another solution for cross domain communication, maybe easyXDM?

---

Edit

Here are two implementations of the first option:

1) Using GET

<iframe id="userform"></iframe>

<script type="text/javascript">
    // load and init FB JS SDK

    FB.api("me", function(response) {
        document.getElementById("userform").src = USER_FORM_URL + "?name=" + response.name;
    });
</script>

2) Using POST into the iframe

<form method="POST" action="USER_FORM_URL" target="userform" id="postForm">
    <input type="hidden" name="fbResponse" id="fbResponseInput" />
</form>

<iframe name="userform"></iframe>

Then, on the iframe itself, get the data (either from GET or POST) and render the user form accordingly.

<script type="text/javascript">
    // load and init FB JS SDK

    FB.api("me", function(response) {
        document.getElementById("fbResponseInput").value = JSON.stringify(response);
        document.getElementById("postForm").submit();
    });
</script>

Afrit

Could you elaborate more on point 1 please? From what I understand from what you just said, pA from dX is able to make a change to the value of the input fields in pB from dZ? Do you think you can point me in the right direction to do this? – Pattern

Also, won't I get blocked by the browser like what you said? – Pattern

No, the browser shouldn't block this attempt. For example, this is how facebook loads canvas apps. – Afrit

Answer 2

var ifrm = document.getElementById('myIframe');
ifrm = (ifrm.contentWindow) ? ifrm.contentWindow : (ifrm.contentDocument.document) ? ifrm.contentDocument.document : ifrm.contentDocument;

Now you have the iframe, simply use

ifrm.getElementById('textBoxId').value = 'value-fetched-from-facebook';

Fetch data from FB by

FB.api('me?fields=firstName&lastName', function(res)
{
//response contains your user info.
});

Resignation

Answer 3

Your tab page has to make the call to the GraphAPI.

Once you get the user's data returned to your JavaScript thread, then you have 2 options:

1) You can always pass data to your IFRAME using querystring. Only in this moment you generate the iframe with the right url containing the data in the querystring.

2) You can invoke a javascript function that lives in your internal IFRAME page. This function will receive the object from the Facebook graph api response and will populate the page directly.

Check this article.

Invoking JavaScript code in an iframe from the parent page

Mcdonnell