Facebook App Canvas Showing Blank Page

Question

i am trying to create facebook app but the canvas page is showing blank. I am working with localhost.

enter image description here

In my htdocs folder i have basic php file with following content

<html>
    <head>
        <title>Fb App</title>
    </head>
    <body>
        <h1>Working....</h1>
    </body>
</html>

In the console window i am getting following error

**[blocked] The page at 'https://apps.facebook.com/fooobaaar/' was loaded over HTTPS, but ran insecure content from 'http://localhost/': this content should also be loaded over HTTPS.
 (index):37**

**event.returnValue is deprecated. Please use the standard event.preventDefault() instead.**

I guess this means i need https. Do i really need https for testing on localhost

Milan Babuškov · Accepted Answer · 2014-01-17T06:23:06.993

2

Since all your content is in Facebook's iframe, and it's a different domain, you need SSL.

You could go to your Facebook account settings and turn off "secure browsing" which allows you to use Facebook via pure http. I do not recommend this, as you might forget to turn it on later and not even know that stuff does not work for your users.

For testing you can build your own frame (to get proper page size, for example) and mock the Facebook's authentication in your code.

With real Facebook you would need install stuff on some server anyway because other things won't work properly. Facebook's servers cannot contact "localhost" to send you any data, for example.

edited Jan 17 '14 at 06:23

answered Jan 17 '14 at 06:17

Milan Babuškov

59,775
49
126
179

few months back (i guess 4-5 month) i was testing same way and it was working. Is this new to facebook? – Nakib Jan 18 '14 at 00:26
@Nakib, Facebook did not change anything. It's a recent change in Chrome and Firefox. – Milan Babuškov Jan 19 '14 at 22:20
I tried to disable secure browsing on facebook, after clicking Save Changes, it still says secure browsing is enabled, and now there is simply no option to edit secure browsing anymore. It is the only one on the list with no edit option =/. – Andrew Mar 01 '14 at 20:17
how long it takes time to update old url to new url? – Mrugesh Tank Jan 12 '15 at 11:50
@MrugeshTank: last time I did that, it was about 4-5 minutes. – Milan Babuškov Feb 06 '15 at 21:47

score 1 · Answer 2 · answered Mar 14 '14 at 13:10

In the facebook page documentation , it mentions that this is because of the security settings in the browser. As per the page ,

Your game must be in sandbox mode to allow serving over HTTP.
Your browser may raise a security exception since your game is not served over HTTP. E.g. In Chrome you will need to click the shield icon in the address bar and choose "Load unsafe script".

This resolved my issue.

score 0 · Answer 3 · edited May 23 '17 at 12:19

0

For me the issue got solved by removing the X-Frame-Options header from the response headers. I use Rails and a new Rails version was adding that header by default.

Cannot display my rails 4 app in iframe even if 'X-Frame-Options' is 'ALLOWALL'

edited May 23 '17 at 12:19

Community

1
1

answered Nov 08 '16 at 08:10

Mika

1,419
18
37

Facebook App Canvas Showing Blank Page

3 Answers3