probeo

How to fix mixed content?

mixed-content-present page

The issue

An HTTPS page that loads resources over HTTP loses parts of itself. Browsers block scripts, stylesheets and frames requested over HTTP, so features break. Current Chrome and Firefox also try to load images, audio and video over HTTPS instead, and drop them if that fails.

The cause is an http:// URL in the page or in what it loads: in src or href attributes, in CSS url() values, or in requests scripts make at runtime.

Scope

Mixed content is per page, but its sources are usually shared: a template, a stylesheet, a CMS field or a third-party script. One http:// URL in a template affects every page built from it.

How to check you have it

  • By hand: open the page in Chrome or Firefox with DevTools open. The console names each mixed-content request, blocked or upgraded.
  • In page source: search for http:// in src, href, srcset, action and CSS url() values. Links to other sites with <a href="http://…"> aren’t mixed content; only resources the page loads are.
  • In DevTools: the network panel lists every request with its full URL; filtering for http:// finds the insecure ones.

The fix

Change every resource URL the page loads from http:// to https://.

Check that each resource exists at its HTTPS address before switching. Self-host or replace anything that is only available over HTTP. While URLs are being fixed, the upgrade-insecure-requests directive in a Content Security Policy makes the browser request every resource over HTTPS.

Done when: the page loads nothing over HTTP, and the check above comes back clean.

Do not

  • Do not leave protocol-relative URLs (//example.com/…) as the lasting fix.
  • Do not serve the page over HTTP to keep an HTTP resource working.
  • Do not ignore mixed images and media because they still appear today.
  • Do not treat internal addresses as safe over HTTP.

FAQ

Why do browsers treat active and passive mixed content differently?

A script, stylesheet or frame can change the whole page, so an altered one compromises it. An image or video can only change what it shows. Browsers block the first kind outright and, increasingly, upgrade the second.

Are protocol-relative URLs secure on HTTPS pages?

On an HTTPS page, //example.com/script.js loads over HTTPS. Writing https:// explicitly is clearer and doesn’t depend on how the page itself was loaded.

Can Content-Security-Policy upgrade HTTP to HTTPS automatically?

Yes, with upgrade-insecure-requests. The browser requests each http:// resource over HTTPS instead. A resource that doesn’t exist at its HTTPS address fails, so the URLs still need fixing.

What happens when a third-party resource only exists on HTTP?

On an HTTPS page it is blocked, or dropped after a failed upgrade. Find an HTTPS source, host it yourself or remove it.

Do internal network resources count as mixed content?

Yes. An http:// request from an HTTPS page is mixed content whatever the address. Chrome also limits public pages from reaching private network addresses, separately from mixed content.

Does fixing mixed content affect page performance?

Not noticeably. HTTPS connections allow HTTP/2 and HTTP/3, which are usually faster than HTTP/1.1.

Which product detects this

Probeo checks this on every page of your site as part of Site Clarity. This page explains one instance; the product tells you every page that has it.