iFrame 在 Facebook Canvas 应用程序中显示为空白答案

【问题标题】：iFrame showing up Blank in Facebook Canvas AppiFrame 在 Facebook Canvas 应用程序中显示为空白
【发布时间】：2012-10-09 23:36:01
【问题描述】：

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

如果我们直接点击链接，它会正确显示。如果在 Firefox 中，我右键单击 iframe 并选择仅显示该框架的选项 - 那么它会正确显示。但是，在查看 Facebook 应用程序时，什么都没有显示。

这是应用程序链接：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)

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

这是显示它两次都返回 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 应用程序的 URL 复制并粘贴到同一位置。我将在这里再次复制它，以防我做错了什么。我不确定它为什么会抛出 404。

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

更新：原来我不得不关闭沙盒模式。不应该再有 404。当然，我仍然遇到原始问题，即我的 iFrame 显示为空。谢谢！

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

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

我尝试在 Nginx 上提供一个简单的 .html 页面，看看是否是问题所在。它没有正确服务（通过错误），但它确实显示了错误。存在的问题是，您无法在 NGINX 中发布到静态页面。没什么大不了的，反正我也不想加载静态页面。
我查看了我的日志文件。事实证明，我的应用程序正在超时。这没有任何意义，因为它不会在其他任何地方超时。
这里有一些日志显示发生了一些奇怪的事情。我不确定如何调试问题。不过，从我正在阅读的内容来看——这就是我所描绘的。

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

【问题讨论】：

„这里是应用链接：apps.facebook.com/fireflietest ” - 这只会导致来自 FB 的 404 消息。请编辑您的问题并提供正确的网址。
谢谢，CBroe！我现在正在编辑它。
Firebug 显示有一个请求访问您的网站，访问 www.fireflie.com/facebook/ 但没有得到 any 数据的答复。因此，请检查您的服务器日志并调试您的应用程序，以了解为什么在 Facebook iframe 中调用时它没有提供任何数据。
Cbroe，再次感谢您的回复。实际上，在我看到您的消息之前，我就这样做了。日志发生了一些奇怪的事情（我将附上我的帖子）

标签： django iframe nginx facebook-canvas uwsgi

【解决方案1】：

解决方案

问题出在 uWSGI 上。我不确定为什么它不起作用——但我相信这可能与 Facebook 的 Canvas 应用发布的数据太少有关。无论如何，这是对我有用的修复方法。

我修改了我的 uWSGI 配置选项。我添加了以下三个选项，尽管第一个可能是无操作的，而最后一个可能只是为了保证良好的安全性（在没有它的情况下它可以在我的暂存站点上工作）。

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

【讨论】：

【解决方案2】：

以前没有安装flash的IE有问题。我不知道他们是否修复了它。

CSRF 也是一个候选者。尝试移除 csrf 装饰器并停用 csrf 视图中间件。

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

【讨论】：

感谢您的建议！我实际上试了一下。我做的第一件事是使用 localhost（通过 /etc/hosts & 和一个 dyndns 域）。它工作得很好。然后我尝试了删除 csrf 中间件和对该视图的豁免的想法。它现在返回 200 OK 但没有正文内容。但是，如果您直接查看该页面 - 它可以正常工作。为此，我切换到我们的临时站点：fireflie.org/facebook/

【解决方案3】：

我今天在使用 Flask 时遇到了我认为相同的问题。 GET 工作正常，POST 失败，但 Flask 没有报告任何错误，Firebug / Chrome 开发工具除了“连接已重置”之外没有报告任何内容。

然后我发现了 Flask 创建者 Armin Ronacher 的这个 sn-p：

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

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

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

【讨论】：

【解决方案4】：

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

【讨论】：

您好，感谢您提供答案。不幸的是，我不确定您是否看到了实际问题。从我看到的错误报告中，这些人似乎遇到了 404 错误。就我而言，该 404 错误是由启用沙盒模式引起的。我们禁用了它，因此它不应再引发错误。如果您认为这个错误仍然与我的问题有关（iFrame 为空白），请告诉我。
嗯，我同意你的观点，如果你禁用了沙盒模式，这将不适用。但是，在沙箱中会使您的命名空间不被外部化，这是不确定的......