Browser / Network

Mixed Content

Your page is HTTPS but it tried to load something over plain HTTP, so the browser blocked it.

What it looks like

Mixed Content: The page at 'https://example.com/' was loaded over HTTPS, but requested an insecure script 'http://cdn.example.com/app.js'. This request has been blocked; the content must be served over HTTPS.

What does "Mixed Content" mean?

Shown in the DevTools console of an HTTPS page. Scripts, stylesheets, iframes and fetch() calls over plain HTTP are blocked outright; images and media are usually upgraded to HTTPS automatically or shown with a warning, depending on the browser.

What causes "Mixed Content"?

A script, image, stylesheet, or fetch uses an http:// URL.
Hard-coded http links in templates or a CDN.

How do I confirm the cause?

The console message names the exact http:// URL — search your templates, CSS and JavaScript for it.
Check whether the URL comes from the database or a CMS setting (an old site URL stored as http://), not from code.
Open the http:// address with https:// instead in a new tab to see whether the resource is actually available over HTTPS.

How do I fix "Mixed Content"?

Change the resource URLs to https:// (or protocol-relative //).
Make sure the resource is actually available over HTTPS.
Add an upgrade-insecure-requests CSP directive as a backstop.

How do I stop it happening again?

Use https:// or root-relative URLs (/assets/app.js) everywhere; never hard-code http://.
Add the Content-Security-Policy directive upgrade-insecure-requests so stray http:// links are upgraded automatically.

Got a different error? Paste it into the Explain This Error tool → Identifies the family and the fix — runs locally, nothing uploaded.