What is Mixed Content?

Mixed content occurs when an HTTPS (secure) webpage loads resources like scripts, stylesheets, images, or other files over HTTP (insecure). This creates a security vulnerability because, while the main page is encrypted, the HTTP resources can be intercepted or modified by attackers through man-in-the-middle attacks.

Modern browsers actively warn users about mixed content, often blocking certain types of insecure resources entirely. These warnings damage user trust and can break website functionality. This Mixed Content Checker helps you identify all HTTP resources on your HTTPS pages so you can fix them before they cause problems.

Types of Mixed Content

Browsers classify mixed content into two categories:

1. Active Mixed Content (High Risk): Resources that can alter page behavior or access sensitive data. This includes:

• Scripts (<script src="http://...">)
• Stylesheets (<link rel="stylesheet" href="http://...">)
• XMLHttpRequest or Fetch API calls to HTTP URLs
• Iframes (<iframe src="http://...">)
• Web fonts loaded via @font-face

Modern browsers block active mixed content by default to protect users.

2. Passive Mixed Content (Lower Risk): Resources that can't modify the page but still create security concerns:

• Images (<img src="http://...">)
• Audio (<audio src="http://...">)
• Video (<video src="http://...">)

Browsers typically allow passive mixed content but show warnings in the console and may not display the secure lock icon.

How to Use This Tool

1. Enter an HTTPS URL in the input field (the tool only works with HTTPS pages).
2. Click Check for Mixed Content to scan the page.
3. Review the results showing whether the page is secure or has mixed content.
4. Examine the list of insecure resources, categorized by type.
5. Copy the results to share with your development team or for documentation.

Example Results

When scanning an HTTPS page with mixed content issues, you might see:

This tells you that the page loads 3 resources over HTTP: a JavaScript file, an image, and a stylesheet—all of which need to be changed to HTTPS.

Real-World Use Cases

Scenario 1: HTTP to HTTPS Migration
You've just migrated your website from HTTP to HTTPS by installing an SSL certificate. However, your HTML still contains hardcoded HTTP URLs. You use this tool to scan key pages and discover several scripts and stylesheets still loading over HTTP. You update these to HTTPS, ensuring full encryption.

Scenario 2: Third-Party Integration
You've integrated a third-party widget into your HTTPS site. Users report seeing security warnings. This tool reveals the widget loads resources over HTTP. You contact the provider to request HTTPS versions or find an alternative widget that supports HTTPS.

Scenario 3: Legacy Content
Your blog has hundreds of old posts containing images and videos embedded with HTTP URLs. You use this tool to scan popular posts, identifying which ones need updating. You then bulk-update the database to replace HTTP:// with HTTPS:// in image URLs.

Scenario 4: CDN Configuration
Your site uses a CDN for assets, but you discover the CDN URLs in your HTML use HTTP. You reconfigure your template to use protocol-relative URLs (//cdn.example.com) or explicit HTTPS URLs, then verify with this tool that the issue is resolved.

Scenario 5: E-commerce Security Audit
Before launching your e-commerce site, you perform a security audit. This tool helps ensure no insecure resources are loaded on checkout pages, which could compromise customer data and damage trust.

How to Fix Mixed Content

Once you've identified mixed content, here's how to fix it:

1. Change HTTP to HTTPS: The simplest fix—update all HTTP URLs to HTTPS in your HTML, CSS, and JavaScript:

   Before: <script src="http://example.com/script.js"></script>
   After:  <script src="https://example.com/script.js"></script>

2. Use Protocol-Relative URLs: Remove the protocol entirely, letting the browser use the same protocol as the page:

   <script src="//example.com/script.js"></script>

3. Host Resources Locally: Download third-party resources and host them on your own HTTPS server.
4. Use HTTPS CDNs: Switch to CDN providers that support HTTPS (most modern CDNs do).
5. Update Database Content: For CMS sites, search and replace HTTP URLs in your database content.
6. Configure CSP Headers: Implement Content Security Policy headers that require all resources to load over HTTPS.

Preventing Mixed Content

Best practices to avoid mixed content in the future:

• Always Use HTTPS: When adding new resources, always use HTTPS URLs
• Use Relative URLs: For internal resources, use relative paths (/images/logo.png) instead of absolute URLs
• Set Content Security Policy: Configure CSP headers to upgrade or block insecure requests automatically
• Enable HSTS: HTTP Strict Transport Security forces browsers to always use HTTPS
• Check Third-Party Tools: Verify that plugins, widgets, and integrations support HTTPS before installation
• Automated Testing: Include mixed content checks in your CI/CD pipeline
• Regular Audits: Scan your site regularly, especially after content updates or migrations

Browser Security Implications

Mixed content affects how browsers display your site's security:

• Broken Padlock Icon: Browsers won't show the secure padlock icon
• Security Warnings: Users may see warnings about "insecure content" or "not fully secure"
• Blocked Resources: Scripts, stylesheets, and other active content may be blocked, breaking functionality
• Console Errors: Developer console shows mixed content warnings
• SEO Impact: Search engines may rank pages with security issues lower
• Trust Loss: Users may abandon purchases or forms if they see security warnings

Content Security Policy (CSP)

You can use CSP headers to automatically upgrade or block mixed content:

Content-Security-Policy: upgrade-insecure-requests;

This directive tells browsers to automatically upgrade HTTP requests to HTTPS when possible, providing a temporary safety net while you update your HTML.

Tool Limitations

This tool has some limitations to be aware of:

• Static Analysis Only: Only checks resources in the HTML source; dynamic content loaded via JavaScript may not be detected
• CSS Background Images: Doesn't check for HTTP URLs in CSS background-image properties unless inline
• JavaScript-Generated URLs: Programmatically constructed URLs may not be detected
• iframe Contents: Doesn't recursively check resources loaded inside iframes

For comprehensive testing, also use browser developer tools to check the console for mixed content warnings during actual page loads.

Related Tools

• SSL Analyzer - Check SSL certificate validity and security
• Broken Image Finder - Identify broken resources
• Security Headers Checker - Verify security headers including CSP
• HTTP Header Checker - Inspect all response headers
• Technology Detector - Identify CDNs and security technologies