Why can a site be HTTPS and still show mixed-content or a broken padlock?

Question

Weirdo · Accepted Answer

HTTPS in the address bar does not mean every image, script, or font also loaded over HTTPS. If any subresource still uses plain HTTP, browsers warn, upgrade, or block it—that’s mixed content, and it’s why the padlock looks broken or incomplete.

Mixed content means a secure page (HTTPS) fetches insecure subresources (HTTP images, CSS, JS, iframes, fonts, and more). The main document is encrypted, but those HTTP requests can still be sniffed or altered. Tampered scripts are especially dangerous: they can rewrite the whole page.

Modern browsers typically auto-upgrade “upgradable” requests such as images and media to HTTPS, and block “blockable” ones such as scripts, stylesheets, and fetch/XHR. Symptoms: a degraded padlock, DevTools Mixed Content warnings, missing images, or dead interactivity.

Replace hardcoded `http://` with `https://` or relative URLs, then hunt leftovers in the Console / Issues panel. CDNs and old CMS content are common culprits. A valid certificate only secures the top-level connection; subresources must be secure too for a clean padlock.

Why can a site be HTTPS and still show mixed-content or a broken padlock?

What mixed content is

How browsers react

How to fix it