facebookfacebook-canvasfacebook-iframe

Facebook iframe self hosted app not displayed

I am currently integrating a HTML5 app into Facebook and testing the iFrame mechanism. I am self-hosting the game content however when I point the Facebook app system to the content, the page is not being displayed.

My hosted page is a simple Hello World app for now as illustrated below, and can be found at: 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>

The app configuration in the Facebook app developer console appears as:

App Configuration

I have used the following HTTPS url which has a valid SSL certificate as required:

Hosted Content

The app page contents are empty and upon inspection of the Facebook app page DOM, it is apparent that the iframe contents have been stripped from the hosted page:

Empty Content App Page

My expected result would be that the contents of the self-hosted webpage would be visible in the Facebook app page. The actual result is that the contents are empty and the DOM contains an iframe tag with empty head and body tags.

Solution

  • Thanks to @cbroe I was able to pin this down to an X-Frame-Options error. My solution has been to include the following php headers to the page:

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