Resolving Mixed Content Warnings and WordPress SSL Settings

Last Updated on April 3, 2017 by Eddie Kremanis

Creating a competent website involves consideration of a lot of issues that range from the owner of the site, the person employed to create the site, the administrator or manager of the site and most importantly the audience.

Most online shoppers and users, in general, are increasingly getting concerned about their online security. SSL certificate has become a necessary formality for every meaningful e-commerce store or website.

In fact, it is among the conditions laid down for websites to become PCI compliant. Before online users share their confidential information with any site, they look out for cues of an SSL certificate such as “HTTPS,” a lock icon and also a green bar for extended SSL certificate.

To succeed online, you must take care of both your security and the security of the visitors to your site. No one wants to see “site down” error messages or web browser warnings. Having your site secured with SSL Certificate is not enough. You must ensure that it is well configured in your web browser or web server.

The purpose of this article is to show you how to serve secure web pages and secure assets such as script images and forms, and also how to find and resolve browser security errors.

HTTPS Basics

Hypertext Transfer Protocol Secure or HTTPS is used for secure communication over the internet. Whenever you access a page that uses HTTPS, you will see https:// in the URL and a lock icon in the browser.

Confidential information such as passwords, credit card numbers and other sensitive user information need to be submitted securely using HTTPS. To enable HTTPS browsing, you need to purchase and install an SSL certificate on your web server.

Pages can still be served via HTTP while including HTTPS forms for reasons of caching. The downside of this would be that users won’t see the cues associated with a secured site (padlock icon as well as a green bar address).

Most importantly, browsers will give warning when web pages that include HTTP assets such as forms, scripts, and images are served via HTTPS. Browser warning messages can raise the alarm to some of your site visitors and cause them not to complete a transaction or complete a form.

WordPress HTTPS

After successful installation of SSL certificate on your server, you are required to implement HTTPS into your WordPress site. Here are 3 valid ways of going about the process.

OPTION 1: Forcing all pages to HTTPS

Forcing all pages to HTTPS is the easiest option. However, it isn’t appropriate as caching is not enabled for HTTPS pages. You can serve all the pages of your WordPress via HTTPS by going to WordPress general settings, to change the WordPress Address (URL) and the Site Address (URL) from HTTP to HTTPS.

Option 2: Limiting individual pages to HTTPS (MOST COMMON)

In most cases, you’ll find that there are a few pages that contain sensitive information which requires loading via HTTPS while the rest, which does not require SSL certificate, load through HTTP by default.

You can use the server side to enable this or make use of plugins that provide a check box. With the plugins, you can easily check the box should you want the page to be loaded by HTTPS or leave it unchecked for HTTP loading. Some good examples of such plugins are:

• WordPress HTTPS (SSL)
• Better WP Security

Option 3: Force HTTPS logins or Force both HTTPS logins and HTTPS administration

The login page should be secured against cyber attacks such as phishing. That’s why it’s ideal to secure the login page as well as the admin page.  You can achieve forcing HTTPS on the Login and Admin pages by setting up the following two wp-config.php constants:

• define (‘FORCE_SSL_LOGIN,’ true);
• define (‘FORCE_SSL_ADMIN,’ true);

If you set up the FORCE_SSL_ADMIN constant, there’s no need to set up FORCE_SSL_LOGIN separately as it’s included.

Identifying HTTP Assets on the HTTPS Page

Here’s the important part of the article you’ve been waiting for:

1. If you’ve already installed your SSL certificate correctly and can browse via HTTPS by typing it manually into the address bar; and
2. Your HTTPS plugin(s) and a/orwp-config.php constant(s) are setup and working.
3. Should the browser show up the “insecure content” or “non-encrypted content warning.”

Then, it proves that there are non-HTTPS contents on the website.  Here are some methods of resolving the browser security warnings about mixed content.

1. View Source

For this method, load the page via HTTPS, right-click anywhere on the page; and then click “View Page Source,” “View Source,” or “Source,” subject to your browser.

Use the “Find” command (Edit -> Find or Ctrl+F or Cmd+F) and search for:

src=”http:

(With double quote)

src=’http:

(With single quote)

With the method, you are manually looking for images, iframes, scripts and any other assets served via HTTP instead of HTTPS. Should you not find any with the double and the single quote, you can move on to other HTTPS pages and repeat the same exercise as you search through view source.

2. Use a plugin

You can employ any of the available plugins to view source and find non-HTTP contents from the page as follows:

• WordPress HTTPS (SSL)( also mentioned above)
• WordPress HTTPS Test
• SSL  Insecure Content Fixer

Browsing your site via HTTPS with the use of any of these plugins while active, the plugin displays notifications of HTTP assets. Take care not to leave the plugins active while you aren’t testing as some plugins will only display to the administrator while others show the warnings to all visitors.

3. Using a third party Website to Test for Insecure Assets

You can make use of a third party website to test for insecure assets by pasting your pages URL into the third party website and let it test it for you.

A good example of such third party site is ‘‘Why No Padlock?’’ Why No Padlock is a free testing site that provides a list of all the insecurely-loaded items.  You should fix all the red X’s in your theme or plugins and then click on “Test URL Again” button to get rid of the red X’s entirely.

4. Use Google to inspect your website

Using Google is one of the best methods as it is fast, easy and can be used on any page you can access. Google Chrome’s Inspector has a Console tab. If the HTTPS page displays yellow or red in the address bar as you can see in the 2nd and 3rd column below, go ahead and open the Console to find out the insecure assets.

How to Fix Insecurely-Loaded Assets

If you decide to keep a theme or plugin, then you can fix it by using the following methods.

1. Contact the plugin developer and report the error. Make sure to deactivate the plugin.
2. You can modify some of the files with the assistance of the developer or fix the problem
3. Changing the theme of the website can prove helpful
4. You can also attempt to modify files of the currently installed theme.

Changing Assets from HTTP to HTTPS

After finding the offending assets, you can change them to respect the protocol or change them to always be served by HTTPS as follows:

1: Use Relative URLs

Should an asset be hard coded into a theme or plugin, you can change it to ‘//site.com/assets/logo.png,’ from ‘http: //site.com/assets/logo.png.’

The fix is ideal when including assets from other servers like API Scripts, iframes, or Google script.

2: Use of Proper WordPress Coding Standards

Finally, some stubborn errors cannot be resolved by using relative URLs. The following methods can solve the errors:

• home_url() and related functions
• is_ssl()
• WordPress Function Reference (avoid the ones in red as  they are deprecated)
• WP_DEBUG cab be of help too