Troubleshooting mixed content errors

Resolve errors with mixed content to ensure a visitor’s web browser doesn’t block HTTP resources served over HTTPS.


Overview

Domains added to Cloudflare receive SSL certificates and can serve traffic over HTTPS. However, after starting to use Cloudflare, some customers notice missing content or page rendering issues when they first serve HTTPS traffic.

Typically, the problem is due to a request for HTTP resources from a web page served over HTTPS.  For example, you type https://example.com in a browser and the page contains an image reference via HTTP in the HTML to <img src="http://example.com/resource.jpg">.

Normally, if your website loads all resources securely over HTTPS, visitors observe a lock icon (typically a green lock) in the address bar of their browser:

green-lock-icon.png

This indicates your site has a working SSL certificate and all resources loaded by the site are loaded over HTTPS. The green lock assures visitors that their connection is safe. One of the symptoms of mixed content is that different icons appear instead of the green lock icon.

Other causes of content rendering issues are Rocket Loader and Auto-Minify.  Test disabling both features if you do not observe mixed content errors.

Symptoms of mixed content occurrence

Most modern browsers block HTTP requests on secure HTTPS pages. Blocked content can include images, JavaScript, CSS, or other content that affects how the page looks or behaves.

Below are indications that your web browser observes mixed content for the requested web site:

  • Firefox
    You observe a yellow triangle urging caution beside the URL:
    yellow-warning-triangle.png
  • IE (version 10)
    You observe warning messages about “Only secure content is displayed:”
    only-secure-content-message.png
  • Microsoft Edge
    You observe a warning message about “You’re only seeing secure content:”
    edge-insecure-content.png
  • Chrome
    You observe an information symbol or warning symbol beside the URL:
    information-warning.png

For mixed content warnings, the web browser loads the resources but users don’t see the green lock icon in the URL. Warning messages appear within the browser’s debug tools:

mixed-content-warning.png

For mixed content errors, the browser refuses to load the resources over an unsecure connection:

mixed-content-error.png

Information on using the browser’s debug tools to locate these issues are found in the documentation for Chrome and Firefox. Alternatively, you can view your page source and find specific references of http:// for paths to other resources.


Resolution

There are two methods to resolve mixed content errors.

1. Load all resources via your HTML source without specifying the HTTP or HTTPS protocols. For example:

     //domain.com/path/to.file

     instead of

     http://domain.com/path/to.file

2. Depending on your Content Management System, check for plugins that automatically rewrite HTTP resources to HTTPS. Within the SSL/TLS app, Cloudflare provides such a service via Automatic HTTPS Rewrites.

Cloudflare recommends Wordpress users to install the Cloudflare WordPress plugin and enable the Automatic HTTPS rewrites option within the plugin. Alternatively, Cloudflare recommends the SSL insecure content fixer or Really Simple SSL plugin to automatically replace the HTTP with HTTPS.

Related 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