Facebook iframe 自托管应用程序未显示答案

【问题标题】：Facebook iframe self hosted app not displayedFacebook iframe 自托管应用程序未显示
【发布时间】：2018-04-09 10:47:29
【问题描述】：

我目前正在将一个 HTML5 应用程序集成到 Facebook 并测试 iFrame 机制。我是自托管游戏内容，但是当我将 Facebook 应用系统指向内容时，页面没有显示。

我的托管页面现在是一个简单的 Hello World 应用程序，如下图所示，可以在以下位置找到：https://bluebeck.space/alienz/fb/

<!DOCTYPE html>
<html lang="en-us">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta charset="utf-8">
        <title>Alienz</title>
    </head>
    <body>
        <div><p>Hello, World!</p></div>
    </body>
</html>

Facebook 应用开发者控制台中的应用配置显示为：

我已根据要求使用了以下具有有效 SSL 证书的 HTTPS url：

应用页面内容为空，在检查 Facebook 应用页面 DOM 后，很明显 iframe 内容已从托管页面中剥离：

我的预期结果是自托管网页的内容将在 Facebook 应用页面中可见。实际结果是内容为空，并且 DOM 包含一个带有空头和正文标签的 iframe 标签。

【问题讨论】：

检查浏览器控制台，它应该包含一条消息，告诉您出了什么问题。（提示：问题在于你自己。）

标签： facebook facebook-canvas facebook-iframe

【解决方案1】：

感谢@cbroe，我能够将其归结为 X-Frame-Options 错误。我的解决方案是在页面中包含以下 php 标头：

<?php
header('X-Frame-Options: ALLOW-FROM https://apps.facebook.com/');
header('Content-Security-Policy: frame-ancestors https://apps.facebook.com/');
?>

【讨论】：