Web security concern for Mixed content

Question

I am losing the green padlock on my WordPress website due to an image loading over http rather than https.

Is this really a risk or is the browser being overly harsh?

Answer 1

TL;DR

Is this really a risk or is the browser being overly harsh?

The answer to the first facet of your question above is relative and can be opinionated; being pedantic, YES, it is a risk as that which is "not secured" can be tempered with.

Security here as the essence and concern as one makes mention of risk(s) is regarded by some as a state rather than a process (... quite a debatable topic).

Answering whether your browser is overly harsh, NO, as this depends on it's settings and by default, it should act as you've just noticed.

As such, I hope the explanation below will enable you understand further.

---

You are surely serving your WordPress site resources with Mixed Contents. In other words, some of the resources on your WordPress site are served over https while others (an image, in this very case) are served over http.

In your browser's console (accessible with the Ctrl + Shift + i keyboard combination when using the Google Chrome browser), you would have see an error similar to the one below when accessing the page that contains the image in question:

Mixed Content: The page at 'https://example.com/' was loaded over HTTPS, but requested an
insecure script 'http://example.com/img/avatar.png'. This request has been blocked; the
content must be served over HTTPS.

What this simply means is that while your website (and other referenced resources) were loaded over https, your image file, avatar.png, was loaded over http and as such was regarded as insecure by your browswer.

To resolve this challenge, make sure to load your image (as well as all other affected resources, should there be) over https by searching and replacing all http occurrences with https throughout your project.

... more details here.