What is Mixed Content?

When HTTPS pages are only half secure

Migrating to HTTPS feels complete when the address bar shows a padlock—until devtools report mixed content. The main document loads over TLS, but embedded resources still call http://. Browsers treat that as a security regression: active mixed content is blocked; passive mixed content may load with degraded UI.

For SEO, mixed content is a silent rendering killer. A blocked stylesheet collapses layout logic; a blocked script strand SPAs on spinners. Crawlers may index incomplete DOM trees while marketers celebrate "we went SSL."

Active vs passive mixed content

Modern browsers err toward blocking anything that can change DOM semantics or exfiltrate data—exactly the assets SEO depends on.

How mixed content appears after HTTPS migrations

Classic sources:

1. Hard-coded http:// in CMS templates — Old HTML fragments in posts and widgets.
2. Third-party tags — Legacy ad, analytics, or heatmap scripts without TLS endpoints.
3. CDN misconfiguration — Origin serves HTTPS but asset URLs in DB stay HTTP.
4. Open Graph and JSON-LD — Social images still on insecure URLs (sharing previews break).
5. Canonical and hreflang mistakes — Less mixed content per se, but co-travel with scheme drift.
6. Server-generated redirects — Page is HTTPS while inline src attributes remain HTTP.

<!-- Active mixed content: script blocked -->
<script src="http://cdn.example.com/app.js"></script>

<!-- Passive mixed content: image may warn -->
<img src="http://images.example.com/hero.jpg" alt="Hero">

The upgrade-insecure-requests escape hatch

The Content-Security-Policy: upgrade-insecure-requests directive asks browsers to rewrite http:// subresource requests to https:// automatically. Helpful during migrations, but dangerous if the asset does not exist on HTTPS—requests fail silently or 404.

Better long-term fix: store and emit HTTPS URLs everywhere—sitemaps, RSS, email templates, and API payloads.

Mixed content and JavaScript rendering

Client bundles sometimes construct URLs at runtime:

const api = 'http://api.example.com/v1/products';
fetch(api).then(renderGrid);

The HTML fetch is HTTPS; the API call is active mixed content or blocked cross-scheme traffic. AJAX endpoints must match page scheme or use protocol-relative patterns deliberately (prefer explicit HTTPS).

Search bots executing JS hit the same blocks. Indexed product grids may empty while Lighthouse on a developer laptop (with permissive flags) looks fine.

Detection workflow

1. Crawl HTTPS URLs and collect subresource schemes.
2. Browser Console on top templates—filter "Mixed Content."
3. Lighthouse / PageSpeed security audits.
4. Content-Security-Policy-Report-Only to catch stragglers pre-enforcement.
5. Search Console URL Inspection rendered HTML—verify CSS/JS URLs are https://.

Log server log lines for HTTP asset hits after sitewide HTTPS—persistent 200s on HTTP objects mean crawlers and users still discover insecure URLs.

Fixing mixed content at scale

Validate on staging with the same CSP as production—ad blockers and corporate proxies behave differently, but scheme errors reproduce reliably.

Mixed content vs duplicate HTTP/HTTPS URLs

Related but distinct problems:

• Mixed content — One HTTPS document pulls HTTP subresources.
• Duplicate URLs — Both http:// and https:// document versions return 200.

Fix both during migrations. Canonical tags should point to HTTPS; subresources should never downgrade scheme.

Third-party and tag-manager debt

Marketing stacks accumulate HTTP-only pixels. Each one is a mixed-content candidate after TLS rollout. Governance:

• Inventory tags quarterly.
• Require HTTPS endpoints in procurement.
• Use server-side measurement where client pixels cannot upgrade.

SEO teams feel this when Core Web Vitals regress—blocked scripts delay hydration and inflate layout shift when fallback fonts/images differ.

Mixed content impact on trust and CTR

Even when indexing survives, users see "Not fully secure" indicators. YMYL sites (finance, health) suffer disproportionate CTR loss. HTTPS is a hygiene factor; mixed content signals incomplete execution of that hygiene.

Reporting mixed content to engineering

SEO teams should file tickets with:

• Exact page URL (HTTPS document)
• Blocked resource URL (HTTP subresource)
• Resource type (script, stylesheet, image)
• Whether devtools classifies it as active or passive
• Screenshot of Console error text

Generic "fix mixed content" requests stall. A CSV export from crawl tools with columns page_url, insecure_asset_url, asset_type clears backlog faster than Slack screenshots alone.

Regression testing after CMS upgrades

Major WordPress, Drupal, or headless CMS upgrades often reintroduce http:// in widget defaults. Add mixed-content checks to release QA—same gate as broken canonicals or accidental noindex on templates.

How Crawlox helps eliminate mixed content

Crawlox maps HTTPS pages alongside their referenced asset URLs during authorized crawls—flagging http:// hosts in HTML, linked CSS, and script src attributes before browsers block them in production. Treating mixed content as a crawl-graph defect catches CMS template debt faster than spot-checking individual URLs in devtools.