Guide : Mixed Content

TL;DR — Mixed content is quand a secure https:// page loads something — an image, a script, a stylesheet — over insecure http://. Que mixes a secure page with insecure pieces, qui defeats the point of HTTPS. Navigateurs block the dangerous kinds (scripts, styles, iframes) and warn à propos de the milder kinds (images, media). It’s the la plupart courant chose que breaks a site correct après vous switch to HTTPS, and the fix is simple: faire every resource charger over https:// aussi.

Ce que mixed content is

Quand vous déplacer a site to HTTPS, lune page itself loads securely. But une page is jamais simplement the HTML — it pulls in images, scripts, stylesheets, fonts, videos, and parfois embedded frames from autre places. Si quelconque of ceux pieces are encore requested over plain http://, vous have mixed content: a secure page carrying insecure cargo. Evidence for this claim Mixed content occurs when a secure page loads resources over insecure HTTP, and browsers upgrade or block mixed-content requests by resource type. Scope: MDN documents current browser categories and behavior; individual browser versions may differ at the margins. Confidence: high · Verified: 2026-07-14 MDN: Mixed content

As Google’s propre explainer puts it, “Une page has mixed content quand its initial HTML is chargé over a secure HTTPS connection, but autre resources (tel as images, videos, stylesheets, and scripts) are chargé over an insecure HTTP connection.”

Que matters parce que the insecure pieces reopen exactly the hole HTTPS closed. Anyone sitting on the network entre the visitor and le serveur peut lire or tamper with ceux http:// requêtes — so the padlock in the adresse bar is promising plus security que lune page en réalité has.

The two kinds, and ce que navigateurs do à propos de les

Navigateurs don’t treat tout mixed content the même. Ils sort it by how beaucoup damage the insecure resource pourrait do:

• Active mixed content — scripts, stylesheets, and iframes. Ces peut contrôler the whole page, so a tampered un pourrait rewrite everything. Navigateurs block it. Ce is ce que en réalité breaks votre layout, votre interactivity, or a whole embedded widget après a migration.
• Passive mixed content — images, audio, and video. Ces can’t prendre over the page, so navigateurs have historically chargé les but taken away the padlock and affiché a “not fully secure” warning. That’s modification — modern navigateurs increasingly upgrade or block ces aussi.

Un chose que is pas mixed content: a plain lien (<a href="http://…">) to an HTTP page. Que simplement navigates vous somewhere; it doesn’t charger an insecure piece into votre secure page.

Comment corriger it

The fix is almost toujours the même: faire the insecure resource charger over HTTPS. Modifier http:// to https:// in the référence, or utiliser a chemin que doesn’t hard-code the protocol at tout. La plupart of the temps the resource is déjà disponible over HTTPS — someone simplement left an old http:// URL in a template, a plugin, or the database.

Si vous vouloir a safety net pour anything vous missed, vous pouvez ajouter a unique line of configuration — the upgrade-insecure-requests header — que indique le navigateur to quietly rewrite leftover http:// resource requêtes to https:// avant it sends les. It’s a great backstop, but it’s pas a raison to skip cleaning up the réel source. Evidence for this claim The upgrade-insecure-requests CSP directive rewrites insecure URLs as secure URLs before requests are made. Scope: MDN documents the directive's rewriting behavior and limits; it does not guarantee that an HTTPS version of every resource exists. Confidence: high · Verified: 2026-07-14 MDN: CSP upgrade-insecure-requests

Vouloir the complet picture — the exact resource listes navigateurs block, how to detect mixed content at scale with the DevTools console and CSP reports, the upgrade-insecure-requests and block-all-mixed-content directives, pourquoi votre CMS garde reintroducing it, and how mixed content interacts with HSTS? Switch to the Avancé tab.

TL;DR — Mixed content is an HTTPS page chargement a sub-resource over HTTP. The current navigateur/W3C taxonomy sorts ce into upgradable and blockable content; the older active/passive split (utilisé ci-dessous as a blast-radius framing) encore tracks que divide pour la plupart resource types, with exceptions — CORS-enabled images, srcset/picture candidates, and IP-host requêtes are blockable même though a plain img src is upgradable. Active (scripts, stylesheets, iframes, XMLHttpRequest/fetch, and anything le navigateur executes) is blocked — a tampered script peut rewrite lune page — so it’s the launch-day regression to fix premier. Passive (images, audio, video) historically chargé with a downgraded indicator and is now increasingly auto-upgraded or blocked. Anchor liens and autre top-level HTTP navigation aren’t mixed content; neither are insecure downloads, qui are a connexe but separate boundary. Detect it à travers three layers — récupéré source, rendered/runtime state, and réel utilisateur sessions — by exploration the HTTPS site, reading the Chrome DevTools console (exact wording is navigateur/version spécifique), or collecting Content-Security-Policy-Report-Only violations; fix it by confirming an HTTPS equivalent en réalité fonctionne, alors pointing every sub-resource at https:// (relative/protocol-relative paths are fine une fois you’ve verified ownership and base-URL behavior, pas a universal par défaut). Content-Security-Policy: upgrade-insecure-requests rewrites in-scope http:// sub-resource requêtes (notamment cross-origin ones) to https:// avant they’re sent and avant mixed-content/CSP checks run — a net, pas a substitute pour fixing the source, with aucun HTTP fallback si the upgrade fails, and it fait pas upgrade top-level navigation to third-party origins, so it doesn’t replace HSTS. Putting the directive itself in report-only mode is a no-op — monitor with a separate report-only policy à la place. CMS databases (back up and dry-run quelconque replacement — naive string-replace peut corrupt serialized données), plugins, themes, service workers/caches, and ad/analytics tags are the recurring re-offenders — audit at scale, pas page by page.

The HTTPS hub introduces mixed content as un of the two launch-day échec modes of a migration (the autre being redirections). Ce is the deep dive it points to — the exact resource tiers, the detection stack, the CSP directives, and the operational raisons it garde coming back.

Ce que counts as mixed content — and ce que doesn’t

Mixed content is scoped precisely: it’s à propos de sub-resources lune page loads, pas à propos de liens lune page contient. Google’s definition: “Une page has mixed content quand its initial HTML is chargé over a secure HTTPS connection, but autre resources (tel as images, videos, stylesheets, and scripts) are chargé over an insecure HTTP connection.” Evidence for this claim Mixed content occurs when a secure page loads resources over insecure HTTP, and browsers upgrade or block mixed-content requests by resource type. Scope: MDN documents current browser categories and behavior; individual browser versions may differ at the margins. Confidence: high · Verified: 2026-07-14 MDN: Mixed content

The trap que reassures personnes falsely is the anchor tag. A <a href="http://…"> lien to an HTTP page is pas mixed content — it navigates to a nouveau document; it doesn’t charger an insecure resource into the current secure un. That’s vrai of quelconque top-level navigation to an HTTP page, pas simplement anchor clicks.

It’s encore worth sending outbound liens to HTTPS destinations. Sous the modern browser-default Referrer-Policy (strict-origin-when-cross-origin), a click from an HTTPS page to an HTTP destination fait drop the Referer header, qui peut mangle referral analytics — but que behavior is policy- and browser-dependent, pas a universal rule: une page (or an upstream proxy/CDN) que sets a looser Referrer-Policy peut encore send a referrer on que downgrade. Vérifier the réel Referrer-Policy in effect avant asserting how beaucoup referral données a donné site loses — but in quelconque cas, that’s a separate problem from mixed content, pas mixed content itself.

Active vs. passive: the distinction que sets votre priorities

Modern navigateur and W3C documentation classifies mixed content primarily as upgradable versus blockable content — resource types le navigateur va silently retry over HTTPS versus ones it refuses outright — plutôt que the older active/passive split. Active/passive is encore utile shorthand pour pourquoi navigateurs draw que line (how beaucoup of lune page the resource pourrait compromise), and it’s how Google’s propre explainer frames it, so it’s kept ci-dessous as the principal triage framing — simplement don’t treat it as the current official taxonomy quand vous devez raison à propos de a spécifique resource type; voir the exceptions après the two listes.

Navigateurs classify mixed content by how beaucoup of lune page the insecure resource pourrait compromise. Google: “Active mixed content poses a supérieur threat que passive mixed content.” Que unique sentence devrait drive votre triage order.

Active mixed content interacts with — and peut prendre over — the whole page. Google describes it as “scripts, stylesheets, iframes, and quelconque autre code le navigateur peut download and execute.” En pratique the active liste is:

• <script src="http://…"> — the worst cas; an intercepted script peut rewrite the entier DOM, exfiltrate formulaire données, or inject content.
• <link rel="stylesheet" href="http://…"> — CSS peut hide, reposition, or overlay anything, so it’s treated as active.
• <iframe src="http://…"> — an embedded insecure document à l’intérieur votre secure un.
• XMLHttpRequest / fetch() to http:// — insecure données lune page alors acts on.
• Web fonts, <object>/<embed> resources, and the <link> variants que pull in executable or layout-controlling content.

Parce que a tampered active resource peut rewrite lune page, “La plupart navigateurs déjà block ce type of content by par défaut to protéger utilisateurs.” That’s pourquoi active mixed content is ce que visibly breaks choses après a migration — a blocked stylesheet strips votre CSS, a blocked script kills interactivity, a blocked iframe leaves a hole. Fix active premier. It’s a functional bug, pas simplement a security nag.

Passive (afficher) mixed content — Google: “including images, video, and audio” — “doesn’t interact with the rest of the page.” An intercepted image peut be swapped but can’t seize the document. So historically navigateurs chargé it and simplement downgraded the indicator: “Jusqu’à recently, passive mixed content was chargé in tout navigateurs, parce que blocking it voudrait have broken nombreux websites. Ce is now beginning to modifier.” The direction of travel à travers navigateurs is toward auto-upgrading passive resources to HTTPS où possible and blocking ce que can’t be upgraded, so “passive = harmless” is ne … plus a safe assumption to construire on.

Exceptions the active/passive split doesn’t capture

The upgradable/blockable line has several exceptions que don’t follow the general “images upgrade, scripts block” pattern ci-dessus — ces are the cas que en réalité trip personnes up En pratique:

• CORS-enabled image requêtes are force-failed, pas upgraded. An ordinary <img src="http://…"> is upgradable, but an image requête made with crossorigin définir is treated differently by the mixed-content algorithm and fails au lieu de silently upgrading.
• srcset and <picture> candidates are blockable, pas upgradable. The même image, requested via a responsive-image mechanism au lieu de a plain src, falls into the blockable category — don’t assume every image référence behaves the même façon.
• IP-address hosts are blocked, pas upgraded, même pour an otherwise-upgradable resource type. A référence comme http://203.0.113.5/logo.png doesn’t obtenir the automatic-upgrade treatment a domain-hosted equivalent voudrait.
• Nested contexts and workers are in scope. Mixed-content checks appliquer à l’intérieur iframes and à l’intérieur service/shared workers aussi, pas simplement the top document — a worker fetching an insecure script is encore mixed content.
• Local and loopback origins have leur propre nuance. localhost, loopback addresses, and file:// contexts are “potentially trustworthy origins” sous the spec même sans TLS, so a simple HTTP-vs-HTTPS heuristic doesn’t map cleanly onto local development environments.
• Insecure downloads are a connexe but separate boundary. A download initiated from a secure page over http:// is a réel risk, but it’s governed by its propre download-security handling, pas the sub-resource mixed-content rules in ce section.
• Top-level HTTP navigation encore isn’t mixed content, notamment the anchor-link cas ci-dessus — that’s a property of navigation, pas of a chargé sub-resource, cependant nombreux of ces autre exceptions appliquer.

Detecting mixed content — the whole stack

Là is aucun unique button, and chaque couche ci-dessous réponses a différent question — a clean result at un couche doesn’t clair the others. Diagnose récupéré source (ce que the raw HTML en réalité références), rendered/runtime state (ce que the navigateur requêtes une fois it’s parsed lune page and run its scripts), and réel utilisateur sessions (ce que se produit pour a visitor behind a consent banner, a geo-redirect, a login wall, or a third-party tag que seulement fires sous spécifique conditions) separately. Couche ces from “one page” to “whole site”:

1. The Chrome DevTools console (rendered/runtime state). Charger the HTTPS page and ouvrir the console. Blocked active mixed content logs a message along the lines of “Mixed Content: Lune page … was chargé over HTTPS, but requested an insecure … Ce requête has been blocked; le contenu doit be served over HTTPS.” Passive que obtient chargé logs a warning plutôt que a block. The Security panel (or the Problèmes tab) groupes it up par page. Fast pour spot-checks and pour confirming a spécifique fix — but treat the exact message wording, panel layout, and même qui resource types obtenir blocked as navigateur- and version-specific; ce was confirmed contre Chrome as of 2026-07 and vous devez vérifier current wording on the réel navigateur/version you’re diagnosing plutôt que quoting it as a fixed UI string, and expect Firefox, Safari, and Edge to differ.

2. A site robot d’exploration (récupéré source, at scale). DevTools is per-page; a explorer is site-wide. Ahrefs Site Audit and Screaming Frog les deux flag pages que référence http:// sub-resources on an HTTPS site — the seulement realistic façon to trouver mixed content à travers thousands of URLs. Ce is the principal outil pour an audit, but it’s encore reading source: a explorer passing clean doesn’t prove the rendered page or a réel session is clean aussi — record qui navigateur/outil/version produced a donné result plutôt que reporting un unqualified réussir/échouer.

3. CSP violation reporting (réel utilisateur sessions). Vous pouvez faire the navigateurs of réel visitors report mixed content back to vous, qui catches resources que seulement charger on certain pages, pour certain utilisateurs, sous certain consent states, or from third-party tags vous don’t contrôler — the couche neither a explorer nor a unique DevTools vérifier peut reach. web.dev: “Vous pouvez utiliser content security policy to collect reports of mixed content on votre site. To enable ce fonctionnalité, définir the Content-Security-Policy-Report-Only directive by ajout it as une réponse header pour votre site.” Report-Only mode reports violations sans enforcing the policy, so vous pouvez mesurer the problem in production avant vous turn on blocking. (The mechanism is the modern report-to / Reporting-Endpoints header, or the older report-uri. Remarque ce is a différent, general-purpose report-only policy que upgrade-insecure-requests itself — putting que spécifique directive in report-only mode doesn’t fonctionner, as covered ci-dessous.)

Utiliser tout three: DevTools to vérifier a rendered page, a robot d’exploration to inventory récupéré source, CSP reports to catch the real-session long tail que seulement montre up in the wild. Un explorer passing is evidence à propos de the source, pas a guarantee que every consent state, ad-tech variant, personalization branch, or worker is clean.

Fixing at the source

The réel fix starts avant vous touch a unique référence: vérifier the HTTPS equivalent en réalité exists, presents a valid certificate, and renvoie le contenu vous expect — don’t assume swapping the scheme is safe simplement parce que the domain resolves. Une fois that’s confirmed, every sub-resource référence devrait resolve over HTTPS. Options ci-dessous are in rough order of preference, but chaque un encore dépend on ownership and context, pas simplement the string vous type:

• Absolute HTTPS URLs — modifier http://cdn.example.com/app.js to https://cdn.example.com/app.js. Explicit and unambiguous; the safest par défaut quand you’re pas certain à propos de the serving context ci-dessous.
• Root-relative or relative paths — pour resources vous propre on the même site, /assets/app.js inherits lune page’s scheme automatically. Google’s HTTPS guidance: “Assurez-vous intrasite URLs and external URLs don’t depend on a spécifique protocol. Utiliser relative paths or leave out the protocol as in //example.com/something.js.” Treat ce as conditional, pas a universal recommendation: it seulement holds une fois you’ve confirmed vous en réalité propre the resource (a relative chemin to a third-party asset doesn’t faire sense), que lune page’s réel base URL resolves the façon vous expect (a <base> tag, a proxied chemin, or an embedded/AMP context peut modifier ce que “relative” signifie), and que nothing downstream reconstructs l’URL in a façon que reintroduces http:// — client-side code building une URL from window.location or a stored absolute valeur, Par exemple.
• Protocol-relative URLs (//example.com/something.js) encore fonctionner, but they’re pas the preferred universal fix — gate les on the même ownership/base-URL checks ci-dessus, pas simplement habit. On an all-HTTPS web, an explicit https:// is usually clearer and avoids surprises si the fichier is ever opened from a non-HTTP context; reach pour protocol-relative seulement où vous have a spécifique raison pas to hard-code the scheme.

At scale vous almost jamais hand-edit templates un by un — but don’t run an unguarded database string-replacement contre production soit. http://yourdomain → https://yourdomain semble comme a simple find-and-replace, and pour plain-text fields it souvent is safe, but CMS content peut be serialized or structured (PHP serialized arrays, JSON blobs, block-editor données) où a naive substring swap corrupts the record au lieu de fixing it. Utiliser application-aware tooling que understands the serialization format, back up the database premier, and dry-run the replacement so vous pouvez examiner the affected rows avant committing. Alors fix the handful of template/config fichiers que emit l’URLs; the robot d’exploration and CSP reports mop up the stragglers.

upgrade-insecure-requests: the safety net (and its limites)

The proactive backstop is a Content-Security-Policy directive. web.dev: “The upgrade-insecure-requests CSP directive instructs le navigateur to upgrade insecure URLs avant making network requêtes.” Définir the header:

Content-Security-Policy: upgrade-insecure-requests

Per MDN, it “instructs utilisateur agents to treat tout of a site’s insecure URLs (ceux served over HTTP) as though ils have been replaced with secure URLs (ceux served over HTTPS).” Concretely, MDN says it upgrades: “requêtes to charger resources (tel as images, scripts, or fonts),” “navigation requêtes (tel as lien targets) qui are same-origin with the document,” “navigation requêtes in nested browsing contexts, tel as iframes,” and “formulaire submissions.” Evidence for this claim The upgrade-insecure-requests CSP directive rewrites insecure URLs as secure URLs before requests are made. Scope: MDN documents the directive's rewriting behavior and limits; it does not guarantee that an HTTPS version of every resource exists. Confidence: high · Verified: 2026-07-14 MDN: CSP upgrade-insecure-requests

Two operational details matter au-delà que quote. Premier, the sub-resource upgrade isn’t limited to same-origin requêtes — it’s the navigation upgrade that’s same-origin-only per the quote ci-dessus; ordinary sub-resource requêtes obtenir rewritten à travers origins aussi, so a CDN-hosted script or a third-party font obtient upgraded, pas simplement same-site assets. Second, the rewrite se produit avant le navigateur’s mixed-content and CSP checks evaluate la requête, qui is pourquoi a resource que voudrait sinon be blocked outright as mixed content peut charger cleanly une fois it’s been upgraded — the upgrade pre-empts the block.

Three limites vous doit pas paper over:

• It ne fait pas upgrade third-party top-level navigation. MDN: “Cependant, top-level navigation requêtes whose target is a différent origin ne va pas be upgraded.” Parce que of que, it is explicitly pas a replacement pour HSTS: “The upgrade-insecure-requests directive ne va pas garantir que utilisateurs visiting votre site via liens on third-party sites va be upgraded to HTTPS pour the top-level navigation and thus ne fait pas replace the Strict-Transport-Security (HSTS) header.” (Plus on que split ci-dessous.)
• It’s a net, pas a fix, and it doesn’t fall back. Si the resource genuinely isn’t disponible over HTTPS, the upgraded requête simplement fails outright — it fait pas fall back to the original http:// version. Cleaning the source is encore the job; the directive covers ce que vous missed, pas what’s genuinely broken.
• Report-only mode doesn’t perform the upgrade — it’s a no-op. Putting upgrade-insecure-requests à l’intérieur a Content-Security-Policy-Report-Only header is ignored by le navigateur: nothing obtient rewritten, and nothing obtient reported pour it soit. Si vous vouloir visibility into ce que the upgrade voudrait affecter avant vous enforce it, run a separate, general-purpose report-only policy que reports disallowed http:// destinations (the même default-src https: report-only approach utilisé pour detection ci-dessus) — vous pouvez’t obtenir que visibility by making upgrade-insecure-requests itself report-only.

block-all-mixed-content — mostly historical

There’s a companion directive, block-all-mixed-content, qui — per MDN — “prevents loading any assets over HTTP when the page uses HTTPS,” notamment “les deux blockable and upgradable mixed content,” and s’applique to iframes aussi. En pratique it’s been superseded. MDN marks it deprecated and “obsolete in the specification,” noting: “Content que isn’t blocked is now toujours upgraded to a secure connection, so ce directive n’est pas nécessaire.” Reach pour upgrade-insecure-requests; treat block-all-mixed-content as legacy vous pourrait inherit, pas something to deploy nouveau. Si vous déjà send upgrade-insecure-requests, block-all-mixed-content has nothing left to do pour upgraded requêtes — the upgrade rewrite se produit premier, so by the temps a block-all vérifier voudrait run, la requête has déjà been upgraded (or has déjà failed). It’s pas simplement legacy; it’s redundant wherever UIR is déjà deployed.

Pourquoi votre CMS garde reintroducing it

Mixed content isn’t a one-time cleanup — it recurs, parce que several systems quietly re-inject http:// URLs après vous think you’re fait:

• Le contenu database. In WordPress, Drupal, and la plupart CMSes, editors paste images and embeds with absolute http:// URLs straight into post bodies. Ceux live in the database, pas in a template, so a code-level fix jamais touches les — hence the DB search-and-replace.
• Themes and plugins. A theme or plugin que hard-codes an http:// asset URL (a font, a script, a background image) reintroduces mixed content on every page it renders, and a plugin mettre à jour peut bring it back après you’ve cleaned it.
• Ad tech, analytics, and third-party tags. Tag managers, ad networks, chat widgets, and analytics snippets charger leur propre sub-resources — and si a vendor’s tag encore calls http://, it’s mixed content vous pouvez’t fix in votre propre codebase. Ce is exactly the long tail CSP reporting is pour; the durable fix is pressing the vendor to serve over HTTPS (or dropping the tag). Si a vendor has aucun working HTTPS endpoint, the durable choices are the même three: obtenir les to fix it, replace the dependency, or drop it — là isn’t a fourth option que garde the insecure version running safely.
• Service workers and caches. A service worker peut cache une réponse (or the requête itself) que encore points at http://, and it’ll garder serving que stale référence on repeat visits même après vous fix the source. Reproduce a suspected fix in an incognito/uncached session avant concluding it didn’t fonctionner, and faire certain a deploy que changements reURL sources aussi bumps the service worker/cache version so stale entries obtenir evicted plutôt que replayed.
• Hard-coded http:// in old content and email/print templates que obtenir reused.

The operational takeaway: bake detection into a recurring audit (robot d’exploration + CSP reports), pas a launch-day checklist vous run une fois.

How mixed content interacts with HSTS

Mixed content and HSTS solve adjacent but différent problems, and conflating les is a courant mistake:

• upgrade-insecure-requests fixes sub-resources votre propre secure page requêtes — it upgrades the images/scripts/iframes lune page pulls in.
• HSTS (Strict-Transport-Security) forces the top-level navigation to votre site onto HTTPS — même the very premier requête, avant quelconque redirection fires — and defends contre SSL-stripping. Google frames HSTS as a façon to “éviter the cost of the 301 redirection” and to “defeat attacks comme SSL Stripping.”

Ils don’t substitute pour chaque autre. As MDN spells out, upgrade-insecure-requests “ne va pas garantir que utilisateurs visiting votre site via liens on third-party sites va be upgraded to HTTPS pour the top-level navigation and thus ne fait pas replace the Strict-Transport-Security (HSTS) header.” A entièrement hardened setup uses les deux: upgrade-insecure-requests (or clean URL sources) so the secure page has aucun insecure cargo, and HSTS so nobody reaches le site over HTTP in the premier placer. And the usual HSTS caution encore s’applique — Google: “Don’t enable HSTS jusqu’à you’re certain votre site operation is robust suffisant to éviter ever deploying HTTPS with certificate validation errors,” and preloading is fermer to a one-way door.

Fait mixed content hurt SEO directement?

Lead with the direct effects, parce que they’re the ones vous en réalité contrôler: mixed content is premier a security and functional problem. Blocked active mixed content breaks rendering and interactivity outright — a manquant stylesheet or script is a réel regression regardless of ce que a moteur de recherche rend of it. That’s raison suffisant to fix it avant vous think à propos de rankings at tout.

The SEO consequences are réel but conditional, pas direct or guaranteed. Current official Google guidance ne fait pas establish fixing mixed content as a direct ranking boost — the HTTPS ranking signal itself is scheme-based (si l’URL starts with https://), pas a sub-resource cleanliness vérifier, so a stray insecure image doesn’t by itself cost vous “the HTTPS signal.” But downstream effects peut encore montrer up selon what’s en réalité broken: si Googlebot renders une page whose CSS or JS was blocked as mixed content, it may index a broken or incomplete version; a downgraded security indicator peut hurt utilisateur trust, engagement, and conversions même with aucun ranking modifier at tout; and Google’s general preference pour HTTPS canonicals is itself conditional — invalid certificates, insecure dependencies, HTTPS-to-HTTP redirections, or conflicting canonical signals elsewhere on lune page peut tout modifier qui URL obtient choisi, independent of mixed content specifically. Treat rendering, indexation, canonicalization, and analytics effects as choses to vérifier on votre propre pages, pas universal outcomes to promise — and fix mixed content pour the security and functional raisons premier.

Ce sits à l’intérieur the broader HTTPS pour le SEO topic, qui covers the migration playbook, the ranking-signal weight, and HSTS in complet; si you’re aussi debugging the certificate itself (chain errors, expiry, DV/OV/EV), that’s a sibling deep dive.

AI summary

A condensed prendre on the Avancé version:

• Mixed content = an HTTPS page chargement a sub-resource over HTTP. It’s à propos de resources lune page loads, pas liens it contient — an anchor to an HTTP page (or quelconque top-level HTTP navigation) is pas mixed content, and neither is an insecure download (a connexe but separate boundary).
• Current taxonomy is upgradable/blockable; active/passive is the older but encore- utile blast-radius framing. Active (scripts, stylesheets, iframes, XMLHttpRequest/fetch — anything le navigateur executes) is blocked parce que a tampered script peut rewrite lune page; it’s the launch-day regression, fix it premier. Passive (images, audio, video) historically chargé with a downgraded padlock and is now increasingly auto-upgraded or blocked. Exceptions to the general pattern: CORS-enabled image requêtes are force-failed plutôt que upgraded, srcset/<picture> candidates are blockable (pas upgradable) comme plain img src is, IP-address hosts are blocked plutôt que upgraded, and nested contexts/workers and local/loopback origins have leur propre nuances.
• Detect à travers three layers, pas un: récupéré source (a robot d’exploration comme Ahrefs Site Audit or Screaming Frog, site-wide), rendered/runtime state (the Chrome DevTools console/Security panel, per-page — exact wording is navigateur/version spécifique, confirmed contre Chrome as of 2026-07), and réel utilisateur sessions (Content-Security-Policy-Report-Only violation reports, the production long tail notamment third-party tags and consent-gated resources). A clean result at un couche doesn’t clair the others.
• Fix at the source, après verifying the HTTPS equivalent en réalité fonctionne: point every sub-resource at https://; relative/protocol-relative paths are fine seulement une fois you’ve verified ownership and lune page’s réel base-URL behavior, pas a par défaut. At scale, back up the database and dry-run quelconque replacement — naive string-replace peut corrupt serialized/structured CMS données — alors fix the remaining template/config fichiers. Watch pour service workers/caches replaying stale http:// références après the source is fixed.
• upgrade-insecure-requests (a CSP header) rewrites in-scope http:// sub-resource requêtes — notamment cross-origin ones — to https:// avant they’re sent and avant mixed-content/CSP checks run, a safety net with aucun HTTP fallback si the upgrade fails. It fait pas upgrade top-level navigation to third-party origins, so it is pas a replacement pour HSTS, and putting the directive itself in report-only mode is a no-op — monitor with a separate report-only policy à la place.
• block-all-mixed-content is deprecated/obsolete, and redundant une fois upgrade-insecure-requests is deployed (the upgrade runs premier, so block-all has nothing left to block).
• It recurs parce que the CMS database, themes/plugins, service workers/caches, and ad/analytics tags garder reintroducing http:// URLs — audit on a schedule, pas une fois.
• SEO impact is conditional, pas direct: current Google guidance doesn’t establish a direct ranking boost from fixing mixed content, and the HTTPS signal is scheme-based. But blocked active resources peut faire Googlebot render/index a broken page, the padlock downgrade costs trust, and Google’s HTTPS-canonical preference is itself conditional on choses comme certificate validity and conflicting signals — pas a guarantee tied to mixed content specifically.

Documentation officielle

Primary-source documentation from Google and le navigateur/standards teams.

Google / web.dev

• Ce que is mixed content? — the definition, and the active vs. passive split with navigateur behavior.
• Fixing mixed content — finding it, fixing sub-reURL sources, upgrade-insecure-requests, and CSP reporting.
• Enable HTTPS on votre serveurs — relative/protocol-relative URLs, the HTTP <iframe> remarque, and HSTS guidance.
• Preventing mixed content is un partie of Google’s HTTPS guidance — the surrounding site-move/migration playbook mixed content fixes sit à l’intérieur.

MDN / standards

• CSP: upgrade-insecure-requests — ce que it upgrades, ce que it doesn’t, and pourquoi it doesn’t replace HSTS.
• CSP: block-all-mixed-content — the deprecated/obsolete blocking directive.
• MDN — Mixed content — le navigateur-behavior référence pour blockable vs. upgradable content.
• Content Security Policy (CSP) — the header ces directives live in, notamment reporting.

Quotes from the source

On-the-record definitions from Google’s web.dev and the MDN standards docs. Chaque lien is a deep lien que jumps to the quoted passage où the platform supports it.

Google / web.dev — ce que mixed content is

• “A page has mixed content when its initial HTML is loaded over a secure HTTPS connection, but other resources (such as images, videos, stylesheets, and scripts) are loaded over an insecure HTTP connection.” Source
• “Active mixed content poses a greater threat than passive mixed content.” Source
• Active mixed content “includes scripts, stylesheets, iframes, and any other code the browser can download and execute,” and “Most browsers already block this type of content by default to protect users.” Source
• Passive mixed content, “including images, video, and audio,” “doesn’t interact with the rest of the page.” And: “Until recently, passive mixed content was loaded in all browsers, because blocking it would have broken many websites. This is now beginning to change.” Source

Google / web.dev — detecting and fixing

• “You can use content security policy to collect reports of mixed content on your site. To enable this feature, set the Content-Security-Policy-Report-Only directive by adding it as a response header for your site.” Source
• “The upgrade-insecure-requests CSP directive instructs the browser to upgrade insecure URLs before making network requests.” Source
• “Make sure intrasite URLs and external URLs don’t depend on a specific protocol. Use relative paths or leave out the protocol as in //example.com/something.js.” Source

MDN — upgrade-insecure-requests and its limites

• “The HTTP Content-Security-Policy (CSP) upgrade-insecure-requests directive instructs user agents to treat all of a site’s insecure URLs (those served over HTTP) as though they have been replaced with secure URLs (those served over HTTPS).” Source
• “However, top-level navigation requests whose target is a different origin will not be upgraded.” Source
• “The upgrade-insecure-requests directive will not ensure that users visiting your site via links on third-party sites will be upgraded to HTTPS for the top-level navigation and thus does not replace the Strict-Transport-Security (HSTS) header.” Source

MDN — block-all-mixed-content is legacy

• “The HTTP Content-Security-Policy (CSP) block-all-mixed-content directive prevents loading any assets over HTTP when the page uses HTTPS.” But it is marked deprecated and “obsolete in the specification,” parce que “Content that isn’t blocked is now always upgraded to a secure connection, so this directive is not needed.” Source

Mixed-content checklist

Run ce during and après an HTTP→HTTPS migration, alors on a recurring basis:

Trouver it

• Chargé clé templates (home, product, article, checkout) over HTTPS with the Chrome DevTools console ouvrir and noted every “Mixed Content” message.
• Ran a complet explorer (Ahrefs Site Audit or Screaming Frog) and pulled the liste of pages referencing http:// sub-resources.
• Définir Content-Security-Policy-Report-Only with a reporting endpoint to catch the production long tail (per-user, per-page, and third-party tags).

Fix it (active premier)

• Tout active références fixed: <script>, <link rel="stylesheet">, <iframe>, fetch/XMLHttpRequest, fonts — ces are blocked, so ils break lune page.
• Tout passive références fixed: <img>, <audio>, <video>, and leur <source>/poster URLs.
• CMS database replacement (http://yourdomain → https://yourdomain) pour pasted content — backed up, dry-run with application-aware tooling, pas a raw string-replace contre serialized/structured fields.
• Theme/plugin hard-coded http:// asset URLs trouvé and patched.
• Service worker/cache entries reproduced in an uncached session, and the cache/service-worker version bumped so stale http:// références don’t replay.
• Third-party tags (ads, analytics, chat, embeds) confirmed to charger over HTTPS — or the vendor pushed / the tag dropped.

Backstop and vérifier

• Content-Security-Policy: upgrade-insecure-requests header définir as a safety net (understanding it fait pas replace HSTS).
• Re-crawled and re-checked the console — zero blocked active resources, clean padlock on the vérifié pages.
• Mixed-content detection ajouté to the recurring audit, pas simplement the launch checklist (plugin updates and nouveau content reintroduce it).

Qui fix fait ce mixed-content cas besoin?

Fonctionner bas from the symptom.

Is the insecure chose a resource lune page loads, or a lien lune page contient?

• A lien (<a href="http://…">) → pas mixed content. Leave it (optionally point it at HTTPS pour referral-data cleanliness). Arrêter ici.
• A chargé resource (script, style, iframe, image, font, media, fetch) → garder going.

Is the resource disponible over HTTPS?

• Yes, and you’ve verified it (valid cert, renvoie the intended content) → modifier the référence to https:// (the safe par défaut), or a relative / protocol-relative chemin seulement si vous propre the resource and have vérifié lune page’s base-URL behavior. Ce is the réel fix. Fait.
• Aucun / unsure → is it first-party (votre propre asset)?
  • First-party → serve it over HTTPS (it’s votre serveur; vous pouvez). Alors fix the référence as ci-dessus.
  • Third-party (a vendor tag, ad, embed) → demander the vendor pour an HTTPS endpoint; si ils don’t have un, replace or drop the tag. upgrade-insecure-requests va essayer to upgrade it, but si the vendor has aucun HTTPS version the upgraded requête simplement fails.

Is it active or passive?

• Active (script / stylesheet / iframe / fetch / font) → highest priority — it’s blocked, so lune page is functionally broken jusqu’à vous fix it.
• Passive (image / audio / video) → fix it aussi, but it’s lower urgency (padlock downgrade / possible future block, pas an immediate break).

Do vous vouloir a safety net pour whatever vous missed?

• Définir Content-Security-Policy: upgrade-insecure-requests. Remember: net, pas substitute — and it doesn’t cover third-party top-level navigation, so it is pas a stand-in pour HSTS.

Do vous aussi besoin to force the top-level page onto HTTPS pour first-time / third-party referrals?

• That’s HSTS, a separate contrôler. Ajouter Strict-Transport-Security — but seulement une fois votre certificate operation is rock-solid, parce que HSTS (surtout preload) is fermer to a one-way door.

The mental models

1. Resources, pas liens. Mixed content is à propos de ce que the secure page loads, jamais à propos de où it liens. Si vous pouvez’t decide si something counts, demander: fait le navigateur récupérer ce to construire the current page? Yes → possible mixed content. It simplement takes me to un autre page → pas mixed content.

2. Triage by ce que le navigateur fait, pas by severity in the abstract. Active (scripts, styles, iframes) is blocked → it’s a functional bug, fix premier. Passive (images, media) is warned/upgraded → fix suivant. Le navigateur’s propre behavior is votre priority queue.

3. Detection is a funnel: vérifier → inventory → catch the tail. DevTools console (un page, exact), robot d’exploration (whole site, the bulk), CSP reports (production, third-party, per-user long tail). Aucun unique outil sees tout three.

4. Fix the source; net the rest. Clean the réel URLs — DB, templates, tags. Alors ajouter upgrade-insecure-requests as a backstop pour ce que slips via. The directive is insurance, pas a repair.

5. Two différent “force HTTPS” jobs, two différent outils. upgrade-insecure-requests upgrades the sub-resources votre secure page requêtes. HSTS forces the top-level navigation to votre site onto HTTPS. Ils don’t overlap and un jamais replaces the autre — a hardened site uses les deux.

6. It’s a recurring audit, pas a one-time task. The CMS database, plugin/theme updates, and third-party tags garder reintroducing http://. Treat detection as a scheduled sweep, or it silently comes back.

Mixed-content anti-patterns

Mistakes que leave insecure content live — or paper over it au lieu de fixing it.

• Treating upgrade-insecure-requests as the fix. It’s a net. Si the resource has aucun HTTPS version the upgraded requête fails, and you’ve hidden a broken dependency au lieu de resolving it. Clean l’URL sources; utiliser the directive pour the tail.
• Assuming a code deploy cleaned the database. In a CMS, la plupart http:// image and embed URLs live in content rows, pas templates. A template fix leaves every old post mixed. Run the DB search-and-replace.
• Deprioritizing active mixed content parce que “it’s just a warning.” It isn’t — active is blocked. A blocked stylesheet or script is a functional outage, pas a cosmetic nag.
• Spot-checking the homepage and appel it fait. Mixed content hides on product pages, old blog posts, and paths seulement some utilisateurs hit. Explorer the whole site and utiliser CSP reporting pour ce que the explorer can’t reach.
• Ignoring third-party tags. An ad, analytics, or chat vendor encore appel http:// is mixed content vous pouvez’t fix in votre propre repo. Chasing it in votre codebase forever is wasted effort — push the vendor or drop the tag.
• En utilisant block-all-mixed-content on a nouveau construire. It’s deprecated and obsolete. Reach pour upgrade-insecure-requests à la place.
• Confusing upgrade-insecure-requests with HSTS. Un upgrades sub-resources; the autre forces top-level HTTPS and defends contre SSL stripping. Shipping un and assuming you’ve covered the autre leaves a réel gap.
• Leaving detection out of the recurring audit. Fixing it une fois and jamais checking à nouveau guarantees a plugin mettre à jour or a pasted http:// image brings it back unnoticed.

Mixed content — cheat sheet

Active vs. passive

Detection stack

The CSP directives

Don’t-confuse-these

One-liner fix (CMS): DB search-and-replace http://yourdomain → https://yourdomain, alors patch templates/plugins, alors définir upgrade-insecure-requests.

Trouver mixed content — snippets

1. Explorer un page from the command line

Grab une page and flag quelconque insecure src/href sub-resources left in the HTML.

macOS / Linux

# Flag insecure script/img/link/iframe/source references on a single URL
curl -s https://example.com/ \
  | grep -Eo '(src|href)="http://[^"]+"' \
  | sort -u

Windows (PowerShell)

(Invoke-WebRequest -Uri "https://example.com/").Content `
  | Select-String -Pattern '(src|href)="http://[^"]+"' -AllMatches `
  | ForEach-Object { $_.Matches.Value } | Sort-Object -Unique

Ce seulement sees the raw HTML — resources injected by JavaScript won’t montrer up, qui is exactly pourquoi vous aussi utiliser DevTools and a réel robot d’exploration.

2. Chrome DevTools Console — liste insecure resources on the rendered page

Paste into the console on the HTTPS page to catch même JS-inserted références:

// Every element with an http:// resource attribute in the live DOM
[...document.querySelectorAll('[src],[href],[srcset],[data-src]')]
  .filter(el => /^http:\/\//.test(
    el.src || el.href || el.getAttribute('srcset') || el.getAttribute('data-src') || ''
  ))
  .map(el => ({ tag: el.tagName, url: el.src || el.href }));

Le navigateur aussi logs blocked active mixed content on its propre as Mixed Content: … Ce requête has been blocked; le contenu doit be served over HTTPS. — lire ceux premier.

3. Bookmarklet — one-click console dump

Enregistrer as a bookmark; click it on quelconque HTTPS page to console-log its http:// références:

javascript:(()=>{const h=[...document.querySelectorAll('[src],[href]')].filter(e=>/^http:\/\//.test(e.src||e.href)).map(e=>e.src||e.href);console.log('%cMixed content candidates:','font-weight:bold',h.length);h.forEach(u=>console.log(u));})();

4. Turn on CSP reporting (detect in production)

Ajouter a report-only header so réel visitors’ navigateurs tell vous à propos de violations — notamment third-party tags and pages votre explorer misses:

Content-Security-Policy-Report-Only: default-src https:; report-uri /csp-report-endpoint

Report-only reports sans enforcing, so vous pouvez size the problem safely avant switching on upgrade-insecure-requests or enforcement. (The modern equivalent uses report-to with a Reporting-Endpoints header.)

5. The safety-net header (une fois you’ve fixed the source)

Content-Security-Policy: upgrade-insecure-requests

Remember it doesn’t upgrade third-party top-level navigation and is pas a replacement pour HSTS.

Recurring mixed-content audit SOP

Run ce après HTTPS launches, CMS or theme releases, tag-manager changements, and on a regular schedule pour sites whose content changements frequently.

1. Explorer HTTPS pages in raw and rendered modes. Export insecure URLs from src, srcset, stylesheet, iframe, media, and récupérer/XHR requêtes; ordinary HTTP anchor liens ne sont pas mixed content.
2. Collect navigateur evidence. Examiner DevTools on representative templates and utiliser Content-Security-Policy-Report-Only to capture violations triggered by réel visitors and third-party tags.
3. Classify chaque finding. Mark it active or passive, first-party or third-party, static or JavaScript-injected, and identifier the template, database field, plugin, tag, or vendor que owns the source.
4. Fix the source référence. Point it to a working HTTPS resource or a safe relative URL. Ne faites pas assume modification http:// to https:// is suffisant; vérifier the destination en réalité supports TLS.
5. Utiliser CSP as a safety net. Ajouter upgrade-insecure-requests seulement après reviewing the findings. It peut reduce exposure, but it ne fait pas repair the CMS record or replace HSTS.
6. Re-crawl and render. Active mixed-content errors devrait be zero on testé templates; passive resources devrait aussi resolve over HTTPS sans fallback.
7. Prevent recurrence. Correct the originating template or editor workflow, retain report-only collection où appropriate, and assign nouveau violations to the system owner.

Symptom → probable causer → fix

Mixed-content release tests

Tester 1: rendered template sweep

• Objectif: Catch active and passive resources que raw HTML alone misses.
• Méthode: Render a representative URL from every template and interaction state; inspect Console and Network output pour insecure or blocked requêtes.
• Attendu result: Aucun sub-resource is requested over HTTP and aucun active content is blocked.
• Échec trigger: Quelconque mixed-content warning, auto-upgrade échec, or manquant layout/function caused by a blocked resource.
• Suivant action: Trace la requête to its template, tag, plugin, or stored field; fix the source and rerun the sweep.

Tester 2: source and CSP comparison

• Objectif: Detect violations introduced seulement pour réel visitors or by third parties.
• Méthode: Comparer robot d’exploration findings with Content-Security-Policy-Report-Only events, grouped by blocked URL, page template, directive, and owner.
• Attendu result: Aucun unexplained production-only violations remain; connu noise is documented and excluded narrowly.
• Échec trigger: A repeatable violation absent from the explorer or an unowned third-party source.
• Suivant action: Reproduce the visitor state and correct or supprimer the injecting integration.

Tester 3: recurrence tester après publishing

• Objectif: Vérifier the CMS ne … plus generates nouveau insecure références.
• Méthode: Publish a tester item via the normal editorial workflow, alors explorer and render it with the même checks utilisé pour production.
• Attendu result: Generated markup and chargé resources utiliser valid HTTPS URLs.
• Échec trigger: The nouveau page recreates an HTTP référence previously cleaned from older content.
• Suivant action: Fix the editor par défaut, template, plugin, or content transform avant the release proceeds.

Ressources utiles

My speaking

• Meilleur Safe Que Sorry with HTTPS — SMX East 2016 (SlideShare) — my deep-dive on TLS, courant HTTPS implementation échecs, and the migration gotchas que produce mixed content in the premier placer. (Standing disclaimer: it’s my understanding of ces systems, and the adoption stats in it are from 2016.)

My connexe writing

• The Beginner’s Guide to SEO technique — où HTTPS and mixed content fit in the bigger technical picture.

From autour the industry

• Ce que is mixed content? (web.dev / Google) — the canonical definition and the active-vs-passive split.
• Fixing mixed content (web.dev / Google) — the step-by-step: finding it, fixing sub-reURL sources, upgrade-insecure-requests, and CSP reporting.
• MDN — upgrade-insecure-requests — precisely ce que it upgrades, ce que it doesn’t, and pourquoi it doesn’t replace HSTS.
• MDN — block-all-mixed-content — the deprecated blocking directive, pour quand vous inherit it.
• MDN — Mixed content — le navigateur-behavior référence pour blockable vs. upgradable resources.
• Enable HTTPS on votre serveurs (web.dev / Google) — relative/protocol-relative URLs and the surrounding HTTPS setup guidance.

Stats worth citing

• Active mixed content is blocked by par défaut. Google: “La plupart navigateurs déjà block ce type of content by par défaut to protéger utilisateurs.” — the raison active mixed content is a functional outage, pas a warning. Source
• Active mixed content is the supérieur threat. Google’s propre ranking of the two tiers: “Active mixed content poses a greater threat than passive mixed content.” — right-sizes votre triage order. Source
• Passive mixed content is ne … plus safely “allowed.” Google: “Jusqu’à recently, passive mixed content was chargé in tout navigateurs … Ce is now beginning to modifier.” — the “images are harmless” assumption is expiring. Source
• upgrade-insecure-requests n’est pas a substitute pour HSTS. MDN states it plainly: it “does not replace the Strict-Transport-Security (HSTS) header.” — the two contrôle solve différent halves of the problem. Source
• ~89% of the web is on HTTPS (W3Techs, 2026; confirmer the current figure), qui is exactly pourquoi leftover http:// sub-resources on an otherwise-secure page are the courant échec mode now — lune pages are HTTPS; the cargo lags behind. Context via the HTTPS hub.

Testez vos connaissances: Mixed Content

Five rapide questions on mixed content. Pick an réponse pour chaque, alors vérifier.

Journal des modifications