Mixed content occurs when SSL-protected site is loaded over a secure HTTPS connection, but other resources (such as images, videos, stylesheets, scripts) are loaded over an insecure HTTP connection. This 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. Mixed content present security risks for your site visitors as well as to your website, as it creates a vulnerability that attackers can exploit.
Modern browsers display warnings about this type of content to indicate to the user that this page contains insecure resources. With SSL (also known as TLS), internet communication is encrypted end-to-end, creating a more secure browsing experience. Users can easily identify SSL-encrypted sites because they have “https://” in the URL instead of “http://”. But in some instances, an HTTPS site can also contain some elements that are loaded using the plaintext HTTP protocol. This creates a condition known as mixed content, sometimes referred to as “HTTP over HTTPS”.
How mixed content weaken the security of your website
Requesting subresources using the insecure HTTP protocol weakens the security of the entire page, as these requests are vulnerable to man-in-the-middle attacks, where an attacker eavesdrops on a network connection and views or modifies the communication between two parties. Using these resources, an attacker can often take complete control over the page, not just the compromised resource.
Although many browsers report mixed content warnings to the user, by the time this happens, it is too late: the insecure requests have already been performed and the security of the page is compromised. This scenario is, unfortunately, quite common on the web, which is why browsers can’t just block all mixed requests without restricting the functionality of many sites.
Types of mixed content
With mixed content, users will be under the impression that they are on a secure, encrypted connection because they are on an HTTPS-protected site, but the unencrypted elements of the page create vulnerabilities, opening up those users to malicious activity such as unauthorized tracking and man-in-the-middle attacks. The severity of the vulnerability depends on whether the mixed content is passive or active.
a. Passive/display mixed content
In this case, the unencrypted HTTP content is restricted to encapsulated elements on the site that cannot interact with the rest of the page – for example, images or videos. It refers to content that doesn’t interact with the rest of the page, and thus a man-in-the-middle attack is restricted to what they can do if they intercept or change that content. Passive mixed content includes images, video, and audio content, along with other resources that cannot interact with the rest of the page.
Passive mixed content still poses a security threat to your site and your users. For instance, an attacker can block or replace an image loaded over HTTP, but wouldn’t be able to modify the rest of the page. An attacker can intercept HTTP requests for images on your site and swap or replace these images; the attacker can swap the save and delete button images, causing your users to delete content without intending to; replace your product diagrams with lewd or pornographic content, defacing your site; or replace your product pictures with ads for a different site or product.
Even if the attacker doesn’t alter the content of your site, you still have a large privacy issue where an attacker can track users using mixed content requests. The attacker can tell which pages a user visits and which products they view based on images or other resources that the browser loads. Most browsers still render this type of mixed content to the user; however, a warning is also displayed as this poses a security and privacy risk to your site and users.
b. Active mixed content
In this case, elements or dependencies that can interact with and alter the entire webpage are served over HTTP. These include dependencies like JavaScript files and API requests. Active mixed content interacts with the page as a whole and allows an attacker to do almost anything with the page. It includes scripts, stylesheets, iframes, flash resources, and other code that the browser can download and execute.
Active mixed content presents a more severe threat than passive/display mixed content; when compromised, it allows an attacker to take over an entire webpage, collect sensitive user input such as login credentials, serve the user a spoofed page, or redirect the user to an attacker’s site. An attacker can intercept and rewrite active content, thereby taking full control of your page or even your entire website.
This allows the attacker to change anything about the page, including displaying entirely different content, stealing user passwords or other login credentials, stealing user session cookies, or redirecting the user to a different site entirely. Due to the severity of this threat, many browsers block this type of content by default to protect users, but functionality varies between browser vendors and versions.
How browsers handle mixed content
An unfortunately large number of popular websites serve mixed content in one form or another. A web browser that blocks all mixed content would be delivering a very narrow version of the web to their users. Until more websites clean up this issue, browsers must compromise by permitting some of the less severe forms of mixed content. Blocking all mixed content would break a large number of websites that millions of users rely on every day.
The current compromise is to block the most dangerous types of mixed content and allow the less dangerous types to still be requested. Modern browsers follow the mixed content specification, which defines the optionally blockable content and blockable content categories. A resource qualifies as optionally blockable content when the risk of allowing its usage as mixed content is outweighed by the risk of breaking significant portions of the web, this is a subset of the passive mixed content category.
Images, video, and audio resources, as well as prefetched links, are the only resource types included in optionally blockable content. This category is likely to get smaller as time goes on. All content that is not optionally blockable is considered blockable, and is blocked by the browser. Most modern web browsers provide warnings in the developer console for mixed content, as well as blocking the more dangerous types of mixed content.
Each browser has its own set of rules, but generally speaking, active mixed content is much more likely to be blocked. Active mixed content poses a greater threat than passive. Although passive/display mixed content poses less of a threat, it still provides an opportunity for attackers to compromise privacy and track user activity.
Furthermore, since a lot of browsers allow some forms of passive mixed content and only provide users with mixed content warnings in the developer console, many users will be unaware that they are being exposed to mixed content. Users on antiquated web browsers are particularly vulnerable, as these browsers may not block mixed content at all. It is important to remember that not every visitor to your website uses the most up-to-date browsers.
Different versions from different browser vendors each behave differently with mixed content. At worst, some browsers and versions don’t block any mixed content at all, which is very unsafe for the user. The exact behaviour of each browser is constantly changing, so we won’t include specifics here. If you’re interested in how a specific browser behaves, look for information published by the vendors directly.
How to check your website for mixed content
There are a number of ways by which you can check if your website or any other site has mixed content.
a. Really Simple SSL
Really Simple SSL is a lightweight WordPress plugin that can handle the migration to SSL as well as check and fix mixed content.
b. SSL Insecure Content Fixer
If your WordPress site is already migrated to SSL then you can use SSL Insecure Content Fixer plugin to scan your site and alert you to insecure resources and help you fix them.
c. JitBit SSL Checker
JitBit SSL Checker is a free online scanner that will scan up to 400 pages of your site.
d. SSL Shopper
SSL Shopper is a free tool for identifying SSL issues, including mixed content. You can verify the SSL certificate on your web server to make sure it is correctly installed, valid, trusted and doesn’t give any errors to any of your users.
e. Screaming Frog Crawl Software
Screaming Frog is a modestly priced crawl software. This is a good option for crawling large sites. There’s a short learning curve for learning how to use the crawler, it’s quite intuitive. Screaming Frog will find your mixed content but it won’t fix it.
f. Source code
You can search for mixed content directly in your source code. Search for http:// in your source and look for tags that include HTTP URL attributes. Note that having http:// in the href attribute of anchor tags (<a>) is often not a mixed content issue, with some notable exceptions.
g. Chrome JavaScript Console
When visiting an HTTPS page in Google Chrome, the browser alerts you to mixed content as errors and warnings in the JavaScript Console. To view these alerts, open the Chrome JavaScript Console. You can open the console by pressing SHIFT + CTRL + I (Windows) or CMD + OPT + I (Mac) on your keyboard or right click anywhere on the browser and select “Inspect Element” or click on Chrome menu icon at the top-right corner of your browser window and then go to More tools > Developer Tools.
How to fix mixed content errors for your website
Web developers own the responsibility for eliminating mixed content. Over time, web browsers have become more and more restrictive in regards to mixed content, and this trend will only continue. It is therefore imperative that developers eliminate mixed content if they want web browsers to continue displaying their site.
The fix for mixed content is quite simple: Web developers need to ensure that every resource on their page is loaded over HTTPS. In practice, this can prove tricky, as modern websites often load several different resources from various places. Once you’ve found where the mixed content is included in your site’s source, follow these steps to fix it.
- Check that the URL is available over HTTPS by opening a new tab in your browser, entering the URL in the address bar, and changing http:// to https://. If the resource displayed is the same over HTTP and HTTPS, everything is OK. Proceed to step 2. If you see a certificate warning, or if the content can’t be displayed over HTTPS, it means the resource is not available securely. In this case, you should consider one of the following options:
- Include the resource from a different host, if one is available.
- Download and host the content on your site directly, if you are legally allowed to do so.
- Exclude the resource from your site altogether.
- Change the URL from http:// to https://, save the source file, and redeploy the updated file if necessary.
- View the page where you found the error originally and verify that the error no longer appears.
