Mixed content is a critical security vulnerability that occurs when an HTTPS page loads insecure resources (like images, scripts, or stylesheets) over an HTTP connection. This single mistake completely negates the trust and security benefits of your SSL certificate. It breaks the security of the entire page, causing browsers to display prominent security warnings and, in many cases, block the insecure resources from loading altogether. This can break your site’s functionality, erode user trust, and negatively impact your SEO.
Think of your HTTPS page as a secure, armored truck. If you leave the back doors open by loading an HTTP resource, the entire truck is no longer secure. Even one insecure resource is enough to break the padlock in the user’s browser. For a broader look at website security, see our guide on the security category.
Active vs. Passive Mixed Content
Browsers handle mixed content differently depending on the type of resource. As Google’s documentation explains, the risks are categorized as active or passive.
- Passive Mixed Content: Resources that can’t significantly alter the page. Browsers may still display a warning, but the resources are often loaded. Examples include
<img>,<audio>, and<video>tags. - Active Mixed Content: Resources that can access and modify the entire page. This is the most dangerous type, and modern browsers will almost always block this content by default, which can break your site’s appearance and functionality. Examples include
<script>,<link rel="stylesheet">, and<iframe>tags.
A Step-by-Step Guide to Fixing Mixed Content
The goal is to ensure that every single resource on your HTTPS site is loaded over a secure HTTPS connection. For a deep dive into this topic, this guide from Ahrefs on website security is an excellent resource.
Example: Fixing an Insecure Image Link
<!-- Before: Insecure HTTP image link --> <img src="https://example.com/image.jpg"> <!-- After: Secure HTTPS image link --> <img src="https://example.com/image.jpg">For more on this topic, see our guide on on-page SEO.
Frequently Asked Questions
What is the difference between active and passive mixed content?
Passive mixed content refers to resources that cannot modify the page, like images, audio, and video. Active mixed content refers to resources that can, like scripts, stylesheets, and iframes. Browsers will almost always block active mixed content, which can break your site’s functionality, making it a more critical issue to fix.
Should I use protocol-relative URLs (//example.com) to fix mixed content?
No. Protocol-relative URLs were once a common practice, but they are now considered an anti-pattern. Since your site should be fully on HTTPS, there is no need for the ambiguity of a protocol-relative URL. It’s always better to use absolute HTTPS URLs for all your resources.
How can I find all the mixed content issues on my site?
The most effective way is to use a website crawler like Creeper. It will scan every page of your HTTPS site and report any resources (images, CSS, JS, etc.) that are still being loaded over an insecure HTTP connection.
Is your padlock broken? Start your Creeper audit today to find and fix all mixed content issues on your site.