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?

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? — Nitzan Tomer, May 28 '12 at 18:24
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. — super9, May 29 '12 at 01:14
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. — Juicy Scripter, May 29 '12 at 07:55

Nitzan Tomer · Accepted Answer · 2012-05-29T09:03:32.223

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

What you can do:

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).
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.
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>

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? — super9, May 29 '12 at 07:47
Also, won't I get blocked by the browser like what you said? — super9, May 29 '12 at 07:53
No, the browser shouldn't block this attempt. For example, this is how facebook loads canvas apps. — Nitzan Tomer, May 30 '12 at 07:10

score 2 · Answer 2 · answered May 23 '12 at 03:32

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.
});

score 1 · Answer 3 · edited May 23 '17 at 12:11

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

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

3 Answers3

Edit