Nginx wordpress ssl mixed content

nginxsslWordpress

I have a wocommerce site for which I am trying to setup an SSL certificate for checkout pages. The HTTP version of the site is working file. Prior to switching to nginx SSL on apache worked fine.

Following is my nginx.config file

server {
            server_name mysite.co.uk www.mysite.co.uk;
            listen 81.4.121.xxx:443 ssl;

            ssl on;

            root /home/mysite/public_html;
            index index.html index.htm index.php;
            access_log /var/log/virtualmin/mysite.co.uk_access_log;
            error_log /var/log/virtualmin/mysite.co.uk_error_log;

            ssl_certificate /home/mysite/ssl.cert;
            ssl_certificate_key /home/mysite/ssl.key;

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

            #Pass all .php files onto a php-fpm/php-fcgi server.
            location ~ [^/]\.php(/|$) {
            fastcgi_split_path_info ^(.+?\.php)(/.*)$;
            if (!-f $document_root$fastcgi_script_name) {
                    return 404;
           }
                    include fastcgi.conf;
                    fastcgi_pass 127.0.0.1:9001;
            }


    }

server {
    server_name mysite.co.uk www.mysite.co.uk;
    listen 81.4.121.xxx;               #xxx is just to hide my IP
    root /home/mysite/public_html;
    index index.html index.htm index.php;
    access_log /var/log/virtualmin/mysite.co.uk_access_log;
    error_log /var/log/virtualmin/mysite.co.uk_error_log;
    fastcgi_param GATEWAY_INTERFACE CGI/1.1;
    fastcgi_param SERVER_SOFTWARE nginx;
    fastcgi_param QUERY_STRING $query_string;
    fastcgi_param REQUEST_METHOD $request_method;
    fastcgi_param CONTENT_TYPE $content_type;
    fastcgi_param CONTENT_LENGTH $content_length;
    fastcgi_param SCRIPT_FILENAME        /home/mysite/public_html$fastcgi_script_name;
    fastcgi_param SCRIPT_NAME $fastcgi_script_name;
    fastcgi_param REQUEST_URI $request_uri;
    fastcgi_param DOCUMENT_URI $document_uri;
    fastcgi_param DOCUMENT_ROOT /home/mysite/public_html;
    fastcgi_param SERVER_PROTOCOL $server_protocol;
    fastcgi_param REMOTE_ADDR $remote_addr;
    fastcgi_param REMOTE_PORT $remote_port;
    fastcgi_param SERVER_ADDR $server_addr;
    fastcgi_param SERVER_PORT $server_port;
    fastcgi_param SERVER_NAME $server_name;
    fastcgi_param HTTPS $https;

# WP Super Cache rules.
# Designed to be included from a 'wordpress-ms-...' configuration file.

set $cache_uri $request_uri;

# POST requests and urls with a query string should always go to PHP
if ($request_method = POST) {
        set $cache_uri 'null cache';
}

if ($query_string != "") {
        set $cache_uri 'null cache';
}   

# Don't cache uris containing the following segments
if ($request_uri ~* "(/wp-admin/|/xmlrpc.php|/wp-(app|cron|login|register|mail).php|wp-.*.php|/feed/|index.php|wp-comments-popup.php|wp-links-opml.php|wp-locations.php|sitemap(_index)?.xml|[a-z0-9_-]+-sitemap([0-9]+)?.xml)") {
        set $cache_uri 'null cache';
}   

# Don't use the cache for logged in users or recent commenters
if ($http_cookie ~* "comment_author|wordpress_[a-f0-9]+|wp-postpass|wordpress_logged_in") {
        set $cache_uri 'null cache';
}

# Use cached or actual file if they exists, otherwise pass request to WordPress
location / {
        try_files /wp-content/cache/supercache/$http_host/$cache_uri/index.html $uri $uri/ /index.php?$args ;
}    

#Leverage browser caching
location ~*  \.(jpg|jpeg|png|gif|ico|css|js)$ {
        expires 365d;
    }location ~*  \.(pdf)$ {
        expires 30d;
} 


            # Pass all .php files onto a php-fpm/php-fcgi server.
            location ~ [^/]\.php(/|$) {
            fastcgi_split_path_info ^(.+?\.php)(/.*)$;
            if (!-f $document_root$fastcgi_script_name) {
                    return 404;
            }   
                    include fastcgi.conf;
                    fastcgi_pass 127.0.0.1:9001;
            }


}

All the css files that have query string attached to them (i.e. http://example.com/file.css?v1.23) are causing the problem.

Most of the jpg files are also forced to fetch from non SSL version of the site.

Following is an error I am seeing in chrome console.
(index):51 Mixed Content: The page at 'https://www.mysite.co.uk/' was loaded over HTTPS, but requested an insecure stylesheet 'http://www.mysite.co.uk/wp-content/plugins/contact-form-7/includes/css/styles.css?ver=4.4.1'. This request has been blocked; the content must be served over HTTPS.

I have no idea what is causing this problem? If anyone can help that would be great.

Best Answer

You need to move your Wordpress site entirely to SSL otherwise you'll keep getting these messages. Wordpress and plugins simply use the URL you set in the configuration, which is why the mixed protocols message. Simply redirect from http to https

# Redirect all variations to https://www domain
server {
  listen 80;
  server_name example.com www.example.com;
  return 301 https://www.example.com$request_uri;
}

Your SSL config looks strange. Where you say

server_name mysite.co.uk www.mysite.co.uk;
listen 81.4.121.xxx:443 ssl;
ssl on;

I would use

server_name mysite.co.uk www.mysite.co.uk;
listen 443 ssl http2; # NB http2 requires a recent version of nginx

# Set up preferred protocols and ciphers. TLS1.2 is required for HTTP/2
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;
ssl_ciphers ECDH+AESGCM:ECDH+AES256:ECDH+AES128:DH+3DES:!ADH:!AECDH:!MD5;

# This is a cache for SSL connections
ssl_session_cache shared:SSL:2m;
ssl_session_timeout 60m;
Related Topic