How to Fix a Mixed Content Warning on Your Website

What is a Mixed Content Warning?

A mixed content warning occurs when a website that is supposed to be loaded over a secure HTTPS connection contains resources—such as images, scripts, or stylesheets—that are still being loaded over an insecure HTTP connection. This can cause security issues and prevent a site from being fully secured. Browsers like Google Chrome, Mozilla Firefox, and Microsoft Edge display a mixed content warning to notify users of potential security risks.

Why Does a Mixed Content Warning Occur?

Even if your website has an SSL certificate installed, some elements might still be referenced using an HTTP URL. This often happens due to:

• Old links hardcoded in the website’s source code

• Content management system (CMS) settings not updated to HTTPS

• External resources (images, scripts, or stylesheets) not available over HTTPS

• Incorrect website configuration

To maintain security and prevent mixed content warnings, you should ensure all resources load over HTTPS.

How to Fix a Mixed Content Warning

Below are step-by-step instructions to resolve mixed content issues.

Step 1 - Check Your Website’s Configuration File

If the site’s URL is still set to HTTP, the website will try to load assets over an insecure connection.

How to Update the Configuration File:

1. Open your website’s configuration file (e.g., wp-config.php).

Look for entries similar to the following: define('WP_HOME', 'http://yourwebsite.com');

1. define('WP_SITEURL', 'http://yourwebsite.com');

Replace http:// with https://: define('WP_HOME', 'https://yourwebsite.com');

1. define('WP_SITEURL', 'https://yourwebsite.com');

2. Save the file and refresh your website to check if the warning disappears.

Step 2 - Check the Website’s Source Code

If the issue persists, check your source code for hardcoded HTTP links.

Steps to Find and Replace HTTP Links:

1. Open your browser's Developer Tools (press F12 or Ctrl + Shift + I in Chrome and Firefox).

2. Navigate to the Console tab and look for mixed content warnings.

3. Copy and search for the reported insecure URLs in your website’s source code.

4. Open the corresponding file in a text editor or file manager and replace http:// with https://.

5. Save the changes and refresh the website.

Step 3 - Use an Online Tool to Identify Mixed Content

A tool like Why No Padlock can help identify insecure resources.

1. Visit Why No Padlock.

2. Enter your website’s URL and scan for mixed content issues.

3. Check the results and fix the insecure links manually or update external resources to HTTPS versions.

Step 4 - Update Database URLs

If your site runs on WordPress or another CMS, mixed content may be caused by database entries.

Updating URLs in WordPress Database:

1. Install and activate the Better Search Replace plugin.

2. Run a search for http://yourwebsite.com and replace it with https://yourwebsite.com.

3. Apply changes and verify if the issue is resolved.

Alternatively, run the following SQL query in phpMyAdmin:

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

Step 5 - Force HTTPS with Nginx Configuration

For Nginx, add this directive to the configuration file:

add_header Content-Security-Policy "upgrade-insecure-requests";

Step 6 - Clear Cache and Test Your Website

After making these changes, clear your website cache to ensure the updates take effect:

• Clear browser cache.

• Clear website cache.

• If using Cloudflare or another CDN, purge its cache.

Test your website in an incognito/private browsing window to confirm the mixed content warning is resolved.

Conclusion

A mixed content warning is a sign that some elements of your website are being loaded over an insecure connection, even when an SSL certificate is active. By following these steps—checking configuration files, updating hardcoded HTTP links, scanning with online tools, forcing HTTPS via Nginx and clearing cache—you can resolve the issue and ensure your website is fully secure.

Taking these steps will not only improve website security but also enhance SEO rankings and user trust, ensuring a safe browsing experience for your visitors.