Warninglinks.mixed-content

The secure page loads insecure files

Why it matters

A page served over https that pulls in a file over http:// is only as secure as that file. Anyone on the same network can replace it on the way, and a replaced script can do anything the page can.

Browsers know this and act on it. Scripts, stylesheets and frames over http are blocked outright — the page loads with pieces missing, and the visitor sees a broken layout or a feature that does nothing, with no explanation. Images, audio and video are not blocked: the browser asks for them over https instead, and if the server can't answer that way they don't load. Whichever happens, the page you tested on your machine is not the page the visitor gets.

It is usually a hard-coded http:// address left behind when the site moved to https, or a third-party widget that never did.

Source: MDN: mixed content; Fixing mixed content.

How to fix it

Change the addresses to https://. Nearly every host that is worth loading from serves https now:

<script src="https://example.com/widget.js"></script>

For a site that has just moved, a search and replace across the database catches most of it (in WordPress, Better Search Replace or wp search-replace). A protocol-relative //example.com/x.js also works and inherits the page's scheme. If a third party really has no https address, it has to go: the browser will block it anyway.

Examples

These are the rule's own test pages, and what it says about each. They are run on every change to the rule book.

<img src="http://images.example.net/cake.jpg" alt="A cake">

NoticeThe page loads 1 image over http. Browsers ask for them over https instead, so they only appear if the server can serve them that way.

fail-http-image
<script src="http://widgets.example.net/chat.js">
</script>
<img src="http://images.example.net/cake.jpg" alt="A cake">

WarningThe page loads 1 script, 1 image over http. Browsers block insecure scripts, stylesheets and frames outright, so that one is not loading at all for your visitors.

fail-http-script
<script src="https://widgets.example.net/chat.js">
</script>
<img src="/cake.jpg" alt="A cake">

PassedEverything the page loads is served securely.

pass-all-https