Community Tip - Fixing mixed content errors

CommunityTip

#1

Error
Try the suggestions in this Community Tip to help you fix mixed content errors.

Background
Did you notice the green padlock missing from your browser when connecting over HTTPS? That is likely a mixed content issue. Mixed content errors mean that your website is being loaded over HTTPS, but some of the resources are being loaded over HTTP. In this case, the site will show as not secure.

Quick Fix Ideas

  1. To fix this, you will need to edit your source code and change all resources to load over a relative path, or directly over HTTPS. For example, if you load your images with a full URL, <img src="http://example.com/image.jpg" />, you would want to change this to <img src="//example.com/image.jpg" />. By removing the http:, the browser will use whichever protocol the visitor is already using.

  2. Install a mixed content fixer plugin which should automatically replace the http with https in these sections. For Wordpress, we have had success with the SSL Insecure Content Fixer plugin.

  3. Enable the Automatic HTTPS Rewrites on the Crypto tab to potentially fix these errors automatically. Resources loaded by JavaScript or CSS will not be automatically rewritten and mixed content warnings will still appear. In Google Chrome, if you notice a small shield with a red X, that indicates a script is being called via http and causing the mixed content issue. Automatic Rewrites will not fix that issue, you will need to edit your source code as described above.

  4. Mixed content issues are most often associated with Flexible SSL. Check to see if your SSL setting is Full or Flexible mode by logging into your Cloudflare dashboard and clicking on the Crypto tab to check the SSL setting.

  5. Failing the above and a more complex approach is to change your Content Security Policy Header always set Content-Security-Policy: upgrade-insecure-requests, or block-mixed-content. From Wikipedia, Content Security Policy (CSP) is a computer security standard introduced to prevent cross-site scripting (XSS), clickjacking and other code injection attacks resulting from execution of malicious content in the trusted web page context.

Lite Reading

Background Resources
Knowledge Base
YouTube

Research The Issue
Community
Google

If You Need More Help
This community of other Cloudflare users may be able to assist you, if not, login to Cloudflare and then contact Cloudflare Support. When you contact support, make sure to include as much of this information as possible: error messages, screen shots, and/or HAR file(s).

Expert Comments Appreciated
This Community Tip will remain open for input from Community experts and those familiar with this issue. We really appreciate comments that start with words like: “The three things I always try”, or “Do this first” or “In my experience”.

This is a Cloudflare Community Tip, to review past tips click here.


Error Content Mixed
SSL certificate help
How to set NameServer with IP (and Page Rules for Flexible SSL)
I am facing ssl problem
Contenido no seguro bloqueado (No se carga el CSS ni Scripts)
Brand logo from my website gone, immediately de-installed cloudflare :(
Unable to post , and modify post
Style went wrong after ssl
I need help with Cloudflare's SSL Certificate
My wordpress site don't load theme file (css,js,fonts,icons) successfully
Gallery by bestwebsoft does not work with cloudflare
Cloudflare is blocking a resource causing it to be http, not https
Problemas con SSL
SSL Cert Not Working on 1 of 4 URLS
Dedicated SSL
How configure the Cloudflare Nameservers?
#2

#3

This topic was automatically closed after 14 days. New replies are no longer allowed.