Community Tip - Fixing mixed content errors

system November 2, 2018, 6:49pm 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

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.
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.
Enable the Automatic HTTPS Rewrites on the SSL/TLS app 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.
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 SSL/TLS app to check the SSL setting.
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
https://support.cloudflare.com/hc/en-us/articles/200170476-How-do-I-fix-the-SSL-Mixed-Content-Error-Message-
https://support.cloudflare.com/hc/en-us/articles/227227647-How-do-I-use-Automatic-HTTPS-Rewrites-

Community Tutorial

Background Resources
Help Center
YouTube

Research The Issue
Learning Center
Community
Google

If You Need More Help
This community of other Cloudflare users may be able to assist you, login to Cloudflare and post your question to the Community. When you post on the Community make sure to include as much of this information as possible: the specific error message you are seeing, the URLs this is happening on, screen shot of the error, and the steps to reproduce the error. Please indicate what troubleshooting steps you’ve tried in order to help us help you.

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

Çevirme…traduzir…翻译…traducir…Traduire…Übersetzen… Translate this Tip