How do I fix the SSL Mixed Content Error Message?

On this page:

  1. What is "mixed content"?
  2. What does the green lock mean?
  3. How do I know if my site has mixed content?
  4. How can I fix a mixed content issue? 
  5. If you host a Wordpress site 
  6. Additional resources 

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 https://domain.com in a browser and the page you see contains an image invoked via <img src="http://external.com/resource.jpg"> in the HTML, this jpeg file is mixed content because the img request 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:

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 <img src="//external.com/resource.jpg">) either come from the same host (e.g. domain.com), thus using the same certificate or come from an external host (external.com) 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:

Firefox:



IE (version 10):

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:

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

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:

1. Check that the resources specified in the mixed content warnings load properly over HTTPS on their own.

2. 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.

3. 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.

4. 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:

Additional resources

Not finding what you need?

95% of questions can be answered using the search tool. This is the quickest way to get a response.

Powered by Zendesk