How to Quickly Fix Mixed Content Warnings on WordPress sites
F5 Studio’s WordPress website development team are engaged in the task these days. They are fixing mixed content warnings on WordPress sites.
So you can read about their experience in this article.
Chrome has announced a number of steps to gradually block mixed content. The corresponding message was published on October 3 in the Chromium Blog (https://blog.chromium.org/2019/10/no-more-mixed-messages-about-https.html).
Mixed content: unprotected elements transmitted over the HTTP protocol through pages with an SSL certificate. For example, images, audio and video from third-party (insecure) domains.
Now almost all browsers by default block many types of mixed content, including scripts and frames, while multimedia elements are still loading. According to Google, this threatens the privacy and security of users. Since such traffic is not encrypted, it is susceptible to all types of MiTM attacks.
You should check your site’s pages for mixed content. Because, over time, Chrome and other browsers will block pages with mixed content.
How to check your site
For Chrome and Mozilla Firefox browsers, right-click on the website page and select from the drop-down list. You can also use the F12 key. If you use Ahrefs, you can use the Ahrefs audit tool.
In Devtools, select the Console tab to see warnings. If there is mixed content, then you will see
Or under the Security tab you will be able to see the details regarding warnings. If all is well, then you will see such a message.
To see which resource is locked, you can open the Network tab. Usually it is enough just to use the Console messages.
So, if you saw the warning “Mixed Content” in DevTools,what to do? They contain a link to an element loaded via an unprotected http protocol, in our case it is http://domain.com/wp-content/themes/busiprof/images/logo.png.
Left-clicking on the problematic link, open the “Sources” tab and allows you to see an element that uses the unprotected http protocol:
It might also be a link to a video, a link to another site, or a third-party code.
Now let’s see how we can fix mixed content.
How to fix an external link
The very first and easiest option is to remove the link. But this is not always good. For example, if you have a link to an external script, you can correct it manually by simply replacing it with a relative URL.
Enter the Editor at wp_admin via https://yourdomain.com/wp-admin
Manually replace the URL according to the pattern
http://domain.com/folder1/something at a relative URL //domain.com/folder1/something
You can change any external links using this process. For example, you can use replacements for articles, pictures, and videos. The robot will process the link and insert the desired protocol.
How to fix an image link
In our example, we found an unprotected protocol for the logo.
Enter the Editor at wp_admin via https://yourdomain.com/wp-admin
Find the link. You can enable the search on the page using Ctrl + F. In the search box, add the item you are looking for.
When you find the link you need, fix it by changing the http protocol to https.
As you can see, this is quite simple. And you can simplify the replacement with plugins. For example, the free Better Search Replace plugin. Or you can try SSL Insecure Content Fixer. You can also find other plugins that suit you.
Conclusion
As you can see, eliminating mixed content is not a time consuming process. The main difficulty is to find elements that are transmitted over the HTTP protocol.
It is worth noting that each site has its own file structure, which is why it is difficult to prepare a universal solution to eliminate mixed content.
We hope our instructions will help you!
