Mixed content occurs when a page loaded over HTTPS includes resources, such as images, scripts or stylesheets, that are fetched over insecure HTTP. The page is then only partly protected.
How do browsers handle mixed content?
MDN describes two groups. Upgradable content, for example images, audio and video, is automatically requested over HTTPS. Blockable content such as scripts, stylesheets, iframes and fetch() requests is blocked. web.dev uses the older terms passive and active mixed content and notes that attackers can take control of a page through active content.
For SEO, mixed content matters indirectly (an assessment, Google makes no statement on it in the sources used). Blocked scripts or styles can break the page that users and rendering systems see.
Fixing it means serving all resources over HTTPS, for example by updating http:// links in templates, content and CDN settings. The upgrade-insecure-requests directive in a Content-Security-Policy header can upgrade requests as a stopgap.
Example
<!-- on https://www.example.com/ -->
<script src="http://cdn.example.net/app.js"></script>
The browser blocks this script. Changing the URL to https:// fixes it.
Common mistakes
Old content in a CMS keeps hard-coded http:// image URLs after the move to HTTPS.
Sources
- Mixed content – MDNdeveloper.mozilla.org
- What is mixed content? – web.devweb.dev
- Consolidate duplicate URLs – Google Search Centraldevelopers.google.com
Last updated: