How to Fix Mixed Content Errors in Chrome on Your Website

Introduction

A “Mixed Content” error in Chrome, often flagged with a “Not Secure” warning in the address bar, signals that your HTTPS website is loading insecure HTTP resources (e.g., images, scripts). This client-side issue, common across hosting providers, can erode user trust, harm SEO, and disrupt functionality. Whether you’re running a WordPress blog, an e-commerce site, or a custom app, mixed content errors are easily fixable, even for new website owners and non-developers.

Our detailed guide provides step-by-step solutions using hosting control panel, browser tools, and CMS plugins, with advanced methods for deeper fixes. Let’s secure your site and eliminate those warnings!

What Causes Mixed Content Errors in Chrome?

Mixed content errors occur when an HTTPS page loads resources (e.g., images, CSS, JavaScript) over insecure HTTP, breaking the site’s security. Common causes include:

• Hardcoded HTTP URLs: Resources in your CMS or code using absolute HTTP URLs (e.g., http://yourdomain.com/image.jpg).
• Plugin Issues: WordPress or Joomla plugins loading external HTTP resources (e.g., a slider plugin fetching HTTP images).
• Theme Settings: Themes with HTTP-based assets (e.g., background images or fonts in CSS).
• External Resources: Third-party scripts or embeds (e.g., analytics, ads, or social media widgets) using HTTP.
• Misconfigured SSL: Incomplete HTTPS redirects, leaving some pages or assets on HTTP.
• CDN Conflicts: Content Delivery Networks (e.g., Cloudflare) serving HTTP content due to misconfiguration.
• Database Issues: WordPress database storing HTTP URLs (e.g., in wp_posts or wp_options) after an SSL migration.
• Browser Cache: Cached HTTP resources loading despite HTTPS updates.

Step-by-Step Fix

Follow these steps to resolve mixed content errors, addressing all causes systematically:

1. Identify Mixed Content in Chrome

• Open your website in Google Chrome and press F12 to access Developer Tools.
• Navigate to the Console tab to view warnings like “Mixed Content: The page at ‘https://example.com’ was loaded over HTTPS, but requested an insecure resource ‘http://example.com/image.jpg’.”
• Note the affected URLs (e.g., images, scripts) and their sources (e.g., homepage, specific posts).
• Alternatively, use Chrome’s Security tab to check for “Non-secure resources” or run a site scan with tools like “Why No Padlock” (whynopadlock.com).

The identified resources will guide your fixes—start by updating URLs in your CMS or code.

2. Update HTTP URLs to HTTPS in Your CMS

• Update the site URL in your WordPress admin dashboard -> General Settings.



• Check plugin or theme settings (e.g., WordPress Customizer) for HTTP-based URLs (e.g., logo images).
• Use a plugin to run search and replace. For WordPress, log into wp-admin and install a plugin like Better Search Replace. Run a search to replace “http://yourdomain.com” with “https://yourdomain.com” in the database (e.g., wp_posts, wp_options).



• Alternatively, use phpMyAdmin to run search and replace queries directly on the website’s database:
  • Select your WordPress database and run an SQL query:

    UPDATE wp_options SET option_value = REPLACE(option_value, 'http://yourdomain.com', 'https://yourdomain.com');
    UPDATE wp_posts SET post_content = REPLACE(post_content, 'http://yourdomain.com', 'https://yourdomain.com');

• For non-CMS sites: In File Manager, edit HTML/CSS files (e.g., index.html, style.css) to update HTTP URLs to HTTPS or use relative URLs (e.g., /image.jpg).

Updated URLs should resolve most errors. If issues persist, force HTTPS site-wide.

3. Force HTTPS with .htaccess

• Log into your hosting control panel and open File Manager.
• Navigate to your site’s root directory (typically public_html) and edit the .htaccess file.
• Add the following rules to redirect all HTTP traffic to HTTPS:

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

• Save, right-click .htaccess, select Change Permissions, and set permissions to 644.
• Alternatively, via SSH: Edit .htaccess with nano .htaccess, add the rules, and set permissions with chmod 644 .htaccess.
• Test your site in Chrome to ensure no HTTP resources remain.

Caution: Editing the .htaccess file can result in a site outage. It is recommended to back up the original .htaccess file before making any changes.

Forced HTTPS should eliminate redirect issues. Next, address external resources or CDN settings.

4. Fix External Resources and CDN Configurations

• Identify external HTTP resources in Chrome Developer Tools (e.g., http://cdn.example.com/script.js).
• Update plugin settings (e.g., disable HTTP-based analytics or replace with HTTPS versions).
• For CDNs: Log into your CDN dashboard (e.g., Cloudflare > SSL/TLS) and enable “Always Use HTTPS.”



• Purge the CDN cache (e.g., Cloudflare > Caching > Purge Cache) and test your site.
• For embeds (e.g., YouTube videos), ensure URLs use HTTPS (e.g., https://www.youtube.com/embed/yourvideo).

5. Clear Browser Cache and Verify

• In Chrome, press Ctrl+Shift+Delete (Windows) or Cmd+Shift+Delete (Mac), select “Cached images and files,” and clear data for “All time.”
• Reload your site and check for a secure padlock in the address bar.
• Revisit Developer Tools > Console to confirm no mixed content warnings remain.
• If errors persist, recheck database URLs, error logs, or contact your hosting provider for SSL issues.

Preventing Future Errors

• Use HTTPS URLs: Always set CMS or code to use HTTPS or relative URLs (e.g., /images/photo.jpg).
• Verify Plugins: Ensure plugins/themes load HTTPS resources; check URLs after any plugin/theme updates.
• Enable Auto-SSL: Use free SSL certificates (e.g., Let’s Encrypt) via your control panel’s SSL/TLS section.
• Run your WordPress Site on Autopilot: VeeroTech’s managed hosting includes auto SSL, auto WordPress updates (for core, themes, and plugins) supported by proactive monitoring and 24/7/365 human support to prevent issues. Start today or migrate for Free and get Free WordPress Performance Evaluation!

Conclusion

This guide makes fixing mixed content errors in Chrome straightforward. Your site will be secure and future-proof by updating URLs, forcing HTTPS, and configuring resources.

Want to run your site on autopilot? VeeroTech’s managed hosting, with 24/7/365 human support, proactive monitoring, and free migration services, ensures a seamless experience. Our managed WordPress hosting takes care of auto SSL, WordPress core, theme, and plugin updates to help you run your website effortlessly, allowing you to focus on your business.

Migrate to VeeroTech today with our Free Migration Service and Free WordPress Performance Evaluation Service!

Related Post

How to Install Let’s Encrypt SSL in cPanel