Mixed content: HTTP content on HTTPS pages

In short: A page loaded via HTTPS includes resources over unencrypted HTTP; browsers block or warn about this.

In more detail: Message: Mixed Content: The page at 'https://…' was loaded over HTTPS, but requested an insecure resource 'http://…'. This request has been blocked. Even though the page itself is encrypted, an attacker could read or alter unencrypted images, scripts or styles.

In Depth

Kinds

• Active mixed content (scripts, stylesheets, iframes, fetch/XHR): blocked by browsers because it can compromise the whole page.
• Passive mixed content (images, audio, video): used to load with only a warning; modern browsers automatically upgrade it to HTTPS or block it.
• The padlock icon disappears or shows a warning.

Causes

• Hard-coded http:// addresses in HTML, CSS, JavaScript or in the database (content from an earlier HTTP time).
• Third-party scripts or embedded media with HTTP.
• API URLs that still contain http:// in configuration.
• A proxy or CDN that passes the page on as HTTP to the browser or sets wrong X-Forwarded-Proto headers so that the application itself produces http:// links.

Solutions

1. In the developer tools (F12 → Console) read the affected URLs.
2. Switch to HTTPS or use relative addresses (/image.png).
3. Replace stored content (CMS, database) (http://domain → https://domain).
4. Change third parties if they do not support HTTPS.
5. Configure the server so that HTTP→HTTPS redirect and HSTS are active; set proxy headers correctly.
6. The Content-Security-Policy upgrade-insecure-requests tells the browser to upgrade HTTP resources to HTTPS automatically (only a stopgap; better correct the source).

See also: HTTPS, Security headers, Let’s Encrypt, ERR_CERT_DATE_INVALID