When a user visits a page served over HTTPS, their connection with the web server is encrypted and safeguarded from man-in-the-middle (MiTM) attacks. If the HTTPS page includes content retrieved through cleartext HTTP, then the connection is only partially encrypted; the unencrypted (HTTP) content is blocked and not loaded. When that happens, it is called a mixed content page and a warning may be generated.
As you can see, it is loading the image from http:// directly, which will cause the mix content warning. This can be addressed by modifying all database entries and files (templates) in your website to load your assets over HTTPS or the relative URL path. For the example above, if you change the image source from:
It should work. The "//" causes the browser to use the same scheme of the current URL, so it will use https:// on HTTPS pages and http:// on HTTP pages.
Note: Fixing Mixed Content Warnings on WordPress
A recommended way to fix the mix content warnings in WordPress is to use the really-simple-ssl plugin.
It will automatically fix all your schemes and redirect HTTP to HTTPS. After installation and activation, it will show you the following screen:
The tool will automatically log you out of WordPress and force HTTPS on your website.
Note: Fixing Mixed Content Warnings on generic files
If you are using a generic content management system, where your template and files are on HTML or PHP files, you can do a mass search and replace to re-write your content from HTTP to HTTPS.
If you have terminal access to the server, run this query on your webroot folder to find all files that reference http:// directly:
```$ grep -r "http://example.com/" .````
Once it lists all files, you can go manually and fix all of them. If you need help, please contact our support team at https://support.sucuri.net and we can help you getting it fixed.