What is mixed content ? HTTPS warnings

1 – What is mixed-content ?

 

Mixed-content warning is display when HTML content has been loaded over secure HTTPS connection but at least one ressources (such as : Images / Styles / Scripts) has been download from a HTTP connection.

Its called mixed-content because, page mixed 2 different HTTP and HTTPS content and browsers display warning message into console and remove green locker to indicate to the visitor that this webpage contains some unsecure and secure content.

 

Allow mixed content http https ?

 

The following ressources are commonly cause of mixed-content :

  • Images,
  • Scripts (CSS Stylesheet),
  • Styles (Javscript file)

Sometimes, you have just one styles using HTTP connection. If you are using e-store such Prestashop, Magento, Woocommerce (WordPress) you can change value from back-office and editing template sources.

 

2 – How to detect mixed-content :

 

Google chrome is showing Informations on left side of Website URL field when page has HTTPS connection issue. You can click on it to get more informations about the issue.

 

Sometimes, the content could be blocked by the browser and display broken website. Calm down, and see informations from debugger.

 

  • You can use : mixed content online detect to check all links and find mixed-content
  • Open Google Chrome DevTools and get details about connection
Mixed content error
Error display on console
Mixed content warning
Warning display on console

 

Using console to get content on Chrome and Firefox :

 

On chrome :

  • Right clic anywhere on the page > Inspect
  • Clic on tab : Security
  • Check “unsecure ressources link
  • List on network tab given you all mixed-content
  • Or : Console tab displaying Warning or Error message with broken url
    (mixed content the page at was loaded over https but requested an insecure…)

 

On Firefox :

  • Right clic anywhere > Inspect Page
  • Console Tab
  • Look for : the page at was loaded over https but requested

 

Once, ressources detected, we have to figure out the best way to change them to HTTP from HTTPS.

 

3 – Fix mixed-content :

 

Depends, what website technology you are using but fixing mixed-content could be easy. For example, on Worpdress, one plugin and that it, on Prestashop its could be more complicated, if you theme has been developed by a “bad” developper, you work gonna be hard.

 

Static Website :

 

Edit your sources files and just change HTTP protocol to HTTPS (or use // called less-protocol) from calling all ressource over HTTPS connection.

On static website, you should know your files structures. if you are using PHP language, you have maybe a function file with header or footer. in HTML, you might have to edit all your pages to fix them.

 

Prestashop fix Mixed content
Prestashop fix Mixed content

 

WordPress or Prestashop :

 

Get more information how to fix Mixed-Content on this page (currently in French)

 

Sources :