Images causing Mixed Content with SSL

Question

I'm trying to use SSL on my login pages but I have some images on this page and it also looks like it's loading a Google Font API so it's not saying the page is secure.

I tried to force SSL using:

define('FORCE_SSL_ADMIN', true);

However, I'm still getting the mixed content. I also tried to update my Site and Home URL to be https instead of HTTP but still getting mixed content. I even installed the WordPress HTTPS plugin and still getting mixed content.

Answer 1

Use the developer tools in Firefox (or Firebug) or Chrome or Safari or IE to see the errors with specific images.

1) You may need to change URLs of media items in the post/page content to https. Search RegEx is a good plugin to be able to search and replace (optionally with grep) through all posts, pages, excerpts, comments, titles and meta. And, interconnectit.com WordPress Serialized PHP Search Replace Tool can be used to find/replace in the entire database, i.e. metadata, GUIDs and widget content, etc.

2) You may need to change to a relative path for images in CSS files, i.e. background-image: url(http://example.com/themes/wp-content/theme/images/image.jpg) to background-image: url(images/image.jpg)

3) You may need to remove the http from absolute paths in php theme files, i.e. change 'http://example.com/image.jpg' to '//example.com/image.jpg'; that will allow your resources to default to https.

Answer 2

The ultimate answer depends on a few factors that aren't clear yet from your post, but these are some specific questions and issues you will want to address (referenced from an answer I submitted to a similar question over on the Webmasters StackExchange:

1. Did you go to Settings > General in WP Admin and change the WordPress Address and Site Address to https? This is the first action you'll need to take step at a minimum to make sure that posts use the correct base url when displayed.

2. You didn't mention exactly how you implemented your 301 Redirect (if that's how you want to force http - https) but here's an example that has worked for me in the past:

   
   <IfModule mod_rewrite.c>
      RewriteEngine On
      RewriteCond %{SERVER_PORT} 80 
      RewriteRule ^(.*)$ https://www.yoursite.com/$1 [R,L]
   </IfModule>
   

   I'd recommend manually configuring it vs. using a webhost tool as it gives you more control over the exact behavior your want to impost. Also, if you want to force SSL for the WP Admin or User Login pages, you'll need to update your wp-config.php and add this directive above the "That's all stop editing line":

   define('FORCE_SSL_ADMIN', true);

3. Do you already have a large base of posts that have been created? If so, the WP Backend may have stored html used in those posts with hard-coded absolute links to external references, css, js, or other media assets that use http vs. https. I've had good luck with the interconnectit.com WordPress Serialized PHP Search Replace Tool - it will comb through your database and allow you to replace serialized data stored in the various tables WP uses to store different types of content.

4. Are you using a 3rd Party theme for your site? Many of them use absolute vs. relative urls for embedding links to CSS & JS files or even just as base URL settings, any of which may hamper your ability to get all assets to use https. You should audit your theme's PHP files to check what methods they use to generate base URLs and also how they embed links to resources like CSS files or JS includes. Elegant Themes, one of the more popular WP Theme developers, offered this guide, which recommends using either custom code or a plugin.

5. Are you using any 3rd Party Plugins that may affect Media Assets, Posts, or other pages in use by WordPress? WooCommerce comes to mind since it has specific settings for how it handles http vs. https that may override the site-wide settings you set in part 1 above. This discussion on StackOverflow has some good info on this topic.

6. Are you using a Reverse Proxy / SSL offloading / Load Balancer / CDN service like Amazon Web Services ELB or CloudFlare? If you are, the settings that they has for SSL will affect how they serve your content to end users. CloudFlare has a specific set of instructions on how to use their flexible SSL configuration, and some users report having to add a a little bit of custom code to get the expected behavior when hosting behind load balancers. The official documentation also provides a guide on addressing this issue, regardless of which vendor you are using, though you may need to edit some code or modify a directive in your apache vhost file to enable HTTPS protocol forwarding to function properly.

Note - Most people suggest using a 3rd Party Plugin to handle all of the above for you without much troubleshooting or programming required, though I've never used any myself so can't directly recommend one vs. another. WordPress HTTPS appears to be a popular one, and there's an easy-to-follow guide on how to leverage it's features that you may find handy. It hasn't been updated for a while, though, so I'm not sure I'd recommend it unless you can't get any others to work.

Also, the plugin you choose may depend on who's hosting your site (here's one from HostGator with instructions on setup and troubleshooting) and wether or now you're using any systems like CLoudFlare or Load Balancers in your setup. Here's a list of the ones I found on the Codex.

You may also find this WP Beginners blog post a helpful resource to introduce the key concepts of using SSL on WordPress sites with a lot of great diagrams and supporting references for you to explore to develop a good understanding of why it is a little complicated to get working correctly.

Let me know which options worked best for you!