Facebook App Canvas Showing Blank Page

StackOverflow https://stackoverflow.com/questions/21171388

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

Was it helpful?

Solution

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.

OTHER TIPS

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.

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'

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top