Blank Page - X-FRAME-OPTIONS

One common cause of seeing a blank page when using external pages in your app is a common security settings called X-FRAME-OPTIONS.  If this option is set to SAMEORIGIN, your content will be blocked by the browser.

Why are X-FRAME-OPTIONS Used?

Many site owners do not want other websites to display their content in an iframe. So by adding X-FRAME-OPTIONS: SAMEORIGIN to your page or entire website, browsers will not display your page in side of an iframe.  This security feature is used on Woocommerce's checkout and account pages to protect the content on those pages.

Is My Site Using X-FRAME-OPTIONS: SAMEORIGIN?

You can check if your site is adding this setting by using Chrome's Developer Tools:

  1. Open the Developer Tools
  2. View the Network tab
  3. Reload your page
  4. Click the loaded page
  5. Read the x-frame-options.

If you do not see x-frame-options in the list, then you do not have this option.  Your white page will be caused by another issue.  Most likely you can find a JavaScript error in the Developer Tool console.

How is X-FRAME-OPTIONS: SAMEOPTIONS Added?

Knowing how this setting gets added will help you to adjust or remove this setting as needed.  There are a few different ways this can be added to a page, site or your server.  If using PHP directly, it gets added using this code:

header( 'X-Frame-Options: SAMEORIGIN' );

WordPress adds this to your header using a hook.  If you are familiar with hooks, you'll know that using add_action() will add certain functions to your site, but using remove_action() will remove certain functions to your site.  WordPress uses this 'send_frame_options_header' hook for the login page and Woocommerce uses the 'wc_send_frame_options_header' hook for their checkout page.

add_action( 'login_init',  'send_frame_options_header', 10, 0 ); // WordPress login
add_action( 'template_redirect', 'wc_send_frame_options_header' ); // Woocommerce checkout page

If your web server is using Apache, you can added this setting in the .htaccess file:

<IfModule mod_headers.c>

     Header set X-Frame-Options "SAMEORIGIN"

     <FilesMatch "\.(appcache|atom|bbaw|bmp|crx|css|cur|eot|webmanifest|woff2?|xloc|xml|xpi)$">
         Header unset X-Frame-Options
     </FilesMatch>

</IfModule>

How to remove it?

As long as you understand the security reason it's added, removing it can be done using a remove_action hook or modifying an .htaccess file.

remove_action( 'template_redirect', 'wc_send_frame_options_header' );

Using this hook is how you can get the Woocommerce checkout and account pages to display in the app.  We have an easy way to added this to your site by installing our  free AppCORS plugin.  You might have other plugins adding the x-frame-options in a very similar fashion; so removing it will be very similar to this remove_action. 

Theme My Login

If you're using the theme my login plugin it will automatically add the sameorigin X-Frame-Option setting which prevents it from being loaded in the app. The following snippet will stop Theme My Login from adding that header and allow the login page to display. This code should be added to the functions.php file in your  AP3 Ion Child Theme.

function your_theme_tml_display( $output, $action ) {
    if ($action == 'login') {
        header_remove("X-Frame-Options");
    }
    return $output;
}
add_filter( 'tml_display', 'your_theme_tml_display', 10, 2 );