Trouble logging in - CORS, Blank Page - X-FRAME-OPTIONS Errors

If you have trouble logging into your app, or displaying content, CORS (cross origin resource sharing) may be the issue. The error sometimes looks like this in a browser console:

This can be caused by settings on your website, or a plugin conflict.

How to Fix CORS Errors

You may need to try multiple things to find the fix, please try them in the order we have listed below. Try one fix and see if it works, if not add the next fix and try again.

Enable CORS setting

Visit your WordPress website, and click AppPresser in the left side menu. Towards the top of the AppPresser settings, you will see "Enable CORS." Check this box and save. This allows content from any location to appear in your app by adding "Access-Control-Allow-Origin: *" to your website.

JWT CORS 

If you see errors when logging in, you may need to add this line to your wp-config.php:

define('JWT_AUTH_CORS_ENABLE', true);

Plugin Conflict

Sometimes login errors are due to a plugin conflict. Add our plugin blocker to your site, and block all plugins except AppPresser plugins and JWT auth. If that fixes the issue, you can re-enable plugins a few at a time to see what plugin is causing the issue. https://docs.apppresser.com/article/438-plugin-blocker

PHP CORS Header

If nothing else is working for you, you can add this line to the top of any php file that is loaded in your app. For example, a custom plugin file. Make sure it's not a plugin that is auto-updated, or it will be deleted when the plugin updates.

header("Access-Control-Allow-Origin: *");<br>

ALLOWALL Method

Most sites have an .htaccess file in the site root that you can edit via SFTP. Add the line below towards the top of the file as shown.

header always set x-frame-options "ALLOWALL"

Enable Authorization Header

If you still can't login, make sure you have authorization headers enabled.

Most of the shared hosting has disabled the HTTP Authorization Header by default. To enable this option you’ll need to edit your .htaccess file adding the following:

# BEGIN AppPresser
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{HTTP:Authorization} ^(.*)
RewriteRule ^(.*) - [E=HTTP_AUTHORIZATION:%1]
</IfModule>
# END AppPresser

To enable this option on an NGINX server, including WP Engine hosting, please contact them for help.

Add the code for enabling the Authorization header right before this line # BEGIN WordPress  or ask your web host provider to make that change.

If you see errors when logging in, you may need to add this line to your wp-config.php:

define('JWT_AUTH_CORS_ENABLE', true);

Multiple Headers

This is rare, but if you see something like "Multiple CORS header ‘Access-Control-Allow-Origin’ not allowed" in your debug console, you can remove the AppPresser CORS header. Uncheck the CORS setting and add the filter below.

If you are still having trouble, please contact support.

Blank page in your app - X-FRAME-OPTIONS errors

A 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.

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 inside 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: SAMEORIGIN 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:

Important! These are settings causing the issue, so don't add them to your site. Find them to adjust them.

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.

Important! These are settings causing the issue, so don't add them to your site. Find them to adjust them.

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:

Important! These are settings causing the issue, so don't add them to your site. Find them to adjust them.

<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.  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 );