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.
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. After installation and activation, it will show you the following screen:
Please, only use this plugin if your server has a functional SSL (a self-signed SSL is enough) installed that matches your domain and your SSL Mode is set to "Full HTTPS" or it'll end up in a redirect loop.
To force the HTTP -> HTTPS redirection, you need to reach
WordPress Admin -> Settings -> SSL -> Settings tab, select "Enable WordPress 301 redirection to SSL" and press Save.
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:
cd /path/to/webroot 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 so we can help you fix it.
Note: Other Platforms
If you are not running a WordPress site, you can also check this blog post for more information.