How to fix the SSL mixed content issue

Quick answer: Mixed content means an HTTPS page still loads some resources (images, scripts, styles) over plain http://, so the browser flags or blocks them. Fix it by serving every resource over HTTPS — update hard-coded URLs, or rewrite them site-wide in the database/templates.

Overview

After installing a certificate, the page itself is encrypted but its sub-resources may not be. Browsers block "active" mixed content (scripts, iframes) outright and mark the page as not fully secure for images. The cure is always the same: make internal URLs protocol-correct.

Before you start

• A working certificate (install one) and HTTPS reachable.
• Browser DevTools — the Console tab lists every blocked http:// URL, which is your to-do list.

Step-by-step guide

1. Open the site over https://, press F12 → Console, and note the “Mixed Content” warnings.
2. Fix the site URL in your application config so it generates https:// links (for WordPress: Settings → General, both URL fields).
3. Rewrite legacy URLs stored in content. For WordPress:

wp search-replace 'http://example.com' 'https://example.com' --skip-columns=guid

4. Prefer protocol-relative or root-relative paths (/images/logo.png) in templates so this cannot regress.
5. Add a safety net in the HTTP response headers while you clean up:

Content-Security-Policy: upgrade-insecure-requests

6. Reload with cache disabled and confirm the padlock is clean.

Common issues

• Third-party embeds without HTTPS: an external widget served only over HTTP cannot be fixed on your side — replace it.
• CDN or page-cache serving stale HTML: purge caches after the search-replace.
• Hard-coded URLs in theme/plugin files: grep the codebase for http://example.com remnants.

When to contact support

Mixed content is an application-level issue, but if you are unsure whether the padlock warning comes from content or from the certificate itself, open a ticket with the URL and we will point you at the culprit.

Frequently asked questions

What exactly is mixed content?

A page loaded over HTTPS that pulls some resources (scripts, styles, images) over plain HTTP. Browsers block or flag those requests, breaking the padlock and sometimes the page.

How do I find which resources cause the warning?

Open the page, press F12 and check the browser console — every blocked or insecure URL is listed there with its type, giving you an exact to-do list to fix.

Does upgrade-insecure-requests fully solve mixed content?

It is a good safety net: browsers rewrite http:// subresources to https:// automatically. But underlying URLs should still be fixed, since old browsers ignore the header.

Related articles

• How to redirect HTTP to HTTPS
• How to configure SSL for WordPress
• How to install a free SSL certificate

Ready to get started? Order a VPS at Cloud2Y →