How do I fix the SSL Mixed Content Error Message?

Table of Contents

  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?

 

What is "mixed content"?

Content such as  videos, javascript, css etc.. that a site loads over HTTP within a page that is HTTPS. For example, if one typed https://domain.com in a browser and domain.com has <img src="http://external.com/resource.jpg"> in the html this jpeg is mixed content as resource.jpg is not loaded over an encrypted connection as 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:

In this case, your site has a working SSL certificate and any 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) that are thus support by the same certificate or come from an external host (external.com) that provides a valid certificate.

The green lock is there to ensure users that their connection is safe. Loading all resources over https can help with user experience and a site from an attack

 

How do I know if my site has mixed content?

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

Firefox:



IE (version 10):

Chrome:

If just a warning the page will load the resource but users will not see the green lock and will see a warning for Mixed Content as below:

If a block then the browser is refusing to load the resource over an unsecured connection:

How can I fix a mixed content issue?

To fix mixed content errors and get the green lock icon you'll want to :

1. 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 the resource 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 permitted to do so, serve the resource from your host directly instead
  • Remove the resource from your site

2. Change every instance of http:// to https:// or // in your page's html code to make sure things like images and JavaScript files are being loaded specifically over HTTPS.

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

Related:

Still not finding what you need?

The Cloudflare team is here to help. 95% of questions can be answered using the search tool, but if you can’t find what you need, submit a support request.

Powered by Zendesk