All Collections
Useful Tools and Tips
How to fix mixed content warnings on your website after forcing https
How to fix mixed content warnings on your website after forcing https
Justin Catello avatar
Written by Justin Catello
Updated over a week ago

Recently switched over to HTTPS and noticed you are not getting the pretty green lock in your browser like shown below?

This is called mixed content, and to put that into simple terms, it means in your sites code or database, you have links to content defined with http:// while trying to view your site using https:// To avoid this problem going forward, instead of hard defining a link specifying the protocol like http or https simple use // example:

By removing the protocol (http or https) this will allow the web browser the ability to pick and choose which protocol should be used depending on which version of the site you are viewing, so to conclude:

Example with HTML:

<img src="//www.bigscoots.com/assets/images/logo_bigscoots_header.png" />

 

OK OK, we get it, how do we fix it?

Firstly, we want to start off by identifying which pieces of content are causing our mixed content problem.  Almost any browser can help you determine this, but for this article we will be using Google Chrome. While looking at the site in Google Chrome, right click the page and select Inspect. Followed by clicking the Console tab:

I have highlighted in red the areas that we need to pay attention to, here is the full message typed out which will be easier to read:
Mixed Content: The page at 'https://community.bigscoots.com/test.html' was loaded over HTTPS, but requested an insecure image 'http://www.bigscoots.com/assets/images/logo_bigscoots_header.png'. This content should also be served over HTTPS.

Now notice the 2 bold links:

  1. https://community.bigscoots.com/test.html - The URL in which you are accessing which is using HTTPS.

  2. http://www.bigscoots.com/assets/images/logo_bigscoots_header.png - The piece of content that is loading on the page that is using HTTP.

We need to find out where that link is hard defined, it will either be in a file or a database.  There are many ways of determining where these links may reside but because most viewers are using a CMS like WordPress, we can expect the links to reside in the database in which we'll use a script to find and replace all related links.  Below will be a video on how to download the script, upload it to your site, and use it to find and replace the necessary links:

Before Proceeding Make Sure To BACKUP Your Database!

If the above doesn't resolve ALL found mixed content, then its possible the URL's reside in an actual file, like .php, .html, .css, .js, etc, etc.. Using SSH with the grep command will allow you to recursively search through every single file for the exact URL you are looking for.

First example, trying to find which file contains a specific link:

Command used to search through files containing the link.

# grep -rl http://bigscoots.securedserverspace.com/images/test1.png

We can use this command to search through every single file recursively within the current folder that we run it in.

Results:

# grep -rl http://bigscoots.securedserverspace.com/images/test1.png
folder1/folder2/folder3/test10.html
test1.html

You can see it found 2 files that contain the URL: http://bigscoots.securedserverspace.com/images/test1.png

If you wanted to make the search a bit more board, and find ALL links that start with 'http' for that same URL, we can do:

# grep -rl http://bigscoots.securedserverspace.com/

Results:

# grep -rl http://bigscoots.securedserverspace.com/
test2.html
folder1/folder2/folder3/test10.html
test3.html
test1.html

Here is that same command without the the option 'l' so we can see the actual results its finding within those files:

# grep -r http://bigscoots.securedserverspace.com/
test2.html:http://bigscoots.securedserverspace.com/images/test2.png
folder1/folder2/folder3/test10.html:http://bigscoots.securedserverspace.com/images/test1.png
test3.html:http://bigscoots.securedserverspace.com/images/test3.png
test1.html:http://bigscoots.securedserverspace.com/images/test1.png

You can see it first shows us the file it finds the URL in, and then shows us what exactly it found.

Did this answer your question?