iFrame在Facebook Canvas App中显示空白

Question

我尝试在Facebook iframe中查看一个非常简单的页面。 这是Django视图，但不依赖于请求是通过POST还是GET提交的。 它所做的只是返回一些简单的HTML。

如果我们直接点击链接，它会正确显示。 如果在Firefox中，我右键单击iframe并选择仅显示该帧的选项-则它可以正确显示。 但是，在查看Facebook App时，没有任何显示。

这是应用程序链接： http : //apps.facebook.com/fireflietest/指向http://www.fireflie.com/facebook/

这是我非常简单的视图的代码：

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)

仅出于测试目的，我创建了一个小的HTML表单，该表单可以发布到该页面。 工作正常。 我还运行了Facebook调试工具，“抓取工具”显示它正在正确提取我们的内容。

这是服务器日志，显示它两次都返回200 OK：

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"

最后，我尝试使用Chrome的开发人员工具来挖掘响应对象，但是当查看iframe版本时，看起来好像返回的都是内容标题。

有人对这里发生的事情有任何想法吗？ 或关于如何进一步调试此问题的任何想法？ 谢谢。

编辑：我将Facebook App的URL复制并粘贴到同一位置。 我将在这里再次复制它，以防万一我做错了什么。 我不确定为什么会抛出404。

直接从地址栏中复制和粘贴： http : //apps.facebook.com/fireflietest/

更新：原来我不得不打开沙盒模式。 不应再有404。当然，我仍然遇到了最初的问题，即我的iFrame显示为空。 谢谢！

更新2 ：（从我的Django用户组thead复制并粘贴）

我一直在尝试诊断这个问题。 我不知道发生了什么。

1. 我尝试仅在Nginx上提供一个简单的.html页面，以查看问题是否出在这里。 它无法正常运行（通过错误），但实际上确实显示了错误。 那里的问题是，您无法在NGINX中发布到静态页面。 没什么大不了的，我还是不想加载静态页面。

2. 我查看了我的日志文件。 事实证明，我的应用程序正在超时。 这没有任何意义，因为它不会在其他任何地方超时。

3. 这是一些日志，这些日志显示了一些特殊的情况。 我不确定如何调试该问题。 从我正在阅读的内容来看，这是我正在发生的事情。

Nginx正确接收请求。 Nginx将请求推送到uWSGI应用程序（django）。 Django成功获取了请求。 Django尝试做出响应，但这必须在它中断的地方。

我不确定是什么问题-但这与在Facebook iframe内有关。 （一般来说，我还没有检查远程iframe，接下来我会做）

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 "-" "-"

Answer 1

解

问题出在uWSGI。 我不确定为什么它不起作用-但我相信这可能与Facebook的Canvas App POST数据量过少有关。 无论如何，这是对我有用的修复程序。

我修改了我的uWSGI配置选项。 我添加了以下三个选项，即使第一个选项可能是空操作，而最后一个选项可能只是为了安全起见（在没有它的情况下，它可以在我的登台站点上使用）。

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

Answer 2

没有安装Flash的IE曾经存在问题。 我不知道他们是否已经解决。

CSRF也是候选人。 尝试删除csrf装饰器，然后停用csrf视图中间件。

您也可以在本地计算机上试用。 在Facebook App设置中将站点URL设置为localhost.local：8000，或使用这些设置创建一个新的应用程序），然后将localhost.local添加到您的主机文件中。 这样可以使DEBUG = True和记录日志。

Answer 3

今天，我使用Flask遇到了我认为同样的问题。 GET工作正常，POST失败，但是Flask没有报告任何错误，并且Firebug / Chrome开发工具没有报告任何东西，除了“连接已重置”。

然后，我找到了Flask创作者Armin Ronacher的片段：

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

其中说明了问题，并包含一个对我有用的修复程序。 鉴于您摆弄了缓冲区参数，我怀疑这可能是同一问题。

希望它至少可以帮助您找出问题的原因。

Answer 4

看起来这是一个已知问题。 此解决方法将是一个好的开始。