If you add SSL certificate for your website, you can see a green padlock in the URL bar of the website. This is a good indication that the website is working with SSL certificate and all the resources are loaded over HTTPS. The green padlock symbol assures the visitors that their connection is safe and loading all the resources over HTTPS can help to protect the website from attacks. Sometimes after installing the SSL certificate, the website will appear without green padlock symbol due to the mixed content warning.
What is Mixed Content?
Mixed Content warnings occur when a website is on HTTPS but the web pages are still loading in HTTP instead of secured connection. This means the web page’s source code is pulling in other resources over unsecured HTTP protocol. So, the web browser will display a warning message that the web page has both HTTP and HTTPS content. In other words, it is called ‘Mixed Content’.
How to fix SSL Mixed Content issues?
If you are running an e-commerce website, it should be enabled with HTTPS connection. It is recommended for secured payment transactions or to prevent sensitive information. HTTPS is same as HTTP but comes with SSL to monitor and transfer data safely between two points.
When a page is loaded over HTTP connection instead of HTTPS, then the mixed content warning will occur. It is due to some resources loading with HTTP connection. Some of the resources are Images and its background URLs, Videos, External Stylesheets, Javascript and Font references that load externally-hosted fonts.
Steps to Fix SSL Mixed Content Warnings:
To fix the mixed content issues, follow the below steps
1. Locate the mixed content by visiting the website to view the list of warnings. The browser’s console or inspector tool can be used to identify the resources of the mixed content.
2. Now, locate the source code of the web pages specified in the mixed content warnings. Check whether the URLs are loading properly over HTTPS on their own in your browser.
3. If the resources displayed is same over HTTP and HTTPS, then it is safe to say that URL is available over HTTPS. So, change every instance of the URL from http:// to https:// in the source code and re-upload the file. If the resource is unable to load properly, then it might not be from the same host and does not have a supported SSL certificate. In this case, you can
- Contact the host of the resource and see if it can be made over HTTPS. Otherwise, use the resource from a different host that supports HTTPS.
- If possible, download the resource and host it on your server.
- Then remove the resource from your site.
4. Change every URL of the source code like images and JavaScript files from http:// to https:// to load the website specifically over HTTPS.
5. If you are using a WordPress website, update the website URL by going to Settings -> General with HTTPS connection in the address field. If you add SSL to an existing website, set automatic https redirection for the website. This can be done by adding the redirection code in the ‘.htaccess’ file for the particular domain.
Once the mixed content issues are fixed, browsers will display the green lock icon in the address bar to show your websites secured. We hope this tutorial will be helpful to clear the mixed content warnings on your website. For more information, follow us on Twitter and Facebook and For video tutorials, subscribe to our YouTube channel ServerCake India.