tophee
By:
tophee

WordPress/Nginx: some backend pages not showing until page refresh

February 7, 2017 632 views
Nginx WordPress PHP Ubuntu 16.04

I am just starting to setup my WP site and things are generally working fine but in the backend (WP-admin) I have this strange issue that some pages remain blank until I reload the page in the browser. In particular, this is the case when I go to Appearance -> Themes -> Customize. It produces an entirely blank page and when I refresh it, it shows what it's supposed to show.

I believe the same issue occurs when I go to Plugins -> Add New and click on "More Details" of any of the displayed plugins. This will open up a screen overlay on which I see a rotating clock icon for half a second, then it disappears and the overlay stays blank. I can only assume that this is issue is the same because in this case I cannot refresh the blank page (as this will refresh the entire page, not just the overlay) but it seems plausible that the two are related. [Edit: just noticed that the turning clock also briefly shows in the first example]

I am not a developer so I can't even tell what broader phenomenon this is a part of, except that these are php pages. So even if you don't have the solution, if you could explain what I could search for, it would be much appreciated.

My hunch is that this issue might be due to some misconfiguration of Nginx so I paste my /etc/nginx/sites-available/default below (the /etc/nginx/nginx.conf is in its original state, not modified by me, so it should be fine.

upstream forum {
    server 127.0.0.1:8080 fail_timeout=0;
}

upstream php {
        server unix:/tmp/php-cgi.socket;
        server 127.0.0.1:9000;
}

server {
        listen 80 default_server;
        listen [::]:80 default_server;
        server_name mydomain.net *.mydomain.net 46.101.***.***
        return 301 https://$server_name$request_uri;
        }

server {
        # SSL configuration
        listen 443 ssl http2 default_server;
        listen [::]:443 ssl http2 default_server;
        include snippets/ssl-mydomain.net.conf;
        include snippets/ssl-params.conf;
        root /var/www/html;

       index index.php index.html index.htm;

        location / {
                  try_files $uri $uri/ /index.php?q=$uri&$args; 
        }

        error_page 404 /404.html;

        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
                root /usr/share/nginx/html;
        }

        location ~ \.php$ {
                include fastcgi.conf; 
                fastcgi_intercept_errors on;
                try_files $uri =404;
                fastcgi_split_path_info ^(.+\.php)(/.+)$;
                fastcgi_pass unix:/var/run/php/php7.0-fpm.sock;
                fastcgi_index index.php;
        }

       location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
                expires max;
                log_not_found off;
        }

        location = /favicon.ico {
                log_not_found off;
                access_log off;
        }

        location = /robots.txt {
                allow all;

3 Answers
tophee February 7, 2017
Accepted Answer

I figured it out by checking what my browser (Chrome) actually tells me about this empty page: I right clicked into the blank page and selected "Inspect element" which brought me to this error message:

Multiple 'X-Frame-Options' headers with conflicting values ('SAMEORIGIN, DENY') encountered when loading 'https://mydomain.net/wp-admin/customize.php?theme=generatepress&return=%2Fwp-admin%2Fthemes.php'. Falling back to 'DENY'.
customize.php:1 Refused to display 'https://mydomain.net/wp-admin/customize.php?theme=generatepress&return=%2Fwp-admin%2Fthemes.php' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN, DENY'.

Searching for that message brought me to this answer: https://serverfault.com/questions/801651/ which told me to change turn add_header X-Frame-Options DENY;`` intoadd_header X-Frame-Options SAMEORIGIN;In my case that setting was in/etc/nginx/snippets/ssl-params.conf```.
That solved the issue.

Note: I originally put that DENY" setting was there because of these instructions which in turn obtained the setting from https://cipherli.st/. So I am not sure whether I just made my site unsafe and if there is a different way of solving this, but I suppose the DENY setting was just a but overcautious because this post actually suggests the SAMEORIGIN setting to secure your site. But if you now better, please comment.

In this tutorial, we will show you how to use Let's Encrypt to obtain a free SSL certificate and use it with Nginx on Ubuntu 16.04. We will also show you how to automatically renew your SSL certificate. If you're running a different web server, simply follow your web server's documentation to learn how to use the certificate with your setup.

@tophee

When it comes to WordPress and blank pages, the first thing you want to do is disable all plugins and then enable them one by one until you're able to repeat the issue you're experiencing. If disabling all plugins doesn't work, then you'd start looking at other areas.

Looking at your NGINX configuration, other than not knowing what the upstream blocks are for since they aren't used in the main server block you provided, nothing looks out of place.

That said, plugins can cause issues and the best course of action is to do as above. It's a bit easier to identify issues when you enable them one by one.

For example, disable them all. Open a new browser tab with the page you're having issues with and then enable one plugin, refresh -- enable another, refresh. If you go from working, working, white page then you'll know that the last plugin you enabled is now causing the issue.

@tophee

In most cases, unless otherwise required, I use the following. You shouldn't have any issues using the same thing.

add_header X-Frame-Options SAMEORIGIN;

That said, I'm glad to hear that you were able to resolve the issue without having to go through the trouble of sifting through plugins.

If you run in to any other issues, let me know!

Have another answer? Share your knowledge.