Mixed content happens when a page loaded over HTTPS pulls in some resources, such as images, scripts, stylesheets, fonts or iframes, over plain HTTP. Browsers now upgrade insecure images, audio and video to HTTPS automatically and block almost everything else. Fix it by changing every resource URL to https:// or a relative path, then add upgrade-insecure-requests as a safety net.
The rest of this post explains why browsers block mixed content, how to find every instance on your site, and how to fix it in WordPress, page builders and hand-coded sites.
Key takeaways
- Mixed content happens when an HTTPS page loads images, scripts, stylesheets, fonts or iframes over plain HTTP.
- Find it in the browser console on several page types, as mixed content often sits in a single template.
- Change every resource URL to https or a root-relative path, then add upgrade-insecure-requests as a backstop.
- In WordPress, run a database search-and-replace with WP-CLI after a full backup, then clear every cache layer.
Why is mixed content a problem?
An HTTPS page promises visitors that what they see came from you, unaltered and unread. One insecure request breaks that promise. MDN puts it plainly: resources sent insecurely "can be viewed, possibly revealing sensitive information, and/or modified by an attacker". A script loaded over HTTP is the worst case, because whoever intercepts it can change anything on the page, including a checkout form.
That's why the practical symptoms are usually broken functionality rather than just a warning: a slider that doesn't move, a missing font, a blank embedded map, a contact form that won't submit.
What do browsers do with mixed content now?
Browsers split mixed content into two groups.
| Type | Examples | What the browser does |
|---|---|---|
| Upgradable | <img src>, CSS background-image, <audio>, <video>, <source> |
Rewrites the request to HTTPS. If the HTTPS version doesn't exist, it fails to load |
| Blockable | <script>, stylesheets, <iframe>, fetch()/XHR, web fonts, <object>, <img srcset> and <picture> |
Blocks the request outright |
Two details catch people out. First, images in srcset or <picture> count as blockable, so responsive images can vanish while a plain <img> works. Second, an upgradable request to a bare IP address (for example http://203.0.113.10/logo.png) is blocked rather than upgraded.
Browsers should also block "mixed downloads": files such as PDFs or ZIPs linked from an HTTPS page but served over HTTP.
How do I find mixed content on my site?
- Open the browser console. In Chrome or Edge press F12, choose Console, then reload the page. Each blocked or upgraded request appears as a "Mixed Content" message naming the page and the insecure URL.
- Scan more than one page. Mixed content often sits in a single template: the blog sidebar, a product page, the footer on old landing pages. Check your homepage, one of each page type, and your checkout or contact form.
- Use an automated check. Our free mixed content checker lists every insecure script, stylesheet, image and form on a page, shows which ones browsers block, and tests whether each file already works over HTTPS. MakeItFlow's free website security scan also flags mixed content as part of its HTTPS checks, and a full-site crawl on paid plans finds it across every page rather than just one.
- Search your code and database. Look for
http://in theme files, custom CSS, JavaScript and stored content.
How do I fix mixed content errors?
The fix is always the same in principle: make every resource load over HTTPS.
- Change your own URLs. For resources on your domain, use
https://or a root-relative path such as/images/logo.webp. Avoid protocol-relative//example.com/...; it works, but there's no reason to keep HTTP as an option. - Update third-party embeds. Replace old
http://widget, font and analytics snippets with the provider's current HTTPS code. Virtually every reputable service supports HTTPS. - Remove what can't be fixed. If a third party doesn't support HTTPS, host the file yourself, swap the provider, or drop it.
- Fix hard-coded CSS.
url(http://...)inside stylesheets, especially in@font-facerules, is a common hiding place. - Re-test in the console until there are no Mixed Content messages.
How do I fix mixed content in WordPress?
Most WordPress mixed content comes from old URLs stored in the database after a site moved to HTTPS.
- In Settings > General, confirm both WordPress Address and Site Address start with
https://. - Take a full backup.
- Run a search-and-replace across the database. With WP-CLI:
wp search-replace 'http://www.example.com' 'https://www.example.com' --skip-columns=guid --dry-run
Check the counts, then run it again without --dry-run. If you don't have shell access, a reputable search-and-replace plugin does the same job; deactivate it afterwards.
4. Check theme options, page builder settings and widget areas, which sometimes store URLs in serialised data that a naive SQL REPLACE would corrupt. WP-CLI handles serialisation safely.
5. Clear every cache layer: page cache plugin, host cache and CDN.
WordPress 5.7 and later already rewrites insecure links to your own domain as pages are displayed after you switch the site URLs to HTTPS, but it doesn't touch the database, links to other domains, or URLs in theme files. A permanent search-and-replace is cleaner. Our WordPress security checklist covers the other settings to review while you're there.
Should I use upgrade-insecure-requests?
Yes, as a backstop, not as the fix. This Content-Security-Policy directive tells browsers to upgrade every request on the page to HTTPS before sending it, including blockable ones:
Content-Security-Policy: upgrade-insecure-requests
In Apache:
Header always set Content-Security-Policy "upgrade-insecure-requests"
In Nginx:
add_header Content-Security-Policy "upgrade-insecure-requests" always;
If you already send a CSP, add the directive to the existing header rather than sending a second one. It won't help if the HTTPS version of a resource doesn't exist, so you still need to fix the URLs. Our Content-Security-Policy guide explains how to build a fuller policy, and the CSP generator gives you a starting point.
Does Cloudflare fix mixed content?
Partly. Cloudflare's Automatic HTTPS Rewrites (available on all plans) changes http:// links in your HTML to https:// when it can confirm the resource is available over HTTPS. It can't rewrite URLs that JavaScript or CSS requests at runtime, and Cloudflare's documentation notes some passive content may still slip through. Treat it as a helpful extra while you fix the source.
What to do next
Open the console on your five most important pages today and note every Mixed Content message. Fix your own URLs first, then embeds, then add upgrade-insecure-requests. When you're done, run a free website audit with MakeItFlow to confirm the HTTPS redirect, certificate and mixed content checks all pass.
Frequently asked questions
Does mixed content affect SEO?
Not directly as a ranking factor, but it can break page elements, stop scripts that render content, and make Chrome show a less secure connection state. Broken pages and lost trust affect conversions and engagement more than any ranking signal.
Why does my padlock disappear on only some pages?
Usually because those pages use a template, widget or embed that loads an HTTP resource. Open the console on the affected page to see exactly which URL is causing it.
Will a new SSL certificate fix mixed content?
No. The certificate secures the page itself. Mixed content is caused by URLs in your HTML, CSS or JavaScript that still point to http://, so they must be changed.
Are links to HTTP websites mixed content?
No. An ordinary <a href="http://..."> link to another site isn't mixed content, because nothing loads until the user clicks. Downloads served over HTTP from an HTTPS page are different, and browsers increasingly block them.
Can a plugin fix mixed content automatically?
Some plugins rewrite URLs on every page load. They work, but add processing to every request and hide the underlying problem. A one-off database search-and-replace is the better long-term fix.
Related reading
- Chrome 154 Turns On HTTPS by Default: What Websites Must Fix: Chrome 154 now asks users before loading any public HTTP page. What the warning means for your website, plus a technical SEO checklist to fix it fast.
- How to Audit a WordPress Website: A Step-by-Step Checklist: Audit a WordPress website by checking updates, plugins, security, speed, SEO and backups in order. A step-by-step checklist with Site Health and WP-CLI.
- How to Get a Free SSL Certificate: Let's Encrypt or Cloudflare: How to get a free SSL certificate in minutes with Let's Encrypt, cPanel AutoSSL or Cloudflare, and how to make sure it renews automatically every time.
- Common SSL Certificate Errors and How to Fix Each One: Fix expired certificates, name mismatches, incomplete chains and mixed content warnings with clear diagnosis steps and openssl, Nginx and Apache commands.
Sources
Written by the MakeItFlow team
We build the website audit these guides are based on. Every fact is checked against the primary sources listed above and this guide was last reviewed on 1 November 2026 . How we research and check
Check your own site in 30 seconds
Run a free audit covering speed, SEO, DNS, email authentication and security headers — and get a prioritised fix list.
