How to Make All Images Secure In WordPress

how to make all images secure in WordPress

Disclosure: Nothing in this blog should be taken as investment advice. Do your own research. This blog is supported by advertising and affiliate links... Links to products and/or services on this blog may include links to affiliate programs that provide commissions to this blog. All of the content in this blog is 100% my own opinion.


Back in the summer of 2018, Google announced that certain websites would be marked with a prominent “NOT SECURE” sign when viewed through the Chrome browser.

Specifically, the reason for this warning label is to alert users if they were visiting a website that could be potentially harmful…

your website is insecure

What Is Insecure Content and Why Does It Matter?

The following in italics is a direct quote from Google’s page on “Mixed Content” aka “Insecure Content”1:

Mixed content occurs when initial HTML is loaded over a secure HTTPS connection, but other resources (such as images, videos, stylesheets, scripts) are loaded over an insecure HTTP connection. This is called mixed content because both HTTP and HTTPS content are being loaded to display the same page, and the initial request was secure over HTTPS. Modern browsers display warnings about this type of content to indicate to the user that this page contains insecure resources.

TL;DR

  • HTTPS is important to protect both your site and your users from attack.
  • Mixed content degrades the security and user experience of your HTTPS site.

Resource requests and web browsers

When a browser visits a website page, it is requesting for an HTML resource. The web server then returns the HTML content, which the browser parses and displays to users. Often a single HTML file isn’t enough to display a complete page, so the HTML file includes references to other resources that the browser needs to request. These subresources can be things like images, videos, extra HTML, CSS, or JavaScript, which are each fetched using separate requests.

HTTPS benefits

When a browser requests resources over HTTPS—which stands for HTTP Secure—it uses an encrypted connection to communicate with the web server.

Using HTTPS has three main benefits:

  • Authentication
  • Data integrity
  • Secrecy

Authentication

Is the website I’m talking to who they claim to be?

HTTPS lets the browser check that it has opened the correct website and hasn’t been redirected to a malicious site. When navigating to your bank’s website, your browser authenticates the website, thus preventing an attacker from impersonating your bank and stealing your login credentials.

Data integrity

Has anyone tampered with the content that I’m sending or receiving?

HTTPS lets the browser detect if an attacker has changed any data the browser receives. When transferring money using your bank’s website, this prevents an attacker from changing the destination account number while your request is in transit.

Secrecy

Can anyone see the content I am sending or receiving?

HTTPS prevents an attacker from eavesdropping on the browser’s requests, tracking the websites visited, or stealing information sent or received.

SSL and HTTPS as a Google Ranking Factor in the SERPs

After this announcement, Google now uses HTTPS as a ranking factor for all websites today…

What this means is that if you are trying to rank for generic keywords related to your business, if your site is insecure and your competition’s website is secure, your site will rank lower than theirs.

As such, having a “green padlock” on your website designating a valid SSL certificate is an important trust signal for sites of all kinds.

However, even if you have HTTPS running on your site, you could still have “insecure content”, such as images.

Many WordPress sites experience this because their owners (myself included) may, at one time, have inadvertently added content, such as images, or links to content, that used HTTP instead of HTTPS.

If you use the Firefox browser, you may have seen your own website with a gray padlock and a yellow triangle with an exclamation point in it…

This “yellow triangle” with the exclamation point is a sign of “Mixed Content”, as described by Google’s quote above.

How To Fix Insecure Content Images That Are Not HTTPS

But how do you fix “insecure content” in WordPress?

There are a few ways to fix insecure images in WordPress.

First you should figure out WHAT is causing the problem… One of the simplest ways to do this is to use the site “WhyNoPadlock.com” which will help you identify and troubleshoot the specific images that could be causing the insecure content issue.

Why No Padlock will provide you with a free report that can help you identify images or other content on your site that are not secure.

For instance, any insecure images may be a minor oversight on your part when adding content to your blog.

I found one offending image on my site which was causing my site to have a broken padlock.

I was linking to an affiliate image for a company I use and recommend called Mailerlite. As you can see from the image below, the affiliate link image that Mailerlite provided was offered with an “http” address instead of “https”.

fix insecure content using why no padlock

To fix this, I just manually changed the http to https in the widget where the code was written.

However, you may have a more widespread problem throughout your site… As such, you can also fix the problem by adding some code to your WordPress site, or you can use a plugin.

I prefer the latter approach because it’s easier.

Really Simple SSL

As I wrote about earlier, you can use the plugin Really Simple SSL to force the use of SSL throughout your site.

Editing the .htaccess File

The site “WhyNoPadlock.com” offers these instructions for editing your .htaccess file in your webhosting account.

Forcing the use of HTTPS:// on your site will ensure that visitors to your site are always using https://www.midlifecroesus.com and aren’t able to access an insecure http://www.midlifecroesus.com URL. This is recommended since if a visitor does access your site as http://www.midlifecroesus.com everything will be marked as “Not Secure”.

Below code is for forcing HTTPs on an Apache webserver. If you are using another webserver such as lighttpd, nginx, etc you will need to contact your web hosting provider for assistance.

Add the following code to the .htaccess file in your webhosting account:

RewriteCond %{HTTP_HOST} midlifecroesus\.com [NC]
RewriteCond %{SERVER_PORT} 80
RewriteRule ^(.*)$ https://midlifecroesus.com/$1 [R,L]

Footnotes

  1. This quote is not the entire article. If you are interested in learning about web security and how you can help make your website more secure, read the entire article.