Introduction to Mixed Contents Warnings

All Valcato Hosting shared and Wordpress hosting accounts include complimentary SSL certificates, which are perfect for non-transactional websites, and we offer a range of professional certificates for websites processing orders and bookings. This means your Valcato websites can be secured by default, although your website code may need updating to take advantage of it.

One of the most common problems is a "mixed content" or "parts of this website are not secure" warning.

This means that whilst your website does have an SSL certificate correctly installed, some elements of your webpage are not being served using it, so browsers display this warning message to visitors. The cause is one or more element on the webpage being loaded over an insecure connection (https://) such as an image, Javascript or CSS file.

The warning will look a little different depending upon your browser:

Chrome Partially Secure Warning

Firefox Partially Secure Warning

Identifying the Cause of Mixed Contents Warnings

Use a website scanning tool

An automated website scanning tool can quickly analyse your website to identify the insecure content on your page:

This tool is simple to use:

  1. Enter your website address into the above website, and click "Test Page"
  2. After a few seconds, a screen of results will be displayed.
  3. Towards the bottom any errors will be displayed:

Mixed Contents Diagnosis

This error shows that the image located at http://examplesite.com/my_image.jpg is being loaded over http:// instead of https://

The manual method

Visit the problematic page and open your browser's developer tools console:

Look for an entry like "Loading mixed (insecure) display content":

Loaded mixed display content warning in Browser Console

The warning message will include the insecure element. In this example it's us.png.

Resolving Mixed Contents Warnings

In this example, the warning occurs because the image is being loaded by specifying the full URL to the image, beginning with http://.

There are two ways to resolve this:

Option 1: Change to a relative file path. The relative path to the image location can be used instead of linking to the image using the full URL - provided the image is hosted the same Valcato hosting account - this option will not work if the element is hosted on another website. Eg:

<html> <head> <title>Example website</title> </head> <body> <p>Welcome to my website</p> <img src="my_image.jpg"> </body> </html>

Option 2: Change the http:// references to https://. The simplest option is to change any references in your code highlighted by the report to https:// instead. Eg:

<html> <head> <title>Example website</title> </head> <body> <p>Welcome to my website</p> <img src="https://examplesite.com/my_image.jpg"> </body> </html>

Was this answer helpful? 0 Users Found This Useful (0 Votes)