How to fix mixed content warnings

fix mixed content warnings

Mixed content occurs when initial HTML is loaded over a secure HTTPS connection, but other resources (images, videos, stylesheets, scripts) are loaded over an insecure HTTP connection. It is called mixed content because both HTTP and HTTPS content are being loaded to display the same page, and the initial request was secure over HTTPS. 

Requiring sub-resources using the insecure HTTP protocol weakens the security of the entire page, as these requests are vulnerable to attacks in which an attacker eavesdrops on a network connection and views or alters the communication between two parties. Using these resources, attackers can track users and replace website content, and in the case of actively mixed content, take control of the page, not just insecure resources.

Many browsers warn the user about mixed content, but by the time they do, it’s too late: insecure queries have already been executed, and the security of the page has been compromised. That’s why browsers are increasingly blocking mixed content. It is the safest and easiest way to protect consumers.

 If you have mixed content on your site, adjusting it will ensure that the content continues to load as browsers become more stringent. If you correct it, your pages will not be blocked. This way, users will have access to your entire site, and you will be more successful. In addition, you will protect yourself from attacks, just as you will protect your users.

This type of error is common when migrating your site from HTTP to HTTPS. And WordPress no longer works without HTTPS. Not only is it more secure (everything is encrypted, with nothing conveyed in plain text), but it also builds trust, is a factor in ranking higher in search engines, and provides more accurate referral data. Unfortunately, website owners frequently find issues with this migration, including mixed content.

mixed content

What causes mixed content warnings?

We’ve found that the most common mixed content alerts appear as soon as someone migrates their WordPress site from HTTP to HTTPS. Some HTTP links get carried over, and this causes mixed content warnings to start firing

Other reasons for this warning:

  • You have added a new service or plugin to your site. In particular, developers sometimes use absolute paths (http://yourdomain.com/style.css) in their plugins or themes to connect to CSS and JavaScript instead of using relative paths (/style.css).
  • Your images have hard-coded URLs (such as http://yourdomain.com/image.png) that work over HTTP.
  • You connect to HTTP versions of external scripts.
  • You have built-in video scripts that use HTTP instead of HTTPS.

The reasons for these warnings are varied. It is hard to understand what causes them. To find out, you need to start fixing the mistakes.

warning

How to fix mixed content?

1. Find out which resources are loaded over HTTP

The first thing you need to do is find out which resources are still being loaded over HTTP.

Visiting your website to find alerts for mixed or insecure content may seem obvious. But how many times do you visit your website as a visitor? Review the page prompting the alert and launch Chrome DevTools by pressing:

Windows: F12 or CTRL + Shift + I

macOS: Cmd + Opt + I

If mixed content errors are present, they’ll be highlighted in either red or yellow. Typically, they’re accompanied by information explaining that “This request has been blocked; the content must be served over HTTPS.” It means that the browser settings are configured to automatically block any HTTP content.

In an attempt to ensure that pages only load over HTTPS, Chrome began blocking default content mixed with Chrome 79.

Tools you can use:

  • Why No Padlock: If you don’t use Chrome or want only a quick summary of warnings, you can also use a free tool like Why No Padlock. It scans a separate page and shows you all uncertain resources
  • JitBit SSL Check: You can use it to crawl your HTTPS site and look for insecure images and scripts that will trigger a warning message in browsers.
  • Ahrefs: The Ahrefs site audit tool can detect HTTPS / HTTP mixed content.
  • SSL Insecure Content Fixer: A WordPress plugin that you can install on your site to detect errors that lead to mixed content alerts. It is free to use and will even automatically make bug fixes.

Using tools can help you save time. With their help, you won’t have to manually check each page on your site for mixed content warnings. To thoroughly assess the potential errors of your site, you may consider using a combination of these solutions.

fix mixed content

2. Verify that HTTP resources are available via HTTPS

The next step is to confirm that the resources being loaded over HTTP are available over HTTPS. Most likely they are. You just need to update the links.

If we check the URLs, enter them in the address bar of our browser replace “http” with “https” at the beginning, and see that it loads correctly and without any problems, we just need to replace them. The URL will then continue to load, but will not issue a mixed content warning.

When you have checked all of them, replace them with the correct ones and keep them. It will avoid mistakes.

However, if you see a warning or the content does not appear over an HTTP connection, you must do one of the following:

Delete the entire resource (image, video, etc. not shown over HTTP)

Include the resource from another host, if available

Download and host the resource directly on your site.

HTTP to HTTPS

3. Confirm that mixed content warnings have disappeared

Once you’ve completed the replacement, double-check your site to confirm that mixed content warnings have disappeared.

If not all of them are gone, check again to see if you missed a page.

After all, having an HTTPS website is more important than ever. Google Chrome will be the first to tell site visitors when it is not secure and uses an HTTPS connection. Your search ranking will drop if you have an insecure site. And we all know how crucial good search engine rankings are. People will not trust your brand or business if you can’t prove to them that they are safe while browsing your site. When your site is secure and secure, users will be much more secure. When you rank up in search engines, you gain the trust of customers and get a lot more attention. If you want to know more about SEO, you can read our blog post.

As you can see, just activating HTTPS on your website is not enough. If you have mixed content loading over a secure HTTPS connection, you will continue to receive mixed or insecure content alerts and push away users. So take the time to check and monitor your site for insecure content. Some visitors will take risks and visit your site despite mixed content warnings, but browsers like Chrome will continue to stop insecure websites and prevent users from engaging with them in the way you would like them to engage with your site and your content.

warnings have disappeared

As you can see, this is not an easy task but a long process. It takes a lot of time, work, and patience. You need to either invest a lot of time or look for a specialist to do it all for you if you want your site to be successful. Read our blog post if you want to know the benefits of hiring a digital agency.

Here you can view our website care plans. You will receive free website edits from our experts. We will do our best to provide you with the best possible care plans to improve the user experience. You will have full confidence that your website is online and operating as it should 24/7, without interruption. Our team is available 24/7. We are here to provide you with the appropriate protection and security. Our care plans keep your theme and plugins up to date with the latest versions. Our job is to ensure that they are all operating as they should. We invest in appropriate security measures to ensure that your website is secure. Your website will be safe with our help. You can enjoy your peace of mind while we take care of everything. Read our blog post to learn everything essential for website care plans.
If you have additional questions, you can contact us or make an appointment for your free consultation. We at Dreamtech are always ready to help you.

Get the scoop on what's new

Subscribe to get the latest blogs, guides, industry reports, events, and all things subscription!*