How to Fix Mixed Content Error After SSL Installation

Implementing an SSL certificate is crucial to ensuring your website is secure. SSL certificates help in protecting data being shared between your server and users, increase SEO rankings, and helps in establishing credibility. However, many users experience a problem after switching to HTTPS: mixed content warnings. These warnings show up when a resource on your site tries to load over HTTP, which defeats the purpose of SSL and in one way or another, breaks the website’s design or functionality.

In this article, I will help you understand the most important aspects of mixed content errors and how you can resolve them. It does not matter if you are using WordPress, a custom CMS, or a static site; I will help you troubleshoot your problem.

What Is Mixed Content

Mixed content happens when a secure HTTPS page includes resources (like images, scripts, stylesheets, or iframes) that are loaded over insecure HTTP. Browsers flag this as a security risk because it opens the door to man-in-the-middle attacks.

Types of Mixed Content

• Passive mixed content: Includes images, audio, and video. Browsers may allow these, but still show warnings.
• Active mixed content: Includes scripts, stylesheets, and iframes. These are often blocked entirely, breaking site functionality.

Why Mixed Content Matters

Mixed content undermines the integrity of your HTTPS setup. Even a single insecure resource can:

1. Trigger browser warnings or block content
2. Break site layout or functionality
3. Reduce user trust and SEO performance
4. Leave your site vulnerable to attacks

Modern browsers like Chrome and Firefox aggressively block active mixed content, and even passive content may be restricted in future updates.

Fix Mixed Content Errors

Let’s break down the process into actionable steps:

Verify SSL Installation

Before you want to fix SSL mixed content, ensure your SSL certificate is properly installed:

Visit your site using https://yourdomain.com. Check for the padlock icon in the browser address bar. Use tools like SSL Labs to verify the configuration.

If SSL isn’t set up correctly, fix that first. Mixed content errors only apply to HTTPS-enabled sites.

Identify Mixed Content

You can detect mixed content using several methods:

Browser Developer Tools

Open your site in Chrome, Right-click, then Inspect check the Console tab. Look for warnings like:

Mixed Content: The page at 'https://yourdomain.com' was loaded over HTTPS, but requested an insecure resource 'http://example.com/script.js'.

WordPress Plugins

If you are using WordPress, plugins like Better Search Replace can help detect and fix WordPress mixed content errors automatically.

Fix Mixed Content in Custom Code

If you manage your site manually or use a custom CMS, follow these steps:

Use Relative URLs

Instead of hardcoding absolute paths like:

<img src="http://yourdomain.com/image.jpg">

Use relative paths:

<img src="/image.jpg">

Or protocol-relative URLs:

<img src="//yourdomain.com/image.jpg">

However, protocol-relative URLs are discouraged in modern development. Prefer HTTPS explicitly.

Update Hardcoded URLs

Search your codebase for http:// and replace with https://. This includes:

• HTML templates
• CSS files (e.g., background images)
• JavaScript files (e.g., AJAX calls)

Use tools like grep or find in Linux distros:

grep -r "http://" /var/www/html/

Or use the sed command to replace:

sed -i 's|http://|https://|g' *.html

Fix Mixed Content in the WordPress Database

WordPress stores URLs in the database, especially in post content, widgets, and plugin settings. Install Better Search Replace.

After activating the plugin, go to Tools, then Better Search Replace.

Search for http://yourdomain.com and replace with https://yourdomain.com. Select all tables and run a dry run first. This will help to fix the HTTP HTTPS error WordPress.

If you have SSH access, you can run the WP-CLI command:

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

This is fast and reliable for large sites.

Fix Mixed Content in Theme and Plugin Files

Themes and plugins often include external resources. Check functions.php, Enqueued scripts/styles or Custom widgets or shortcodes.

Update any hardcoded HTTP URLs to HTTPS.

wp_enqueue_script('custom-js', 'http://example.com/script.js');

Change to:

wp_enqueue_script('custom-js', 'https://example.com/script.js');

Fix External Resources

Sometimes your site loads assets from third-party domains (CDNs, fonts, analytics). If those are served over HTTP:

• Check if the provider supports HTTPS
• Update URLs accordingly

Example:

<link href="http://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

Change to:

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

If the external source doesn’t support HTTPS, consider hosting the asset locally or finding an alternative.

Set Up Redirects

Ensure all HTTP traffic is redirected to HTTPS for Apache users. Rewrite the following .htaccess file:

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

Security Implications

Mixed content isn’t just an issue; it’s a vulnerability. Attackers can intercept HTTP resources and inject malicious code. Fixing mixed content is essential for:

1. PCI compliance
2. GDPR and data protection
3. SEO and user trust

Conclusion

Mixed content errors are a common hurdle after SSL installation, but they’re entirely fixable with a methodical approach. Whether you’re managing a WordPress site or a custom stack, the key is to identify all insecure resources and update them to HTTPS. With proper redirects, database updates, and vigilant monitoring, your site can be fully secure and free of mixed content issues.

FAQ