The need to switch to HTTPS is a jammed record. Most commercial sites and readable blogs have long been running on a secure protocol. It would seem that they crossed and forgot. But no - Google is on the alert. At one time, he encouraged webmasters to switch to HTTPS, making it a ranking factor. And now he launched the “negative reinforcement” - he began a total blockage of resources loaded via HTTP. And - a surprise - he might not like your excellent HTTPS, because the site has mixed content.
We understand why Google does not like him, how to find him and make it so that everything is fine.
How Google Motivates Switching to HTTPS: From Gingerbread to Whip
Google’s struggle to secure data over HTTPS has begun a long time ago:
- 2010 - Encrypted Google Search launched ;
- 2011 - HTTPS began to be used to search Google and Gmail by default;
- 2014 - loading a site via HTTPS became a ranking signal ;
- 2015 - Googlebot started indexing HTTPS versions of pages by default;
- 2017 - in Chrome 62, when entering data on sites with HTTP , a notification about an insecure connection (“Not secure”) began to appear in the address bar of the browser;
- 2018 - in Chrome 68, all HTTP sites began to be marked in the address bar as insecure;
- 2019 - Google announced that it will systematically move to ensure that only HTTPS resources are loaded on HTTPS pages. As a result, Chrome will start blocking mixed content .
Blocking will be implemented gradually:
- December 2019 - Chrome 79 will be able to unlock blocked content. With this option, you can unlock scripts, frames, and other types of content that Chrome blocks by default. This option will look like this:
- January 2020 - In Chrome 80, audio and video content will automatically download from HTTPS. If the HTTPS download is not successful, Chrome will block such resources. If necessary, users can manually unlock them. In Chrome 80, images uploaded to HTTPS sites with HTTP will not be blocked, but a message appears that the connection is unsafe.
- February 2020 - Chrome 81 will automatically download images from HTTPS. If they are inaccessible, the browser will block them.
Mixed content blocking is not only used in Chrome. For example, active content blocks Firefox (from version 23), Internet Explorer (from version 9) and other browsers. But the blocking of pictures, audio and video content started precisely in Google.
As a result of stimulating the transition to a secure protocol, the share of sites that use HTTPS over the past year has increased from 43.5% to 56.5%.
And 85% of the pages loaded in Chrome by users from Russia transmit data via HTTPS. In 2015, this indicator was only 28%.
Considering that in Russia, about 41% of users use the Chrome browser, it’s worth preparing to block mixed content so as not to lose traffic and positions in the organization.
SEO module in the Promopult system: all the tools for improving the quality of the site and search engine promotion. A full range of work - with us you will not miss a single trifle. Checklists, tips, transparent reporting and professional recommendations. Guarantees, payment by installments.
Let's sort it out in order.
What is mixed content and why it should not be on the site
Mixed content (in the original - “mixed content”) is when a page is loaded over a secure HTTPS connection, but individual resources (images, styles, scripts, etc.) via unprotected HTTP.
For example, you switched to HTTPS (not yet? Here is the instruction ). But on one of the pages you are still loading the image from an external library, which is available at the address of the site.ru site type. This is mixed content.
According to the W3C specification , mixed content is divided into two types:
- optionally lockable (this includes images, video, audio);
- lockable (other content - scripts, styles, frames, flash, etc.).
Blocked content is active. Attackers can intercept and modify active content so that they gain complete control over the page or even the entire site. Theft of passwords and user personal data, cookies, redirecting users to another site, changing visible content are just a few examples of the threats that downloading active content via HTTP poses.
Due to the high potential damage and risk to users, browsers are advised to block such mixed content.
Here are some types of HTTP requests that are considered active content:
- <script> (src attribute);
- <link> (href attribute) (including links in CSS);
- <iframe> (src attribute);
- XMLHttpRequest requests
- fetch () requests
- use of links in CSS (font-face, cursor, background-image);
- <object> (data attribute).
The optionally blocked content is passive. If the attackers intercept it, they will not be able to disrupt the site or take over, for example, the payment data of users.
But the danger remains. For example, attackers can intercept images or videos and replace them with others. This can cause serious damage to the reputation (the stories about the appearance of videos or pictures with pornographic content on the websites of federal channels or state institutions are fresh in the memory). In addition, attackers can track which pages users viewed, what products they were interested in, and what content they viewed.
Here are the types of HTTP requests that are considered passive content:
- <img> (src attribute);
- <audio> (src attribute);
- <video> (src attribute).
If you do not want resources on your site to be blocked, audit it, find mixed content and make it accessible via HTTPS.
How to detect mixed content on a site
There are different ways to find out that your site has mixed content.
By icon in browser address bar
This is the most obvious way. For example, we’ll open a secure page with an image that is uploaded via HTTP. The source code for this page is:
In the Chrome browser, we see an icon, when clicked, we get an explanation:
Mozilla Firefox has a similar story:
The disadvantages of the method:
- it is not clear which resources are loaded via HTTP;
- you have to check each page manually.
Therefore, this is more an indicator than a full-fledged way to search for mixed content.
By searching the page source
Open the source HTML code of the page in the browser (Ctrl + U) and look for the fragment “http:” (Ctrl + F).
In this case, we know exactly what resources are loaded via HTTP. But if there are many pages on the site, this method does not work.
Notifications in the developer console
Open the page in Chrome we want to check and press Ctrl + Shift + I. The page has mixed content, as evidenced by the “Mixed Content” errors with a detailed description.
Similarly, we can check for errors in Firefox:
The advantage of the method is that all errors related to loading mixed content on the page are collected immediately in the console. The disadvantage is, again, you have to check each page manually.
SSL checker from JitBit
JitBit is a quick way to identify site pages that have mixed content. We specify the domain - we receive the list of "problem" URLs.
The disadvantage is that it is not clear what kind of mixed content is on the pages. Then you have to check everything manually. In addition, the service is not suitable for sites with more than 300-400 pages.
Lighthouse Mixed Content Report
This method allows you to get data immediately by an array of URLs. You do not have to check each URL manually, and you will see a complete list of resources that are loaded via HTTP.
But by default, the Lighthouse extension does not have a mixed content report. It must be run from the command line. How to do it:
1. Install the Google Canary Developer Browser.
2. Install Node.js.
3. Run the Node.js. command prompt
4. Run the command:
npm install -g lighthouse
The Lighthouse installation begins.
After the installation is successfully completed, you will receive the following notification:
5. Run the report using the command (replace the URL with the address of the page in the format site.ru ):
lighthouse --preset="mixed-content" URL
Report generation will begin.
After completion, the system will inform you in which folder the report is stored.
By default, reports are saved in HTML format.
You can change the output format using the --output command. For help on this and other commands, type in the console:
lighthouse --help
The report has two audits:
- Using HTTPS
- Secure resource loading.
If there are problems, it will be indicated which resources are loaded via HTTP.
Lighthouse Mixed-Content report for multiple URLs at once
To check multiple URLs:
1. Create a TXT file and put in it a list of URLs to check.
2. Create a BAT file and place the following code in it (in quotation marks indicate the path to your TXT file and its name):
@For /F "UseBackQ Delims=" %%A In ("C:\Users\light\urls.txt") Do @LightHouse "%%A" --preset="mixed-content"
3. Run the BAT file from the command line. If the file is stored in the same folder as the reports, simply enter the file name and press Enter. Otherwise, you need to write start and specify the address of the BAT file with a space.
How long you have to wait depends on the number of URLs in the text file. For each URL you will receive a separate report.
Thanks to Christopher Giezendanner for this method.
Mixed Content Report in Screaming Frog SEO Spider
This is probably the most convenient way. But, unlike the previous ones, it is paid. Screaming Frog SEO Spider costs £ 149 per year.
To get the data, run the Insecure Content report and you will have a list of resources with HTTP.
Read about how to parse almost any data from any site using Screaming Frog on the PromoPult blog.
How to eliminate mixed content
So, you have found mixed content on your site. About half of the work is done. But you still need to eliminate it. There is no single solution - you have to act according to the situation.
Links from HTTP can lead to internal resources and external.
After switching to HTTPS, all internal resources must be loaded with HTTPS. Usually they change absolute links to relative ones, set up redirects, and the problem is immediately solved.
With external resources is not so simple.
The ideal scenario is this:
- find the URL with HTTP;
- Check if the same resource is available via HTTPS;
- if so, change the link from HTTP to HTTPS;
- check - if everything works, forget about the problem.
But it happens that resources are not available via HTTPS. In this case, there are three solutions:
- Contact the owner of the resource and ask him to switch to HTTPS (this is from the category of science fiction).
- Find a safe alternative to a resource on HTTP (all decent resources have long switched to HTTPS).
- Do nothing (this is an extreme case - if you just cannot replace the resource at all, and it is important for your users).
Purely technically, it is easier to replace a single URL (for example, in an article you referred to a site without HTTPS). Just open the source code and make an edit.
But there are URLs that cannot be fixed in one go. For example, this includes links in styles, scripts, end-to-end links, etc. In this case, you should connect a programmer or use plugins.
For example, for WordPress there are such plugins:
- SSL Insecure Content Fixer . Allows you to automatically fix links to insecure resources. Conveniently, you can choose a different “depth” of corrections and, if necessary, ignore external sites.
- Really Simple SSL . This is a plugin to quickly switch to HTTPS. It automatically changes links to relative and eliminates mixed content. The PRO version has the ability to scan the site for mixed content.
- Search & Replace . Plugin for searching and replacing any content on the site, including mixed content. Domains change on the "Replace Domain URL" tab.
After the replacement, you can see the details - which links and in which parts of the code were replaced.
When using plugins, it’s important to clearly understand what you are doing. We do not recommend making changes without first backing up the site. So you can always return to the starting point.
And may the power of HTTPS be with you.