What are ‘mixed content’ errors and how do I resolve them?

What is “mixed content”?

It’s content such as video, JavaScript, CSS, etc. invoked over HTTP within a page that loads over HTTPS. For example, if you type [c9e411dc-f0ce-4f55-a2e8-7c819a051a6a](https://domain.com/) in a browser and the page you see contains an image invoked via in the HTML, this jpeg file is mixed content because the imgrequest is for a full URL over HTTP, as supposed to using an encrypted connection over HTTPS like_ https://domain.com_ was.

What does the green lock mean?

If your site loaded all resources securely over HTTPS, a client would see a green lock in their browser address bar:

What are 'mixed content' errors and how do I resolve them? 1

This is a good indication because your site has a working SSL certificate and all resources loaded by the site are loaded over HTTPS. Resources (i.e., in HTML What are 'mixed content' errors and how do I resolve them? 2 that also provides a valid certificate.

The green lock is there to assure users that their connection is safe. Loading all resources over HTTPS can help with user experience and protects a site from attacks.

How do I know if my site has mixed content?

Below are indications in the web browser that insecure or mixed content is present for the site requested:

Chrome:

If it’s just a warning, the page will load the resources but users do not see the green lock and see a warning for Mixed Content as shown below:

What are 'mixed content' errors and how do I resolve them? 3

If the page is blocked, then the browser refuses to load the resource over an unsecured connection:

What are 'mixed content' errors and how do I resolve them? 4

More detailed information for using the console to locate these issues can be found in the documentation for Chrome and Firefox.

How can I fix a mixed content issue?

To fix mixed content errors and get the green lock icon, you need to:

Check that the resources specified in the mixed content warnings load properly over HTTPS on their own.
Copy the URL of the resource in your browser and make sure a https:// is in front. If the resource is unable to load properly this means that it is not from the same host as your zone (thus, does not have a supported SSL certificate) and you have a few options:

- Use the resource from a different host that supports HTTPS.
- If allowed, serve the resource directly from your host instead.
- Remove the resource from your site.

Change every instance of `http://`to `https://`or // in your page HTML code to make sure resources like images and JavaScript files are being loaded specifically over HTTPS.
Alternatively, consider using Cloudflare Automatic HTTPS Rewrites. However, be aware that resources loaded by JavaScript or CSS will not be automatically rewritten and mixed content warnings will still appear.

After issues with mixed content are fixed, browsers will display the green lock icon in the address bar.

If you host a WordPress site

Below are some additional resources specific to Wordpress sites:

Flexible SSL & WordPress: Fixing “Mixed Content” Errors
Plugin – SSL Insecure Content Fixer
Plugin – Really Simple SSL
Was this article helpful?
Cancel
Thank you!