Refused to autofill iframe with different origin - FB API Error

[Anil Sagar]

Sorry for the delay Katya. My app was being corrected for a few other errors before I could back to you.

Here is the link to my app without frame.

http://appery.io/app/view/177c5783-d9...

This is using read service for now. Error does not come all the time but it is more often than it comes on query service.

If error does not appear for you on the first go then pls try couple of times and you will be able to see the error. Want to say again that same error comes on query service but less often than it comes on read service. Pls check.

[Maryna Brodina]

Hello!

I am sorry, not sure I understand how to reproduce this issue. Could you please describe in more details?

[Anil Sagar]

Here are the steps to reproduce error once again.

1. Click on http://appery.io/app/view/177c5783-d9...

2. Once page 1 loads, click on any of the 3 offers given under heading "My Offers"

3. You will now navigate to page "My Offers"

4. Check browser console for the error

   Error will be - Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "http://appery.io" from accessing a frame with origin "https://www.facebook.com". The frame requesting access has a protocol of "http", the frame being accessed has a protocol of "https". Protocols must match.

[Jay Lotta]

Have you tried disabling Last Pass. I have been getting this error and am pretty sure Last Pass is the cause.

[Yurii Orishchuk]

Hi Anil,

I've checked it and need to say that's bug.

I've reported this bug to our developers team.

And here is workaround for you:

1 Open your HTML component and clear current html code inside. http://prntscr.com/49n9mf/direct

2 Open your "Offers_Prepaid_read_service" datasource mapping and click "Edit JS".

http://prntscr.com/49na3m/direct

3 Add to your currently code following code: http://prntscr.com/49naiq/direct

pre

var html = '<iframe src="http:&#47;&#47;www&#46;facebook&#46;com/plugins/like&#46;php?href=http%3A%2F%2Fappery&#46;io%2Fapp%2Fview%2F177c5783-d9ff-48ca-a6cf-e6930d377119%2FFacebook_Me_Prepaid&#46;html&width&layout=button&action=like&show_faces=false&share=true&height=35&appId=678315978907394" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:45px; width:200px;" allowTransparency="true"</iframe';

element&#46;find('[name="share_html"]')&#46;html(html);

/pre

That's all.

Regards.

[Anil Sagar]

I must say Yurii -

• You are an asset for Appery support team

• I have not seen many topics dragging on with you

• That must be saving so much time for other support team members and

• More importantly for customers like me whose critical time and business is saved because of your prompt and sure shot solutions.

  This particular issue has taken 11 days to get resolved but only a single reply from you has resolved this.

  Many thanks

[Anil Sagar]

For using FB share button - Using iFrame in the html component is not allowing me to define meta tags for open graph on facebook.

My aim is to share an image and some text (along with the URL being shared) using iFrame. Or is there another way of using FB share button using FBML etc in html component of appery?

[Illya Stepanov]

Hi Anil,

For example here is a ready link for sharing with text and image:
:: http://garethhooper.com/2010/04/03/sh...

[Anil Sagar]

Hi Illya,

1. I have done a lot of research on web but could not find a way in which I could change the iFrame code given by FB for like and share buttons.

2. It seems you are suggesting to change my code from iFrame to html. Is this the case? In this thread above, you would see that I tried using the html code from FB but that did not work. It seems it's a bug with Appery.

3. If above is not correct then pls suggest how to change my iFrame code to incorporate an image and a custom text.FB iFrame code is given above in Yurii's reply.

4. If FB iFrame code can't be used to mention image and custom text, how can I use html since it's been recognized as a bug?

5. Can I use Appery shorthands for stating the image path and custom text etc?

[Yurii Orishchuk]

Hi Anil,

You don't need to change link or iframe.

But you need add some elements on the page you want to share.

Here is solution: for you:

1 Open the page you want to share.

2 Add HTML component on the page.

3 Populate this HTML component with following HTML: http://prntscr.com/4ekkiv/direct

pre

<[img]http:&#47;&#47;appery&#46;io/app/view/95800416-80fd-4abd-bf67-c7b4e3c3f55b/files/views/assets/image/phone&#46;png[/img] width="300" height="168"
<meta name="description" content="Here is title for face book_1"

/pre

Note: you need populate this html code with "text you need" and "img url you need".

After you do it you will get this: http://prntscr.com/4ekk34/direct

Regards.