HTTPS mixed content: how to fix mixed content blocking?
Sometimes the following situation arises: you ordered a trusted SSL certificate, passed the verification by the certification authority, installed the certificate on the server. Everything was done correctly, but when you try to go to your resource, the browser gives an error: "The site could not be loaded, loading of mixed active content was blocked." Or, alternatively, the website loads, but instead of a closed padlock in the address bar, the browser shows a yellow triangle and reports that the connection is only partially encrypted. The reason for these problems is mixed content or mixed content (in English - mixed content) on your site. What is mixed content? And, most importantly, how to get rid of it?
What is mixed content?
We all know that when visiting a website where the client plans to enter any personal data, whether it be a login and password, full name, email or simple address, credit card numbers, etc., you should pay attention to whether this page is protected SSL certificate. This is indicated by some visual signs:
The website URL starts with the extension https, not http.
The address bar of the browser displays a closed padlock icon (most often green)
It's good if the site has a security seal or Site Seal installed (but its addition is optional, so its absence does not always indicate the absence of an SSL certificate)
If an SSL certificate with extended verification is installed on the site, the green line will also contain the name of the company that owns the domain on a green background.
However, in some cases, there are problems with displaying the content of the site in the presence of mixed content: for example, in Google Chrome, instead of a green padlock, a padlock is shown in the address bar, covered by a yellow triangle.
a message may appear in the browser window stating that the web page contains mixed content and the information is partially displayed, or completely blocked and not displayed at all. In each browser, the message about mixed content can be displayed differently, but the essence is the same - the user receives a warning and will not be able to view the entire content of the page, which, accordingly, has a negative impact on the conversion of the site as a whole.
How to fix mixed content?
After installing an SSL certificate, it is necessary to check whether the web page works correctly, whether the redirect is configured correctly, and whether all links within the site are opened using the https protocol. We recommend using the Google Chrome browser to check mixed content.
First of all, pay attention to how your URL is displayed. If the padlock in front of the address is green, there are no problems with the https connection. If it's covered by a yellow triangle, it's most likely mixed content.
In the window, right-click and click on the "View element code" link. The same can be done by pressing the key combination Ctrl+Shift+I.
A window will appear at the bottom of the browser window, go to the last tab Console (“Console”). It will list the problematic links after the "Mixed Content:" warning and then list the files that are downloaded via the http protocol, as in the example below:
All you have to do is change all http links to https. In order to avoid the appearance of mixed content when switching to https, we recommend initially designing all links within the site as dynamic. Then, when switching to an https connection, they will automatically change to https links.
Also, we recommend that you go to this useful reference , and read the article
