How to fix mixed content warnings on your HTTPS website

Your site shows a padlock icon but with a warning, or some browsers show "Not Secure" even though you have an SSL certificate. This is almost always a mixed content problem. Here is how to find and fix it.

What mixed content means

Mixed content occurs when a page is served over HTTPS but contains resources (images, scripts, stylesheets, iframes) loaded over HTTP. Browsers block or warn about these because an HTTP resource on an HTTPS page undermines the security of the connection.

Your page: https://yourdomain.com/page
Loads an image: http://yourdomain.com/images/logo.png  ← mixed content

The image URL uses HTTP instead of HTTPS. Even though it is the same domain, the HTTP scheme is the problem.

How to see what is causing the warning

In Chrome:

1. Right-click → Inspect → Console tab
2. Look for errors starting with "Mixed Content:" — these list the exact URLs causing the problem
3. Also check the Network tab, filter by "Not secure"

In Firefox:

1. Right-click → Inspect → Security tab → shows blocked mixed content

Common findings:

• Images referenced as http:// in WordPress post content
• Plugin assets (scripts, stylesheets) loaded over HTTP
• Third-party embeds (YouTube, Google Maps) using HTTP src attributes
• WordPress siteurl or home option still set to http://

Fix 1: WordPress siteurl and home option

The most common cause. If your WordPress site was previously HTTP and you added SSL without updating the database:

Via wp-config.php (override):

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

Via WP-CLI (permanent):

wp option update siteurl 'https://yourdomain.com'
wp option update home 'https://yourdomain.com'

Via phpMyAdmin:

1. Select your WordPress database
2. Go to wp_options table
3. Find rows where option_name is siteurl and home
4. Change option_value from http:// to https://

Fix 2: Search-replace HTTP references in the database

Even after fixing siteurl/home, your post content, custom fields, and widget data may contain hardcoded http:// URLs.

Best tool: Better Search Replace plugin:

1. Install Better Search Replace (free plugin)
2. Search for: http://yourdomain.com
3. Replace with: https://yourdomain.com
4. Select all tables
5. Do a dry run first (leave "Run as dry run?" checked)
6. Then run the actual replace

Or via WP-CLI:

wp search-replace 'http://yourdomain.com' 'https://yourdomain.com' --all-tables

Important: This uses serialized data handling to avoid breaking PHP serialized arrays in the database.

Fix 3: Force SSL via .htaccess

Redirect all HTTP traffic to HTTPS at the server level:

RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

Add this before the WordPress rules in your .htaccess. This prevents HTTP pages from being served at all.

Fix 4: Really Simple SSL plugin (easiest for WordPress)

The Really Simple SSL plugin (free) handles most of this automatically:

1. Install and activate Really Simple SSL
2. It detects mixed content, fixes the siteurl/home options, and adds the HTTPS redirect
3. It can also enable HTTP Strict Transport Security (HSTS)

This plugin is a good starting point but may not catch hardcoded HTTP references in post content — use the search-replace for those.

Fix 5: Content Security Policy header (CSP)

A CSP header can automatically upgrade HTTP resources to HTTPS without breaking your page:

Content-Security-Policy: upgrade-insecure-requests

Add via .htaccess:

Header always set Content-Security-Policy "upgrade-insecure-requests"

Or via your CDN's custom headers setting.

This tells browsers to silently upgrade any http:// resource on the page to https://. It is a safety net, not a replacement for fixing the source URLs.

Fix 6: External resources causing mixed content

Third-party embeds can cause mixed content if the external domain does not support HTTPS. Solutions:

YouTube embeds: Use //www.youtube.com/embed/ (protocol-relative) or https://. Old WordPress embeds may use http://.

Google Fonts: Use https://fonts.googleapis.com/ — they have supported HTTPS for years.

Third-party scripts and images that do not support HTTPS: Find an HTTPS alternative or self-host the asset.

Check if an external domain supports HTTPS by visiting it directly in your browser with https:// — if it loads without error, change your reference to https://.

For non-WordPress sites

If you are running a custom HTML/PHP site:

1. Search all files for http://yourdomain.com:

   grep -r "http://yourdomain.com" ~/public_html --include="*.html" --include="*.php"
   

2. Replace with https://yourdomain.com in each file

3. Check for hardcoded HTTP references to external resources (fonts, CDNs, analytics scripts)

4. Add the HTTPS redirect in .htaccess (above)

Verifying the fix

After applying fixes:

1. Clear your browser cache (Ctrl+Shift+Delete)
2. Visit your site in a new incognito window
3. Check the address bar — should show a clean padlock
4. Re-check the Console tab for any remaining mixed content warnings

Use whynopadlock.com — enter your URL and it scans for mixed content warnings across your pages.

SSL is installed but the padlock still shows "Not Secure"

If the padlock has a warning triangle or says "Not Secure" despite a valid certificate:

• Mixed content (above) is the most common cause
• Older browsers may show this for weak cipher suites
• Check your SSL rating at ssllabs.com/ssltest — it should be A or A+