Nginx, Wordpress, admin modal windows blank. Stumped.

March 17, 2017 285 views
Nginx WordPress Ubuntu 16.04

Hi,
Last evening I installed Wordpress on a fresh, SSL, LEMP stack. I've done this several times now, following do's excellent tutorials.

Everything runs great, except on every install, the modal windows used in a few places within Wordpress admin side always open blank.

The easiest place to see this is when clicking the "plugin details" link on any plugin in the plugin list. Likewise, if trying to use the Customizer, the "live" view of the website is blank.

Both are basically trying to pull data from external links into a modal window.

Is there some nginx config adjustment necessary, or firewall perhaps, to facilitate this??

8 Answers

My first guess would be that you haven't installed Curl (or php-curl), since the plugin details page is actually being downloaded to your server and then displayed to you. So it's actually not displaying external links in the modal window.
Or it could be a firewall that is blocking outbound traffic, but that would be something that you've setup.

Thanks @hansen. That gives me a place to start. I will take a look at both to confirm.

Disabled firewall. Problem still exists. Installed php-curl. Problem still exists. If I select the link and choose open in new tab, the link loads in the ne tab properly. Could this be something to do with nginx and JavaScript or permissions in Wordpress??

  • Try to run php -m which will show you a list of all the modules compiled. Is curl part of the list?
    Which version of PHP are you using?
    Does your /var/log/nginx/error.log give you any information?

    This has nothing to do with Nginx, JavaScript and probably not WordPress (unless you have some plugins/code that interferes with how it works by default).

    • @hansen
      Thanks...
      I ran the command php -m and curl is there on the list.

      This is the error log:

      2017/03/17 06:41:57 [error] 1533#1533: *32 directory index of "/var/www/html/" is forbidden, client: 180.76.15.154, server: , request: "GET / HTTP/1.1", host: "jameswestpaintings.com"
      2017/03/17 07:15:17 [error] 1533#1533: *34 directory index of "/var/www/html/" is forbidden, client: 180.76.15.8, server: , request: "GET / HTTP/1.1", host: "jameswestpaintings.com"
      2017/03/17 09:17:23 [error] 1533#1533: *41 directory index of "/var/www/html/" is forbidden, client: 174.209.24.224, server: , request: "GET / HTTP/2.0", host: "www.jameswestpaintings.com"
      2017/03/17 14:07:36 [error] 1533#1533: *132 FastCGI sent in stderr: "PHP message: ** Detecting configuration **
      PHP message: plugin version: 2.5.11
      PHP message: Already on SSL, start detecting configuration
      PHP message: ssl type: SERVER-HTTPS-ON
      PHP message: ** Configuring SSL **
      PHP message: could not remove rules from htaccess, file not writable
      PHP message: converting siteurl and homeurl to https" while reading response header from upstream, client: 174.209.24.224, server: , request: "GET /wp-admin/options-general.php?page=rlrsssl_really_simple_ssl&tab=settings&settings-updated=true HTTP/2.0", upstream: "fastcgi://unix:/run/php/php7.0-fpm.sock:", host: "jameswestpaintings.com", referrer: "https://jameswestpaintings.com/wp-admin/options-general.php?page=rlrsssl_really_simple_ssl&tab=settings"
      2017/03/17 14:07:42 [error] 1533#1533: *132 FastCGI sent in stderr: "PHP message: ** Detecting configuration **
      PHP message: plugin version: 2.5.11
      PHP message: Already on SSL, start detecting configuration
      PHP message: ssl type: SERVER-HTTPS-ON
      PHP message: ** Configuring SSL **
      PHP message: could not remove rules from htaccess, file not writable
      PHP message: converting siteurl and homeurl to https" while reading response header from upstream, client: 174.209.24.224, server: , request: "GET /wp-admin/options-general.php?page=rlrsssl_really_simple_ssl&tab=debug HTTP/2.0", upstream: "fastcgi://unix:/run/php/php7.0-fpm.sock:", host: "jameswestpaintings.com", referrer: "https://jameswestpaintings.com/wp-admin/options-general.php?page=rlrsssl_really_simple_ssl&tab=settings"
      
      

@jameswestpaintings

Please post the server block for one of your WordPress installations in full so we can take a look at the configuration and see if there's anything there that may be causing issues.

This is the server block. Install is fresh as of last night. Only site on server Thanks for the help! I'm baffled...

You should look at the following URL's in order to grasp a solid understanding of Nginx configuration files in order to fully unleash the power of Nginx. http://wiki.nginx.org/Pitfalls http://wiki.nginx.org/QuickStart http://wiki.nginx.org/Configuration Generally, you will want to move this file somewhere, and start with a clean file but keep this around for reference. Or just disable in sites-enabled. Please see /usr/share/doc/nginx-doc/examples/ for more detailed examples. Upstream to abstract backend connection(s) for php
upstream php {
server unix:/tmp/php-cgi.socket;
server 127.0.0.1:9000;
}
Default server configuration

server {
listen 80 defaultserver;
listen [::]:80 default
server;
servername jameswestpaintings.com www.jameswestpaintings.com;
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-jameswestpaintings.com.conf;
include snippets/ssl-params.conf;
#
# Note: You should disable gzip for SSL traffic.
# See: https://bugs.debian.org/773332
#
# Read up on ssl_ciphers to ensure a secure configuration.
# See: https://bugs.debian.org/765782
#
# Self signed certs generated by the ssl-cert package
# Don't use them in a production server!
#
# include snippets/snakeoil.conf;

# Add index.php to the list if you are using PHP
index index.php index.html index.htm index.nginx-debian.html;

root /var/www/html;

location ~ /.well-known {
    allow all;
}

#location / {
    # First attempt to serve request as file, then
    # as directory, then fall back to displaying a 404.
    #try_files $uri $uri/ =404;
#}

# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
location ~ \.php$ {
    include snippets/fastcgi-php.conf;
#
#   # With php7.0-cgi alone:
#   fastcgi_pass 127.0.0.1:9000;
#   # With php7.0-fpm:
    fastcgi_pass unix:/run/php/php7.0-fpm.sock;
}

# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one

location ~ /\.ht {
    deny all;
}

location ~* /(?:uploads|files)/.*\.php$ {
deny all;
}

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

location = /robots.txt {
allow all;
log_not_found off;
access_log off;
}

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

location / {
# This is cool because no php is touched for static content.
# include the "?$args" part so non-default permalinks doesn't break when using query string
try_files $uri $uri/ /index.php?$args;
}

}

Virtual Host configuration for example.com You can move that to a different file under sites-available/ and symlink that to sites-enabled/ to enable it. server { listen 80; listen [::]:80; server_name example.com; root /var/www/example.com; index index.html; location / { try_files $uri $uri/ =404; }
code

@jameswestpaintings

The SSL plugin shouldn't really be necessary since you can simply set both URL's to use HTTPS in the WordPress Admin CP. Unless something has changed in WordPress to where a plugin is required to enable HTTPS (and setting both URL's no longer works), it's simply overhead and may be the source of one issue (as was the case with a previous community question).

You're already redirecting using NGINX from Port 80 (HTTP) to 443 (HTTPS/SSL), so I'd simply disable the plugin and check to see if the issue persists.

  • I did disable, actually even deleted, the plugin as I too suspected it. No change. There are no other plugins installed. Note that the theme customizer window doesn't display the preview either. Perhaps a related problem as both are iframes I think.

    • @jameswestpaintings

      The only thing I can think of right off, since we're dealing with cross-domain requests, is an issue with CORS -- though unless CORS is somehow setup via a plugin, or headers are now default in WordPress, I wouldn't think that would be an issue.

      Had your NGINX configuration shown CORS configuration, I'd say that's it, but unless CORS is configured in one of the included files that I can't see in your server block, then it should not be a concern.

      Even still, if you're using Chrome, you can install a plugin to allow *, which I'd recommend at least testing:

      https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en

      Beyond that, there's a CORS plugin that will allow you to set which sites are allowed and not allowed:

      https://wordpress.org/plugins/wp-cors/

      ...

      Again, the above shouldn't be an issue unless those headers are being sent somehow outside of your NGINX configuration, but it's worth testing at the very least.

      I can honestly say the last 30-40 installations of WordPress I've done in the past few weeks (testing and for clients), I've never ran in to WordPress just failing to load a page or an issue with CORS where CORS wasn't part of the actual configuration.

I sincerely appreciate the help you both gave :)
After almost a solid ten hours of googling and reading and staring at config files I stumbled on
this:
https://wordpress.org/support/topic/multiple-x-frame-options-headers-with-conflicting-values-sameorigin-deny/

I decided to have a look at my ssl-params.conf file. Which, BTW, I pasted from this tutorial on DO:
https://www.digitalocean.com/community/tutorials/how-to-secure-nginx-with-let-s-encrypt-on-ubuntu-16-04

Lo and Behold! This line doth exist therein:
add_header X-Frame-Options DENY; (lol! Just LOOK at how that word defiantly stands out!)

Note: l'm not dissing the tutorial at all. The DO tutorials are all top notch! For a noob to LEMP though, and one using Wordpress, This was a BIG-Time gotcha lol!

One, yes one keystroke later, the lil' SOB was commented into eternity! And NOW the plugin details link works, as does the Customizer preview. My tension headache is already subsiding and normal vision will return upon a good nights sleep :)

I soooo appreciate your willingness to provide input! This is a great community :)

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.
Have another answer? Share your knowledge.