Check Your Website for Mixed Content and Fix This Issue

Content:

1. What Is Mixed Content?
2. How Can Mixed Content Be a Security Threat?
3. How Can You Fix Mixed Content Issues on Your Website
4. How to Detect and Fix Mixed Content Issues with Netpeak Spider
5. Final Thoughts

When migrating to the secure HTTPS protocol or when starting the site on HTTPS, a warning message about the blocked loading of mixed content may appear on the page. Quite often, browsers block such pages due to insecure scripts, links, images, videos, etc. Mixed content is the reason for such a bump.

In this blog post, we will cover what mixed content is, how to handle this problem, and how Netpeak Spider can come in handy while searching for this issue.

1. What Is Mixed Content?

Mixed content is partially unencrypted content. It occurs when initial HTML is loaded over HTTPS connection, but other resources (such as images, videos, stylesheets, etc.) are loaded over an insecure HTTP connection.

This is what a warning about insecure mixed content looks like in Google Chrome:

This is a notification that a page has been blocked:

Pages with insecure content can be changed on the script level, that's why attackers can intercept the user's credentials.

Sure thing, it hobbles the website's promotion.

Why it's important: Since February 2020, Chrome browser started blocking mixed content and suggested transferring mixed content type to https:// to avoid blocking.

How Can Mixed Content Be a Security Threat?

Every time you detect mixed (insecure) content on a page, the whole website becomes more vulnerable to attacks of any kind, weakening its overall security level. As a result, a hacker breaching a website that loads mixed content might take over the entire page, not just an insecure source.

Even though browsers usually give warnings before you open a website, sometimes these warnings come too late. This delay can be a problem because hackers might have already broken into a website with mixed content and started causing damage before the website owners or visitors realize what's happening.

Here are some other cases that make blocked mixed content pages a security threat:

• Hackers can intercept HTTP requests to load an image and change your website’s image for a new one;
• They can switch "save" and "delete" button images, making website visitors accidentally complete a wrong action;
• Attackers can deface the front end with inappropriate images and/or text;
• They can also completely rewrite the content published on your website;
• Hackers can compromise and hand out passwords, session cookies, and other credentials to other cybercriminals;
• They can redirect your visitors to a completely different website without them knowing.

Browsers try to block the most dangerous mixed content on websites, yet they can't block all of it. Many highly trafficked websites render mixed content for visitors.

1. How Can You Fix Mixed Content Issues on Your Website

One of the most effective ways to deal with a mixed content error on a given website is by removing it. To do so, change all URL protocol prefixes from http:// to https:// and set up a 301 server redirect. Here are some directives that you’ll need in the .htaccess file in the website root directory to perform redirect correctly:

For websites with www embed:

1. RewriteCond %{HTTP_HOST} ^www\.snhd\.(.*)$ [NC]
2. RewriteRule ^(.*)$ https://snhd.%1/$1 [R=301,L]

For websites without www embed:

1. RewriteCond %{HTTP_HOST} ^snhd\.(.*)$ [NC]
2. RewriteRule ^(.*)$ https://snhd.%1/$1 [R=301,L]

If you find resources that aren't in https:// or face a warning while trying to access them, consider following these steps:

• Include the same resource from a different host that serves the HTTPS version;
• If an external resource is downloadable, download the same and host it in your https:// server.
• If the resource isn't integral for rendering the site, simply exclude it.

We’ve already written an extensive guide on how to switch to a secure HTTPS protocol. Check it out in this blog post: "WordPress SEO: Security Connection With HTTPS."

2. How to Detect and Fix Mixed Content Issues with Netpeak Spider

You can detect the WordPress mixed content issue with the help of Chrome developers' tools, but it's time-consuming when it comes to big website audits – especially when you have hundreds of such websites to analyze. Netpeak Spider detects a mixed content issue on any page in just a few moments.

First of all, enter the URL you need to check; if there are several links, add them all as a single list or clip them from a clipboard. Select the necessary parameters you'll need the app to check for you (like the ones in the picture) and press ‘Start’ to launch the crawling process.

When the crawling is completed, you’ll see the results in the main table. If you checked multiple parameters, you can filter the results by the ‘Mixed Content’ issue only. To do so, go to the ‘Issue’ report, find this nasty issue (in the ‘Warning’ block), click on it, and the table will remove the unnecessary results.

Note that you can detect mixed content in the Freemium version of Netpeak Spider and approach the results in the built-in table absolutely for free, but to save, filter, segment, and export data, you’ll need the Standard plan. If you haven’t tried the tool yet, you’ll be able to test a free trial and access all paid features immediately.

[Check out the plans, subscribe to the one most suitable for you, and get inspiring insights! Compare Plans and Pick the One for Yourself]

Regular expressions and the 'Scraping' feature in Netpeak Spider is another way to find mixed content on website pages for those who don't seek easy solutions.

To detect mixed content scripts, we'll use the following expression:

1. (?i)(?:]*http:[^<>]*>(?:(?!<\/script>)[\s\S])*(?:(?!<\/script>)[\s\S])*<\/script>)|(?i)(?:]*>(?:(?!<\/script>)[\s\S])*http:(?:(?!<\/script>)[\s\S])*<\/script>)

To find href links:

1. [href^="http"]

To detect another mixed content type, which contains URL, location, DOCTYPE, and other elements:

1. (?i)<(?!a )[^<>]*(?:src|href|content|location|url|origin)[="\(]{0,2}http:(?:(?!§)[^<>])*>

Launch Netpeak Spider and follow the steps:

1. Open 'Settings' → 'Scraping'. Copy expressions described above, and name them.
2. For mixed content scripts and mixed content types, which contain URL, location, DOCTYPE, and other elements, choose the ‘RegExp’ type of search and the 'All source code' search space.
3. For href links, choose the ‘CSS selector’ type of search and the ‘Attribute’ search space with the href attribute.



4. On the sidebar, tick a minimum number of parameters and check if the 'Scraping' parameter is on.



5. Enter the website domain that you want to check for the mixed content into the ‘Initial URL’ field and press the 'Start' button.
6. When the analysis is completed, go to the 'Reports' tab → 'Scraping' and choose 'All results.' You can see there whether the pages with the http:// protocol have insecure scripts or resources.

We’ve already pulled our socks up and written this comprehensive guide with eCommerce examples: 'Comprehensive Guide: How to Scrape Data from Online Stores With a Crawler.'

Final Thoughts

Blocked mixed content poses a threat to your website, making it vulnerable to attacks. It gets in the way of website promotion and brand trustworthiness, so you have to fix it immediately.

To quickly check the website for the mixed content error, try Netpeak Spider and then remove the mixed content issue, changing http:// to https://. These two options should quickly help you get rid of the mixed content errors on target pages.

Have you ever dealt with a mixed content dilemma? Share your experience in the comment section below and share your pro tips on how to deal with it!