Mixed Content: The page at 'url' was loaded over HTTPS, but requested an insecure image in Opencart

Question

I have one issue in my Opencart page. I recently noticed that green bar into browser is not active, and checked my console for errors. I see this warnings:

Mixed Content: The page at 'siteurl' was loaded over HTTPS, but requested an insecure image 'http://siteurl/image/catalog/category/1.png'. This content should also be served over HTTPS.

I checked admin/config.php and have set this:

<?php
// HTTP
define('HTTP_SERVER', 'https://siteurl.com/admin/');
define('HTTP_CATALOG', 'https://siteurl.com/');

 // HTTPS
 define('HTTPS_SERVER', 'https://siteurl.com/admin/');
 define('HTTPS_CATALOG', 'https://siteurl.com/');

 // DIR
 define('DIR_APPLICATION', '/home/public_html/admin/');
 define('DIR_SYSTEM', '/home/public_html/system/');
 define('DIR_IMAGE', '/home/public_html/image/');
 define('DIR_LANGUAGE', '/home/public_html/admin/language/');
define('DIR_TEMPLATE', '/home/public_html/admin/view/template/');
define('DIR_CONFIG', '/home/public_html/system/config/');
 define('DIR_CACHE', '/home/public_html/system/storage/cache/');
 define('DIR_DOWNLOAD', 
'/home//public_html/system/storage/download/');
define('DIR_LOGS', '/home/public_html/system/storage/logs/');
define('DIR_MODIFICATION', 
'/home//public_html/system/storage/modification/');
define('DIR_UPLOAD', '/home/public_html/system/storage/upload/');
define('DIR_CATALOG', '/home/public_html/catalog/');

The same configuration I have is also in siteurl.com/config.php file, but Chrome still give me that yellow warnings, and for that dont mark my site as secured. How do I resolve this? Thanks.

Answer 1

TL;DR AS the error says:

Mixed Content: The page at 'siteurl' was loaded over HTTPS, but requested an insecure image 'http://siteurl/image/catalog/category/1.png'. This content should also be served over HTTPS.

You are serving insecure image.

Try to find this line in your code/application:

http://siteurl/image/catalog/category/1.png

and replace it with httpS prefix.

so finally everything to be secured in your platform must be served from HTTPS and not HTTP

Open your browser debugger , go to network or console and debug accordingly.

UPDATE: also make sure in your cart setting:

Please go to admin area=> System=>Setting=>Edit Store=>Server=> Enable Use SSL in Security part

Update: October 17

You can also try the following:

• Important! Create a full backup for your web application (files & databases ...etc) < cPanel example.

• Enable debug mood in your app if that is available. Through configuration file, PHP Error Log and view server's error log even check your browsers' Dev Tool (F12 in Chrome browser) ... this is a good start to track down an issue in general and HTTPS Mixed content in your case.

• Disable any custom theme and use default one.

• Disable plugins one by one and test after each.
• Update core files to the latest version (bugs happen).
• Update theme to the latest // some changes and customization might be lost. (ex. For WordPress you can use child-theme to safely update parent theme from source)
• Update plugins one by one (Backup any customization)
• After each step test.
• Check your web application's Forum for similar issues and solutions.
• Contact your web application developer after trying your best.

Advanced Tip: Take on insecure image and track back to origin where it starts loaded through HTTP and not HTTPS

Some tools that might help you debug and track down the issue:

• Download free Notepad++. Learn how to find a string from bulk files.
• Browsers' console and Dev. (F12 in Chrome)
• Learn Dev. tools as deep as possible if you are dealing with bugs as a routine and not just a detour case. F12 sometimes could save you days of debugging; spend some hours learning what is behind these function keys.