Mixed content: http:// on an HTTPS page
Mixed content means a page is loaded over HTTPS, but some of its resources, such as scripts, images or iframes, are loaded over plain http://. Those resources aren't encrypted. Browsers therefore block them or show a warning, which can make your page look broken.
Active and passive mixed content
Browsers distinguish between resources that can control the page and resources that only display something.
- Active: scripts, stylesheets, iframes and object or embed elements. Anyone who alters them in transit can take over the whole page. Browsers block them, so menus, layout or forms stop working.
- Passive: images, audio and video. Modern browsers automatically try to load them over https:// and block them if that fails; older browsers show them with a warning. The padlock in the address bar can then no longer be relied on.
- Forms: a form on an HTTPS page that submits its data to an http:// address sends everything the visitor enters across the internet unencrypted. Browsers warn about this too.
Where it comes from
Mixed content usually appears after switching to HTTPS. Old http:// addresses are left behind in page content, in the theme or template, in CMS settings, or in embed codes from third-party services such as a map, video or widget.
In WordPress, for example, the site address is stored in the settings (WordPress Address and Site Address) and in the database, in the content of posts and pages.
How to fix it
Replace http:// with https:// everywhere, or refer to the resource without a domain name if it's on your own site. First check that the resource is actually reachable over HTTPS.
- Update the addresses in the source code, theme or template.
- Set your site's address in the CMS settings to https://.
- Run a search and replace in the database for addresses in the content. Make a backup first; for WordPress there are plugins and WP-CLI for this (wp search-replace).
- Update embed codes from third-party services to their https:// version, or replace the service if it doesn't support HTTPS.
Temporary fix: upgrade-insecure-requests
If you can't fix everything right away, you can ask browsers to automatically load all http:// resources over https://. This only works if those resources are also reachable over HTTPS. Treat it as a temporary measure: fix the addresses properly afterward.
Content-Security-Policy: upgrade-insecure-requestsFind mixed content yourself
Open your website in the browser and look at the Console tab in the developer tools (F12): the browser reports every resource it blocked or warned about as mixed content there. Check a few other pages this way too, such as your contact page and your online store.
How SteadyHost rates mixed content
- OK: the homepage HTML doesn't load any resources over http://.
- Warning: images, audio or video are loaded over http://, or a form submits to an http:// address.
- Problem: scripts, stylesheets, iframes or other active resources are loaded over http://.
- Not available: the homepage isn't reachable over HTTPS.
- SteadyHost only checks the HTML of the homepage. Resources loaded later by JavaScript, and other pages, are outside the scope of the check. This check doesn't count toward the score.
Check your own website
A free check shows within seconds how your website is doing: availability, HTTPS and TLS, the SSL certificate, security headers, DNS and DNSSEC, domain registration and email security.
More guides
- Website down? How to find the cause
- HTTPS and redirecting HTTP to HTTPS
- How to check an SSL certificate is valid
- TLS versions: disable TLS 1.0 and 1.1
- Security headers explained, with examples
- security.txt: where to report vulnerabilities
- DNS records explained: A, AAAA, MX and NS
- What is DNSSEC and how do you enable it?
- CAA record: who can issue your certificates?
- Check domain registration: status and expiry
- How to set up an SPF record for your domain
- How to check and set up a DKIM record
- What is DMARC and how do you set it up?