How to fix mixed content warnings

This guide explains what mixed content is, how to identify the specific resources causing the warnings, and how to fix them — whether you are running a WordPress site, a custom-built application, or a static website on your HOSTDOG hosting.

What is mixed content

Mixed content occurs when a page loaded over HTTPS includes resources — such as images, CSS files, JavaScript, or fonts — that are still requested over HTTP. Browsers treat this as a security risk because the unencrypted resources could be intercepted or tampered with in transit.

There are two types of mixed content:

Passive mixed content: Resources like images, audio, and video loaded over HTTP. Browsers typically display a warning but still load the resource. The padlock icon may show a warning triangle.
Active mixed content: Resources like scripts, stylesheets, iframes, and AJAX requests loaded over HTTP. Browsers block these entirely because malicious code could compromise the page. This may cause broken functionality on your site.

How to identify mixed content

Before you can fix mixed content, you need to find out which resources are causing the problem. There are several ways to do this:

Method 1: Browser developer tools

Open your website in Chrome or Firefox, press F12 to open Developer Tools, and click the Console tab. Mixed content errors appear as yellow warnings or red errors with messages like:

Mixed Content: The page at 'https://yourdomain.com/' was loaded over HTTPS, but requested an insecure image 'http://yourdomain.com/images/logo.png'.

Each message tells you the exact URL of the offending resource.

Method 2: Online scanner

Tools like Why No Padlock or JitBit SSL Checker scan your page and list every resource loaded over HTTP. This is useful for checking multiple pages quickly.

Method 3: View page source

Right-click on your page, select View Page Source, and search for http://. Any references to http://yourdomain.com instead of https://yourdomain.com are potential mixed content sources.

Fix mixed content in WordPress

WordPress sites are the most common source of mixed content issues because URLs are stored in the database. Here is how to fix them:

Update WordPress and site URLs

In your WordPress admin panel, go to Settings → General. Make sure both WordPress Address (URL) and Site Address (URL) use https://. If they still show http://, update them and save.

Search and replace in the database

Many URLs are hard-coded in post content, widget text, and custom fields. Use a plugin like Better Search Replace to find all instances of http://yourdomain.com and replace them with https://yourdomain.com.

Important: Always back up your database before running a search-and-replace operation. A typo in the replacement string can break your entire site.

Check your theme and plugins

Some themes and plugins hard-code HTTP URLs in their settings or template files. Check your active theme's settings panel and update any URLs to HTTPS. If you find hard-coded HTTP links in theme files, edit them to use protocol-relative URLs (//yourdomain.com/image.png) or full HTTPS URLs.

Fix mixed content on non-WordPress sites

For custom-built or static websites, you need to update the source code directly:

HTML files: Search for http:// in all .html and .php files. Replace with https:// for your own domain, or use protocol-relative URLs (//) for external resources that support HTTPS.
CSS files: Check @import rules, url() references for background images, and font imports. Update all HTTP URLs to HTTPS.
JavaScript files: Search for any AJAX calls, API endpoints, or dynamically loaded resources that reference HTTP URLs.

Tip: You can add the following meta tag to your page's <head> section as a temporary catch-all while you fix individual resources:

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

This tells the browser to automatically upgrade HTTP requests to HTTPS. It is a useful safety net but should not replace fixing the actual URLs in your code.

Fix mixed content from external resources

Sometimes mixed content comes from third-party resources — CDN links, embedded videos, analytics scripts, or fonts. Here is how to handle these:

If the external resource supports HTTPS: Simply change http:// to https:// in the URL.
If it does not support HTTPS: Host the resource locally on your own server (for images, fonts, or scripts), or find an alternative provider that supports HTTPS.
Embedded content: YouTube, Google Maps, and most major services support HTTPS. Update embed codes to use https://.

Verify the fix

After making your changes, verify that mixed content warnings are gone:

Clear your browser cache (or use an incognito/private window)
Visit your website and check for the padlock icon in the address bar
Open Developer Tools (F12) and check the Console tab for any remaining mixed content warnings
Test multiple pages — mixed content may appear only on specific posts or pages where HTTP URLs were used

If you are using a WordPress caching plugin or a CDN, remember to purge the cache after making changes so the updated URLs are served to visitors.

Frequently asked questions

Is mixed content dangerous for my visitors?

Active mixed content (scripts, stylesheets) can be exploited by attackers to inject malicious code. Passive mixed content (images) is lower risk but still compromises the integrity of the encrypted connection. Fixing all mixed content ensures your visitors' data remains secure.

Does mixed content affect my SEO ranking?

Yes. Search engines prefer fully secure HTTPS pages. Mixed content warnings can prevent your site from being treated as fully secure, which may negatively affect your search rankings. Fixing mixed content is part of a complete HTTPS migration.

Can I fix mixed content with an .htaccess rule?

An .htaccess redirect forces visitors to HTTPS but does not fix mixed content within your page's code. If your HTML still references http:// resources, the browser will try to load them over HTTP and trigger warnings. You need to update the actual URLs in your code, database, or CMS settings.