You've installed your SSL certificate, enabled HTTPS, and... wait, why is there a warning icon instead of a padlock? Welcome to the world of mixed content errors—one of the most common issues when migrating to HTTPS. If you're still setting up SSL, check out our SSL/TLS basics guide first.

What Is Mixed Content?

Mixed content occurs when an HTTPS page loads resources (images, scripts, stylesheets) over HTTP. Your page is secure, but it's pulling in insecure stuff.

Think of it like having a secure vault but leaving the back door open.

Two Types of Mixed Content

Passive Mixed Content (Less Severe)

Images (<img>)
Video (<video>)
Audio (<audio>)

Browsers usually load these but show a warning. The risk is lower because these resources can't execute code.

Active Mixed Content (More Severe)

Scripts (<script>)
Stylesheets (<link rel="stylesheet">)
Iframes (<iframe>)
XMLHttpRequest/Fetch requests
Web fonts

Browsers block these by default because they can execute code and potentially compromise the page.

How to Identify Mixed Content

Method 1: Browser DevTools

The quickest way to find mixed content:

Open your site in Chrome
Press F12 to open DevTools
Go to the Console tab
Look for warnings like:

Mixed Content: The page at 'https://example.com' was loaded over HTTPS,
but requested an insecure image 'http://example.com/image.jpg'.
This content should also be served over HTTPS.

Method 2: Security Tab

Open DevTools (F12)
Go to the Security tab
Click on your domain
See a summary of mixed content issues

Method 3: Network Tab

Open DevTools (F12)
Go to the Network tab
Reload the page
Look for resources loaded over http://

Method 4: Online Tools

Why No Padlock (whynopadlock.com) - Scans for mixed content
JitBit SSL Checker - Finds insecure resources
Missing Padlock - Another scanner option

Method 5: Command Line

# Crawl your site for HTTP links
wget --spider -r -nd -nv -H -l 1 -w 1 https://example.com 2>&1 | grep -i "http://"

Common Sources of Mixed Content

1. Hardcoded URLs in Content

<!-- Problem -->
<img src="http://example.com/image.jpg" />

<!-- Solution -->
<img src="https://example.com/image.jpg" />
<!-- Or use protocol-relative (less recommended now) -->
<img src="//example.com/image.jpg" />

2. CSS Background Images

/* Problem */
.hero {
  background-image: url("http://example.com/bg.jpg");
}

/* Solution */
.hero {
  background-image: url("https://example.com/bg.jpg");
}

3. External Scripts and Libraries

<!-- Problem -->
<script src="http://cdn.example.com/library.js"></script>

<!-- Solution -->
<script src="https://cdn.example.com/library.js"></script>

4. Embedded Content

<!-- Problem -->
<iframe src="http://maps.example.com/embed"></iframe>

<!-- Solution -->
<iframe src="https://maps.example.com/embed"></iframe>

5. Font Files

/* Problem */
@font-face {
  font-family: "CustomFont";
  src: url("http://fonts.example.com/font.woff2");
}

/* Solution */
@font-face {
  font-family: "CustomFont";
  src: url("https://fonts.example.com/font.woff2");
}

6. API Calls

// Problem
fetch("http://api.example.com/data");

// Solution
fetch("https://api.example.com/data");

Fixing Mixed Content: Step by Step

Step 1: Audit Your Site

Use the methods above to create a list of all mixed content. Categorize by:

Internal resources (on your domain)
External resources (third-party)

Step 2: Fix Internal Resources

For resources on your own domain:

Option A: Update URLs to HTTPS

<!-- Change this -->
<img src="http://example.com/image.jpg" />
<!-- To this -->
<img src="https://example.com/image.jpg" />

Option B: Use Relative URLs (Recommended)

<!-- Even better - use relative paths -->
<img src="/images/image.jpg" />

Option C: Protocol-Relative URLs

<!-- Works but less recommended now -->
<img src="//example.com/image.jpg" />

Step 3: Fix External Resources

For third-party resources:

Check if HTTPS is available - Most CDNs and services support HTTPS
Update the URL - Change http:// to https://
If no HTTPS available - Host the resource yourself or find an alternative

Step 4: Database Updates (CMS Sites)

For WordPress, Drupal, or other CMS platforms, URLs are often stored in the database.

WordPress:

-- Update post content
UPDATE wp_posts
SET post_content = REPLACE(post_content, 'http://example.com', 'https://example.com');

-- Update post meta
UPDATE wp_postmeta
SET meta_value = REPLACE(meta_value, 'http://example.com', 'https://example.com');

-- Update options
UPDATE wp_options
SET option_value = REPLACE(option_value, 'http://example.com', 'https://example.com');

Or use a plugin like Better Search Replace or Velvet Blues Update URLs.

WordPress Site URL Settings:

Go to Settings → General
Update WordPress Address (URL) to https://
Update Site Address (URL) to https://

Step 5: Update Configuration Files

Check these common locations:

WordPress wp-config.php:

define('WP_HOME', 'https://example.com');
define('WP_SITEURL', 'https://example.com');

Environment variables:

APP_URL=https://example.com

Quick Fixes and Workarounds

Content Security Policy: upgrade-insecure-requests

This header tells browsers to automatically upgrade HTTP requests to HTTPS:

<meta
  http-equiv="Content-Security-Policy"
  content="upgrade-insecure-requests"
/>

Or as an HTTP header:

Content-Security-Policy: upgrade-insecure-requests

Pros:

Quick fix for many mixed content issues
No code changes needed

Cons:

Only works if resources are available over HTTPS
Doesn't fix the underlying issue
May hide problems you should actually fix

Block All Mixed Content

For maximum security, block all mixed content:

<meta http-equiv="Content-Security-Policy" content="block-all-mixed-content" />

This prevents any HTTP resources from loading on your HTTPS pages.

Platform-Specific Solutions

WordPress

Update URLs in Settings → General
Use a plugin: Really Simple SSL, SSL Insecure Content Fixer
Update database with search-replace
Check theme files for hardcoded URLs
Review plugins that might inject HTTP content

Shopify

Shopify handles most SSL automatically, but check:

Theme files for hardcoded URLs
Third-party apps and scripts
Custom code snippets

Squarespace

Usually handles this automatically. Check:

Code injection areas
Custom CSS
Embedded content

Custom Sites

Search codebase for http://
Update configuration files
Check build processes
Review CDN settings

Testing Your Fixes

After making changes:

1. Clear Caches

Browser cache
CDN cache
Application cache
Database cache (if applicable)

2. Test in Incognito Mode

Open an incognito/private window to avoid cached content.

3. Check Multiple Pages

Mixed content might only appear on certain pages. Test:

Homepage
Blog posts
Product pages
Contact forms
Any page with dynamic content

4. Use Multiple Browsers

Test in Chrome, Firefox, Safari, and Edge.

5. Verify with Tools

Run your site through:

Browser DevTools (no console warnings)
Why No Padlock
GuardSSL

Preventing Future Mixed Content

Development Practices

Always use relative URLs for internal resources
Use HTTPS URLs for external resources
Set up CSP headers to catch issues early
Test in HTTPS during development

Content Management

Configure your CMS to use HTTPS URLs by default
Train content editors to use HTTPS when embedding content
Use URL rewriting to automatically fix HTTP URLs

Monitoring

Set up CSP reporting to catch mixed content:

Content-Security-Policy-Report-Only: default-src https:; report-uri /csp-report

Regular audits - Scan your site periodically
Automated testing - Include mixed content checks in CI/CD

Key Takeaways

Mixed content occurs when HTTPS pages load HTTP resources
Active mixed content (scripts, stylesheets) is blocked by browsers
Use browser DevTools to identify mixed content issues
Fix by updating URLs to HTTPS or using relative paths
The upgrade-insecure-requests CSP directive can help as a quick fix
Prevent future issues with proper development practices and monitoring

Need to check your site for SSL issues including mixed content? Scan your domain with GuardSSL for a comprehensive security analysis.