Fix mixed content on an HTTPS website

Mixed content happens when a page loaded over HTTPS requests resources over HTTP. It can stop images from appearing or styles and scripts from working, even though the main address still starts with https://.

Before blaming mixed content, confirm that the main page's certificate is valid for that domain. A certificate warning and an HTTP resource inside an HTTPS page are different issues.

Find the insecure request

1. Open the developer tools and look at Console and Network.
2. Reload the page and look for mixed content warnings or blocked requests.
3. Note the full HTTP URL and the file, template or script that requests it. The initiator column or tab helps you find where it comes from.
4. Test whether that resource is available over HTTPS with a valid certificate and the expected content.

The browser console guide explains how to collect this information.

Browsers block insecure active content, such as scripts and styles. They may automatically upgrade some images, audio or video to HTTPS; if the destination does not work over HTTPS, those resources will fail. See the behaviour described on web.dev and check each request, not just the icon in the address bar.

Fix it at the source

Update the URLs stored in the application, templates, CSS or the settings of the component that generates them. For third-party resources, use a valid HTTPS destination or replace the resource; simply changing the text http to https does not create a secure service where none exists.

In WordPress, take a backup before replacing URLs in the database and use a tool that handles serialised data. An indiscriminate SQL replacement can break plugin or theme options.

A plugin such as SSL Insecure Content Fixer can rewrite some requests in the response, but it does not guarantee to fix the database, the CSS or external resources. Check its compatibility and the result on a copy before using it.

Check the fix

Purge the affected caches after fixing the source. Test the home page again, along with pages that include forms, the cart, payment or dynamically loaded content. Confirm in Console and Network that no warnings remain and that the resources show the expected content.

Do not enable insecure content in your visitors' browsers as a fix. If the main page still shows a certificate error, go back to diagnosing TLS: removing mixed content does not fix that error.