Fix Mixed Content Warnings: When HTTPS Sites Load Insecure Resources

Your site has an SSL certificate. The padlock icon should be green. But instead, browsers are warning visitors that the page is “not fully secure” or showing a grey lock with a warning triangle.

This is a mixed content problem — your page loads over HTTPS, but some resources (images, scripts, stylesheets, iframes) are still being fetched over HTTP. Browsers block or flag these insecure resources because they undermine the security of the entire page.

This guide walks through how to find and fix mixed content warnings systematically, whether you are running WordPress, a custom site, or a self-hosted application.

Quick Fix: The Most Common Cause

In 80% of cases, mixed content comes from hardcoded http:// URLs in your HTML, CSS, or JavaScript. The fix:

1. Update your site URL settings — In WordPress, go to Settings → General and ensure both “WordPress Address” and “Site Address” use https://
2. Force HTTPS in your config — Add this to wp-config.php before the “stop editing” line:

define("FORCE_SSL_ADMIN", true);
if (strpos($_SERVER["HTTP_X_FORWARDED_PROTO"], "https") !== false) {
    $_SERVER["HTTPS"] = "on";
}

For non-WordPress sites, update your base URL in your application config and any environment variables.

If the warnings persist after this change, you have embedded mixed content to track down. Read on.

What Mixed Content Looks Like in the Browser

Different browsers display mixed content warnings differently:

Browser	What You See	What It Means
Chrome	Grey lock with yellow triangle, or “Not secure” label	Passive mixed content (images) loaded insecurely
Firefox	Grey lock with yellow warning triangle	Page contains mixed content
Safari	Padlock with “Not Secure” warning in address bar	Mixed active content blocked
Edge	Grey lock with warning triangle	Mixed content detected

Active mixed content (scripts, iframes, CSS, Flash) is usually blocked entirely — the resource will not load. Passive mixed content (images, audio, video) usually loads but triggers the warning.

Finding Mixed Content: Diagnostic Methods

Method 1: Browser Developer Tools

The fastest way to find mixed content is in Chrome DevTools:

1. Open your page in Chrome
2. Press F12 or right-click → Inspect
3. Click the Console tab
4. Reload the page

Look for messages like:

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

Each message tells you exactly which resource is the problem and its URL.

Method 2: View Page Source

Search the HTML source for http://:

1. Right-click → View Page Source
2. Press Ctrl+F (or Cmd+F on Mac)
3. Search for src="http://
4. Also search for href="http:// and url(http://

This catches hardcoded URLs in your HTML, but will not find dynamically generated URLs from JavaScript.

Method 3: Online Scanners

For a comprehensive scan, use an online tool:

• Why No Padlock? (whynopadlock.com) — scans your page and lists all insecure resources
• JitBit SSL Check — crawls your entire site for mixed content
• Screaming Frog SEO Spider — desktop tool that can find mixed content during crawls

Method 4: Command Line Scan

For WordPress sites, you can scan your database for hardcoded HTTP URLs:

# Search for HTTP URLs in WordPress database (run from server)
wp db query "SELECT * FROM wp_posts WHERE post_content LIKE '%http://%'" --skip-column-names

For static files:

# Find HTTP URLs in all PHP files
grep -r "http://" /var/www/html/ --include="*.php" | head -20

Root Causes and Fixes

Cause 1: Hardcoded HTTP URLs in Content

Symptom: Images or links in posts/pages use http:// URLs even though your site URL is set to HTTPS.

Diagnosis: Open DevTools Console and look for mixed content warnings pointing to specific images or resources in your content.

Fix for WordPress: Run a find-and-replace on your database:

# Better Search Replace plugin (recommended) - run from wp-admin
# Or use WP-CLI:
wp search-replace "http://yoursite.com" "https://yoursite.com" --dry-run
wp search-replace "http://yoursite.com" "https://yoursite.com"

Important: Always run with --dry-run first to preview changes.

Cause 2: Theme or Plugin Using HTTP URLs

Symptom: Mixed content warnings appear on specific pages or when certain plugins are active.

Diagnosis: Deactivate plugins one by one and check if warnings disappear. For themes, temporarily switch to a default theme (Twenty Twenty-Four).

Fix:

• Check theme options for any hardcoded URL fields and update them
• Contact the plugin/theme developer for a fix
• As a temporary workaround, add this to your .htaccess to force HTTPS on all resources:

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
</IfModule>

Cause 3: External Resources Loaded Over HTTP

Symptom: Warnings reference external domains (CDNs, analytics, fonts, ads).

Diagnosis: Check DevTools Console — the URL will show an external domain.

Fix: Update the resource URL to use HTTPS. Most modern CDNs and services support HTTPS. Examples:

<!-- Before -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- After -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

For Google Fonts, analytics scripts, and other embeds, simply change http:// to https://.

Cause 4: Inline Styles or Scripts with HTTP URLs

Symptom: DevTools points to inline <style> or <script> blocks, not external files.

Diagnosis: Search your HTML output for url(http:// within <style> tags.

Fix: Update the inline styles to use relative URLs or HTTPS:

/* Before */
background-image: url("http://example.com/images/bg.jpg");

/* After */
background-image: url("https://example.com/images/bg.jpg");
/* Or use protocol-relative (deprecated but still works) */
background-image: url("//example.com/images/bg.jpg");

Cause 5: Mixed Content in wp-config.php or Database Settings

Symptom: Site URL is correct in Settings, but admin area or login page shows warnings.

Diagnosis: Check wp-config.php for hardcoded WP_HOME or WP_SITEURL constants.

Fix: Update or add these constants to wp-config.php:

define("WP_HOME", "https://yoursite.com");
define("WP_SITEURL", "https://yoursite.com");

Diagnostic Flowchart: Where Is Your Mixed Content?

Use this decision tree to systematically isolate the problem:

Step	Check	If Yes	If No
1	Does DevTools Console show mixed content?	Note the URLs listed → Go to Step 2	Check if warnings only appear on specific pages
2	Are the URLs internal (your domain)?	Run database search-replace → Cause 1	Update external URLs to HTTPS → Cause 3
3	Do warnings only appear on specific pages?	Check theme templates for that page type	Check header/footer for site-wide issues
4	Did warnings start after a plugin update?	Deactivate plugin, contact developer → Cause 2	Check for hardcoded URLs in theme files
5	Is admin area affected but not front-end?	Force SSL in wp-config.php → Cause 5	Run online scanner for comprehensive audit

Prevention: Stop Mixed Content From Returning

Once your site is clean, prevent future mixed content issues:

1. Always Use Relative or Protocol-Relative URLs

When adding resources, use these patterns:

<!-- Relative (best for internal resources) -->
<img src="/images/logo.png" alt="Logo">

<!-- Protocol-relative (works for both HTTP and HTTPS) -->
<script src="//cdn.example.com/library.js"></script>

<!-- Or just always use HTTPS -->
<link href="https://fonts.googleapis.com/css2?family=Inter" rel="stylesheet">

2. Enable HSTS (HTTP Strict Transport Security)

HSTS forces browsers to always use HTTPS for your domain, even if someone types http://. Add to your .htaccess or Nginx config:

# Apache (.htaccess)
Header always set Strict-Transport-Security "max-age=31536000; includeSubDomains" env=HTTPS

# Nginx
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;

Warning: Enable HSTS only after confirming your site works fully over HTTPS. HSTS is cached by browsers and difficult to reverse.

3. Use a Content Security Policy (CSP)

CSP headers can report mixed content without blocking it during testing:

# Report-only mode (safe to enable)
Content-Security-Policy-Report-Only: default-src https:; report-uri /csp-report

4. Run Regular SSL Audits

Add a monthly check to your maintenance routine:

• Scan your site with Why No Padlock or SSL Labs
• Check Google Search Console for security issues
• Monitor browser DevTools during routine page reviews

When to Contact Your Hosting Provider

Some mixed content issues require server-level changes or hosting support:

• SSL certificate not auto-renewing — Let’s Encrypt certificates expire every 90 days; your host should handle auto-renewal
• Redirect loops — If forcing HTTPS causes redirect loops, your host may need to adjust server config
• CDN or proxy issues — If you use Cloudflare or a CDN, configuration conflicts can cause mixed content
• Server-side includes or proxies — Backend services fetching HTTP resources need application-level fixes

At Canadian Web Hosting, our support team can help diagnose SSL and mixed content issues. We also offer Managed Security for ongoing monitoring and hardening.

Recommended Hosting for SSL-Secured Sites

Running a secure HTTPS site requires reliable SSL certificate management and server configuration. For production sites:

• Shared Hosting — Free SSL included with all plans; good for small business sites and blogs. View Shared Hosting plans
• Managed WordPress — Automatic SSL provisioning and renewal, plus WordPress-specific security. View Managed WordPress
• Cloud VPS — Full control over SSL config, ideal for self-hosted applications and dev stacks. View Cloud VPS options

Related Resources

• SSL Certificate Types: DV, OV, and EV Explained — Understanding certificate validation levels
• Website Security Checklist — Comprehensive hardening guide
• WordPress Setup Guide — Getting started with a secure WordPress site

Summary

Mixed content warnings happen when HTTPS pages load HTTP resources. The fix is always the same: find the insecure URLs and update them to HTTPS. Use browser DevTools to locate the specific resources, then apply the appropriate fix based on whether the URLs are in your content, theme, plugins, or external services.

Once resolved, enable HSTS and use relative URLs going forward to prevent mixed content from returning. A clean padlock icon builds visitor trust and ensures your SSL investment actually protects your users.