How to fix partially encrypted/mixed content errors after switching from HTTP to HTTPs (SSL)?
critical information being transferred such as login, password, bank
details etc. But when details such as those mentioned are involved in
the transfer, HTTP is not secure as there are ways and means by which
bad guys can intercept and misuse. But even after applying HTTPS, browsers may block some contents because they are still being served over HTTP. In this post, we will check how to fix partially encrypted / mixed content errors after switching from HTTP to HTTPS.
implemented including the most common sites we use on daily basis.
So, in a nutshell, HTTP + SSL = HTTPS.
Browsers today indicate whether a website is secure or not by the following icons on the left of the address bar:
- Info or Not secure
- Not secure or Dangerous
Browser displays “Your connection is not secure”
Nowadays, most modern browsers expect secured content over HTTPS instead of HTTP and if website is not on HTTPS, the browser throws some alerts to the user. One of the most common alert we see is the “Your connection is not secure” message on a browser when a website is using HTTP only.
How to switch from HTTP to HTTPS website?
In a nutshell, changing from HTTP to HTTPS is pretty straightforward:
- Purchase an SSL certificate
- Install your SSL certificate on your website’s hosting account,
- Make sure that any website links are changed from HTTP to HTTPS
- Set up 301 redirects from HTTP to HTTPS so that search engines are notified that your site’s addresses have changed and so that anyone who has bookmarked a page on your site is automatically redirected to the HTTPS address after the change.
Some website host may provide free open-source SSL certificate such as “Let’s Encrypt” (Let’s Encrypt is a free, automated, and open Certificate Authority.). That will also work. You just need to install it and enable it for your website connection from the control panel provided by the host. Refer to your host documentation or support how to.
How to fix partially encrypted/mixed content errors switching from HTTP to HTTPs (SSL)?
To identify what is causing your page(s) to be insecure, please follow the instructions below.
- Open Firefox or Google Chrome.
- Open the page you’re having trouble with in the browser
- Open the Developer Tools.
- Click on the Console tab.
In the Console, we would see items which are marked partially encrypted. You should see an entry in the console similar to:
“The page at https://www.example.com/ displayed insecure content from http://www.example.com/.” Note that the URL that is loading insecure content is HTTP and not HTTPS.
Once you have identified the problem elements, you need to figure out what theme or plugin is causing these elements to be loaded. We need to find the individual files where HTTP is mentioned explicitly.
- The element may be external reference
(not hosted on your server) and the URL have been entered with HTTP and
not HTTPS. We need to find and replace with HTTPS or using a relative
To correct hard-coded HTTP in URLs, what I normally do is open all .CSS/.PHP files of the website in Notepad++ editor and the find “HTTP” in all opened documents. The correct them one by one. During the checks, you may notice that there are some files linked with absolute path:
For example if there is a link with HTTP –
change it to
Absolute Paths such as:
should be resolved to its relative path:
In some cases, there may be entries related to external resources. A message in the browser’s Web Developer condole may look like:
[blocked] The page at ‘https://www.example.com/’ was loaded over HTTPS, but ran insecure content from ‘http://fonts.googleapis.com/css?family=Alegreya+Sans:300,400,500,700,800’: this content should also be loaded over HTTPS.
Hope you find this post helpful. For improvements and suggestions, do let me know in the comments.