fixing non-secure elements https

THE EVER ELUSIVE GREEN PADLOCK & non-SECURE ELEMENTS https:

If you've recently engaged in the process of securing your website you know it can be a long and tenuous process. What can be especially frustrating is getting all the major browsers (Firefox, Chrome, Safari) to recognize your hard work. Usually displayed in the form of some kind of padlock or green colored URL bar this verification can serve as a powerful message to your website's visitors that their actions and interactions on this page are fully secure. This is especially important with eCommerce websites that are exchanging financial information. However getting this verification can sometimes prove difficult.  You may see something like this after initially securing your site:

As you can see the page is running securely on 'https' but you're not getting that friendly little verification from the browser. More often than not this is due to non-secure elements loading through standard 'http' instead of 'https'. These non-secure elements include images or flash elements and even some plugins. But what are these elements? How do I know what elements are loading securely and what are not? In this guide we show you how to identify what elements are loading through 'http' using the Chrome developer tools.

Need help with WordPress security? Check out these other great posts from our blog!:

• How to fix upload issues when using Force SSL Admin
• 5 reasons to use WordPress in your next re-design

Or download our 'WordPress Security Checklist' - a great starting point for better security on your WordPress website:

GOOGLE CHROME'S DEVELOPER TOOLS:

Google's Chrome comes with a lot of useful tools for web developers and they are easily accessible. In this how-to we'll use one of those tools to diagnose page elements that aren't loading over 'https'. This can cause web browsers to show your pages as non-secure even when they are running over 'https' (SSL line).

Step 1: access chrome's 'developer tools'

To access Chrome's set of developer tools simply click the little button in the upper right hand corner of the browser scroll down to 'More Tools' and click 'Developer Tools' at the bottom of that sub menu.  This should bring up a menu at the bottom of your browser that looks something like this:

Step 2: access security tab in 'developer tools'

At the top of the 'Developer Tools' bottom tab, you'll see a menu that starts with 'Elements' and ends with 'Audits'. In this how-to we'll need to use the 'Security' sub menu to diagnose our problem:

You should see the title at the top of the page labeled 'Security Overview'. In this you can see the various things that go into securing a page. If there is a yellow text notice saying 'This page is not secure', then you have some issues to take care of. Look at the bottom of the tab, if you're getting the text '"Mixed Content" followed by "The site includes HTTP resources." Then you have insecure elements:

Go ahead and click 'View Requests in Network Panel' and you should see this screen come up:

STEP 3: RE-LOAD THE PAGE TO COMPILE MIXED-CONTENT

You may have noticed when you first access the 'Network' tab you won't see any content. Have no fear, simply re-load the page and you'll see the list compile and look something like this:

STEP 4: IDENTIFY ELEMENTS

If you simply hover over each individual listed element, you'll see the URL that element is loading from. This will be very helpful information when you're attempting to fix these security issues as it shows you the source of that element. Most likely it's just a few things and fixing goes pretty fast. If you're securing a WordPress website and have secured your site, often times plugins can hide elements from the WordPress dashboard when first securing your site. This will cause a few images, logos, etc to be loaded over http and is an easy fix.

Step 5: fix, and test!

Now that you've identified the elements, you'll have to go through and fix the issues. If you have access to your html code the go through and switch those 'http' tags to 'https'. If you're running a WordPress website go through your plugins and your theme to make sure all your uploaded images, documents, etc all have URL's that begin with 'https://'. In most cases this will solve all your problems. After you've solved all your http problems (assuming you don't have other security issues...) you should see this in the URL bar when you load the page:

AN EASY FIX TO AN ANNOYING PROBLEM:

We hope that this blog helped you fix a problem you were having. It can be really annoying when the browser doesn't recognize the hard work you've put into making your website more secure. However, if all elements aren't loading securely this can open your website to hackers which is never a good thing. 

THANKS FOR READING THIS POST ON WORDPRESS SECURITY:

Thanks for visiting our blog and reading this installment in our WordPress Security series!  We hope that it helps you get your site running at peak performance with a greater level of security.  If you're looking for more great WordPress security pointers check out our full blog or subscribe in the footer at the bottom of this page. Also be sure to download our "WordPress Security Checklist" and find out what you need to be doing to keep your WordPress site safe.  Click the link below to download!