IFrame shows Blank in Canvas Facebook app

I have a very simple page that I am trying to view in a Facebook iframe. This is a Django-view, but it does not depend on whether the request is sent via POST or GET. All he does is return some simple HTML.

If we click the link directly, it will display correctly. If in firefox I right-click on the iframe and select the option to display only this frame - then it is displayed correctly. However, when viewing the Facebook application, nothing is displayed.

Here's a link to the app: http://apps.facebook.com/fireflietest/ Which points to http://www.fireflie.com/facebook/

Here is the code for my very simple presentation:

from django.http import HttpResponse from django.views.decorators.csrf import csrf_exempt, csrf_protect @csrf_exempt def facebook(request): body = """ <html> <head><title>Fireflie on Facebook</title></head> <body>Hello, Facebook!</body> </html> """ return HttpResponse(body) 

Just for testing purposes, I created a small HTML form that would be a POST on this page. It is working fine. I also launched the debugging tool on Facebook, and the โ€œscraperโ€ showed that it holds our content correctly.

Here the server logs show that it returns 200 OK both times:

 24.210.144.32 - - [15/Jun/2012:18:27:18 +0000] "POST /facebook/ HTTP/1.1" 200 31 "http://apps.facebook.com/fireflietest/" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/535.19 (KHTML, like Gecko) Ubuntu/12.04 Chromium/18.0.1025.151 Chrome/18.0.1025.151 Safari/535.19" 24.210.144.32 - - [15/Jun/2012:18:27:26 +0000] "GET /facebook/ HTTP/1.1" 200 67 "-" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/535.19 (KHTML, like Gecko) Ubuntu/12.04 Chromium/18.0.1025.151 Chrome/18.0.1025.151 Safari/535.19" 

Finally, I tried digging up the response object using the Chrome developer tools, but it looks like everything returned when viewing the iframe version is the content headers.

Does anyone know what is going on here? Or any ideas on how to debug this problem? Thanks.

Edit: I copied and pasted the URL of the Facebook application to the same place. I'm going to repeat it here again just in case I did something wrong. I'm not sure why he throws 404.

Copied and pasted directly from the address bar: http://apps.facebook.com/fireflietest/

Update: Turns out I had to flip Sandbox mode. There should not be more than 404. Of course, I still encounter the original problem, due to which my iFrame appears empty. Thanks!

Update 2: (copied and pasted from my Django user group)

I tried to diagnose this problem. I donโ€™t even know what is going on.

  • I tried just serving a simple .html page on Nginx to find out if there is a problem there. It did not work properly (with an error), but in fact it displayed an error. The problem is that you cannot send POST to static pages in NGINX. It's okay, I'm not trying to load a static page at all.

  • I looked through my log files. It turns out my application is shutting down. This makes no sense, since it does not timeout elsewhere.

  • Here are some magazines that show something peculiar. I am not sure how to debug the problem. From what I read, thatโ€™s what I draw.

Nginx correctly receives the request. Nginx sends a request to the uWSGI application (django). Django successfully receives the request. Django is trying to answer, but that should be where it breaks.

I'm not sure what the problem is - but it has something to do with what is inside the iframe framework. (I still need to check the removed iframes in general, I will do it next time)

 uWSGI Logs: [pid: 11059|app: 0|req: 3/4] 24.210.144.32 () {52 vars in 1170 bytes} [Tue Jun 19 14:24:03 2012] POST /facebook/ => generated 0 bytes in 444 msecs (HTTP/1.1 500) 0 headers in 0 bytes (0 switches on core 0) [pid: 11345|app: 0|req: 1/1] 24.210.144.32 () {52 vars in 1170 bytes} [Tue Jun 19 14:24:31 2012] POST /facebook/ => generated 2970 bytes in 333 msecs (HTTP/1.1 200) 4 headers in 128 bytes (1 switches on core 0) [pid: 11353|app: 0|req: 3/31] 24.210.144.32 () {52 vars in 1172 bytes} [Tue Jun 19 14:31:04 2012] POST /facebook/ => generated 2970 bytes in 3 msecs (HTTP/1.1 200) 4 headers in 128 bytes (1 switches on core 0) [pid: 11954|app: 0|req: 1/14] 24.210.144.32 () {52 vars in 1216 bytes} [Tue Jun 19 14:35:04 2012] POST /facebook/ => generated 2970 bytes in 343 msecs (HTTP/1.1 200) 4 headers in 128 bytes (1 switches on core 0) [pid: 11950|app: 0|req: 2/31] 24.210.144.32 () {52 vars in 1211 bytes} [Tue Jun 19 14:48:57 2012] POST /facebook/ => generated 2970 bytes in 3 msecs (HTTP/1.1 200) 4 headers in 128 bytes (1 switches on core 0) [pid: 11962|app: 0|req: 4/57] 24.210.144.32 () {52 vars in 1216 bytes} [Tue Jun 19 14:53:43 2012] POST /facebook/ => generated 2970 bytes in 2 msecs (HTTP/1.1 200) 4 headers in 128 bytes (1 switches on core 0) Nginx Error Logs: 2012/06/19 20:02:30 [error] 11164#0: *29617 readv() failed (104: Connection reset by peer) while reading upstream, client: 24.210.144.32, server: fireflie.com, request: "POST /facebook/ HTTP/1.1", upstream: "uwsgi://<commented out for security>", host: "www.fireflie.com", referrer: "http://apps.facebook.com/253156011452899/" Nginx Access Log: 24.210.144.32 - - [19/Jun/2012:20:02:30 +0000] "POST /facebook/ HTTP/1.1" 200 31 "http://apps.facebook.com/253156011452899/" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/535.19 (KHTML, like Gecko) Ubuntu/12.04 Chromium/18.0.1025.151 Chrome/18.0.1025.151 Safari/535.19" 24.210.144.32 - - [19/Jun/2012:20:03:29 +0000] "-" 408 0 "-" "-" 24.210.144.32 - - [19/Jun/2012:20:03:29 +0000] "-" 408 0 "-" "-" 
+2
source share
4 answers

Decision

The problem was in uWSGI. I'm not quite sure why it does not work, but I believe that this could be due to the fact that Facebook Canvas App POSTing has too little data. Anyway, here's a fix that worked for me.

I changed the uWSGI configuration options. I added the following three options, even if the first one can be non-op, and the last one is probably just there for good security (it works on my intermediate site without it).

 <pep3333-input/> <post-buffering>4096</post-buffering> <buffer-size>32768</buffer-size> 
+2
source

There used to be a problem with IE without a flash installed. I don't know if they fixed it.

CSRF is also a candidate. Try removing the csrf decorator and disabling the csrf viewer middleware.

You can also try it on your local computer. Set the URL of localhost.local: 8000 in the settings of the Facebook application or create a new application with these settings) and add localhost.local to your hosts file. This allows you to have DEBUG = True and logging.

+1
source

I came across what, in my opinion, is the same problem today using Flask. GETs worked fine, POST failed, but Flask did not report errors, and Firebug / Chrome Dev Tools did not report anything except "connection was reset".

Then I found this snippet by the creator of Flask Armin Ronacher:

http://flask.pocoo.org/snippets/47/

which explains the problem and contains a fix that worked for me. Given that you played with the buffer parameters, I suspect that this could be the same problem.

Hope this helps you figure out the cause of the problem, at least.

+1
source

This seems to be a known issue. A workaround for this will be a good start.

0
source

All Articles