Mixed Content Warnings: What They Are and How to Fix Them

You've set up HTTPS on your website. You have a valid SSL certificate. But when you load your homepage, the padlock is gone — or there's a warning triangle next to it. The culprit is almost always mixed content.

Mixed content is one of the most common SSL-related problems for Australian businesses that have recently migrated to HTTPS. It's fixable, but it requires systematically tracking down every HTTP resource on your site.

What Is Mixed Content?

Mixed content occurs when an HTTPS page loads resources — images, scripts, stylesheets, fonts, iframes — over plain HTTP.

Your page itself is served securely over HTTPS. But if it tries to load a JavaScript file, image, or font from an http:// URL, that resource is loaded insecurely. The browser detects this mismatch and responds depending on the type of resource.

Active mixed content (scripts, stylesheets, iframes): These can modify the page's behaviour. Browsers block them entirely. Your JavaScript won't load. Your styles may break. The padlock disappears.

Passive mixed content (images, audio, video): These can't directly modify behaviour but can be intercepted by an attacker. Browsers typically load them but show a warning — a shield icon or triangle instead of the padlock.

Why Mixed Content Happens

Mixed content is almost never intentional. Common causes:

1. Content migrated from HTTP You moved your site from HTTP to HTTPS, but internal links and image URLs in your CMS still use http:// because they were saved that way.

2. Third-party embeds An embedded widget, map, video player, or analytics script that's loaded from an HTTP URL.

3. Hardcoded URLs in CSS Background images, fonts, or other assets referenced as http:// in your stylesheet files.

4. Old content in a CMS Blog posts, pages, or product descriptions written when the site was still HTTP — containing hardcoded http:// links to images or media.

5. Plugins and extensions WordPress plugins or website builder extensions that load their own resources from HTTP endpoints.

How to Find Mixed Content

Method 1: Browser Developer Tools

1. Open Chrome and visit your page
2. Open DevTools (F12 or right-click → Inspect)
3. Click the Console tab
4. Look for warnings like: Mixed Content: The page at 'https://...' was loaded over HTTPS, but requested an insecure resource 'http://...'

The console will show you the exact URLs of all mixed content resources.

Method 2: The Network Tab

1. Open DevTools → Network tab
2. Reload the page
3. Filter by clicking "All"
4. Look for requests with http:// in the URL column

Method 3: Online Tools

Several free tools crawl your site for mixed content:

• Why No Padlock (whynopadlock.com) — paste your URL and get a full report
• SSL Check tools from Qualys and JitBit
• Screaming Frog — for larger sites with hundreds of pages

Method 4: Browser Address Bar

Simply visit your page. If the padlock is missing or shows a warning, you have mixed content. Chrome shows a small information icon; clicking it shows "Not secure" or a warning about mixed content.

How to Fix Mixed Content

Quick fix: Force HTTPS at the server level

Many hosting platforms let you force HTTPS redirects. This changes http:// requests to https:// automatically. In cPanel: SSL/TLS → Always redirect to HTTPS. In Cloudflare: SSL/TLS → Edge Certificates → Always Use HTTPS.

This helps with resources you control — but won't fix third-party HTTP embeds.

WordPress sites

Install the plugin "Better Search Replace" or "Really Simple SSL"

These scan your database for http://yourdomain.com references and replace them with https://yourdomain.com.

For better control, use Better Search Replace:

1. Install and activate
2. Search for: http://yourdomain.com.au
3. Replace with: https://yourdomain.com.au
4. Select all tables
5. Run

This updates URLs stored in the database — posts, pages, media library links.

Fix references in theme and plugin files

Search your theme files for http://:

grep -r "http://" /path/to/wp-content/themes/your-theme/

Change any found to https:// or use protocol-relative URLs (// instead of http://).

Fix third-party embeds

For third-party content (Google Maps, YouTube, social media widgets):

1. Check if the provider has an HTTPS version of the embed — most do
2. Change http:// to https:// in the embed code
3. If they don't support HTTPS at all, you'll need to find an alternative

Non-WordPress sites

For static sites or custom CMSs:

1. Use your developer tools to identify all HTTP resources
2. Update each reference in your code
3. For images/assets hosted on your own server, the URLs should work over HTTPS without any server changes — just update the reference

Preventing Mixed Content in Future

Set a Content Security Policy (CSP) header that blocks mixed content:

Content-Security-Policy: upgrade-insecure-requests

This header tells browsers to automatically upgrade HTTP requests to HTTPS where possible, and block them where they can't be upgraded. Add this to your server configuration or via a plugin.

Audit new content before publishing. If your team creates content in a CMS, establish a rule: no http:// URLs in content. Paste images into the media library rather than linking to external HTTP sources.

Use a staging environment. Test HTTPS on staging before going live. Mixed content problems are much easier to catch before launch than after.

The Business Impact

Mixed content isn't just a technical annoyance:

• SEO: Google confirmed that HTTPS is a ranking signal. Mixed content warnings can undermine the benefit.
• Trust: Customers who see the "Not Secure" warning in their browser address bar leave — research consistently shows the majority of users abandon sites that display browser security warnings.
• Compliance: If you're processing payments, mixed content on checkout pages may put you in violation of PCI DSS requirements — specifically Requirement 4.2.1, which mandates that cardholder data be transmitted only over trusted, encrypted connections.

Once you've fixed your mixed content and the padlock is solid, the next priority is keeping your SSL certificate renewed — because a broken padlock from an expired certificate has the same effect on customer trust as mixed content.

CertGuard monitors your certificate and alerts you before it expires. Free for up to 3 domains.