Mixed content Warnings & Errormessages

How to track down mixed content or insecure content

The built in mixed content fixer in Really Simple SSL fixes all mixed content that’s part of your websource. But there are some types of mixed content that need to be fixed, either manually, or by Really Simple SSL pro, because these are hardcoded in files on your site, or because they’re hardcoded in files on other domains, or because the requested domain does not have an SSL certificate.

If the mixed content fixer is active, but you still don’t have the green lock, you have a type of mixed content that can’t be fixed automatically:

  • Http links in stylesheets or javascript files
    Some .css or .js files contain hard coded http links, which will cause mixed content warnings. For example if you use a theme that generates custom css with hardcoded http links, this will cause mixed content warnings.
  • Hot linked images
    If you have embedded an image on your domain, domain-1.com and the URL to that image is domain-2.com, and domain-2 does not have an SSL certificate, this image will be blocked by the browser.
  • http links in your site to javascript files or stylesheets on other domains
    These will get fixed by Really Simple SSL, but again, if the remote domain does not have an SSL certificate, these files can’t get loaded over https.
  • Included js or css files on other domains, and this domain does not have an SSL certificate
    If you include files from another domain, this domain also needs to have an SSL certificate.
  • http links in css or js files on other domains
    If the remote files can get loaded over https, but contain hardcoded http links (which happens a lot) mixed content warnings are the result.

These links can be located in theme files, plugins, or maybe in a widget you inserted on your site. Sometimes images are inserted from another website with their url, which won’t work anymore if that url can’t load on SSL.

To find these issues, you might consider buying the Really Simple SSL pro plugin, which scans your entire site for all possible issues in files and database, and creates a list of issues to fix and when possible it offers a “fix” option. If not, you’ll get instructions how to fix it. For example, the plugin can’t fix a hot linked image if the image doesn’t exist, or if the remove server blocks the downloading. Besides this, you get added options that improve your security, like HTTP Strict Transport Security, the preload list, a certificate expiration warning option, mixed content fixer for the admin, and more.

If you want to do this manually:

First, check if the mixed content fixer is active.

If it is, you’ll have to track down the urls that were not fixed automatically.

  1. Clear any cache in your browser, by clearing the history
  2. If you have a caching plugin active, clear the cache and check if it has been cleared.

Still getting mixed content warnings? Follow these steps:

Open your site in Google Chrome,

Right click on your website. A drop down will appear, with an option “inspect element”

step-1-inspectelement

When you click this option “inspect element”, part of your browser changes into a development screen:

step-2-development-console

To enter the console, simply click “console”. Then you will see the mixed content warnings, like:

Mixed Content: The page at ‘https://domain.com’ was loaded over HTTPS, but requested an insecure image ‘http://domain.com/…’. This content should also be served over HTTPS.

step3-the-chrome-console

Now we are getting somewhere! In the red characters, you will find some links. These links are the cause of your frustrations. How to fix them depends on your theme, plugins, etc.

First we will check if the problematic link is located in the websource, or in some other file, .js or .css for example. To do this, we go back to the normal website, right click, and now select “view source”

step-4-view-source

If we click “view source”, we now see the html code of the page. Do a search (ctrl F or cmd F) on the insecure link you found in the previous steps.

If the link is not in the source, it is probably located in a .css or .js file, generated by a plugin or your theme. Check all your plugins, resave the options, and do the same with your theme.

To find mixed content in your css or js, you can also download these files from your server, do a search on the file, and replace any http links you might find.

Related Articles

23 Comments

  • Willem

    Thanx Rogier! This worked for me.
    I kept on getting a warning so checked every link and picture (i thought).
    Then read your console tip!

    Great plugin, does the trick.
    Willem (also from Groningen 🙂 )

    • Rogier Lankhorst

      Hi Willem, that’s good to hear!

  • Mark L

    Hi,
    I recently moved my site to SSL and use your plugin to activate it.
    On my site I display external rss feeds from secured and non-secured websites (news agregator). Those feeds from non-secured sources are not displaying images on my secured site and I see these errors in the chrome console:

    Failed to load resource: net::ERR_INSECURE_RESPONSE
    Failed to load resource: net::ERR_CONNECTION_REFUSED
    Failed to load resource: net::ERR_CONNECTION_CLOSED

    Is there anything I can do to display images from http sites on my https site?

    • Rogier Lankhorst

      This is correct behavior. The insecure images won’t get loaded. The only solution is to disable the mixed content fixer for those url’s, but I would advise against that: users would get security warnings on your homepage if insecure images are loaded. So if you are looking to hotlink images from a http domain on your site without users getting mixed content/security warnings: that’s not possible .You have to choose: images, or a green lock.

      • Mark L

        Thanks for this. I wish I know about this before the change.

  • Art

    Hey this is great. However, I found out in the console that 2 pictures on my website are causing this error. I use those pictures as my background pictures. So how do I solve this now? Do I have to remove the pictures ? how do I convert them into https now?

    • Rogier Lankhorst

      You’ll need to find where these images are requested, probably in a css file. Such a css file might be generated by your theme. If you find the link to those images, change it to https. If you can’t find the link yourself, you can use the scan in the pro plugin.

  • Paweł

    Hi,

    I followed al of the instructions to solve the problem but still my website appears as insecure. The URL is http://www.tielored.pl. I would be grateful if anybody can help.

    Best regards,
    Paweł

    • Rogier Lankhorst

      Hi Pawel,

      The problem is that your SSL certificate isn’t valid. You can test this on ssllabs.com/ssltest.

      • Paweł

        Hi Rogier,

        Thank you.

        That’s correct, my server administrator have just informed me about that but now everything should be fine with certificate. Nonetheless, there’s still problem with mixed content. Google Chrome console says that because of the hero image.

        Should I change the image or there are any other ways to solve this?

        • Rogier Lankhorst

          If you change the image to a https url, it should be fixed.

  • Anmol Farmah

    Hi
    I did observe mixed contents and due to this issue images are not loading properly but when I check source link it does show https which in my understanding should be fine, because if I see these links with http instead https then I see an issue. Please help me understand and fix this issue.

    • Mark Wolters

      Hi Anmol,

      although the link is https:// the images are not available because the website you are trying to load them from has an invalid certificate. Because of this the images refuse to load and therefore don’t show up on your website. The easiest solution would be to host these images on your own website. Then they are available over https:// and won’t cause any errors.

      Let me know if you have any other questions!

      Mark

  • Paul Je

    This is very not simple? I don’t know how to find them or change them at all..

    • Mark Wolters

      Hi Paul,

      SSL on your site is not working because the website is using a self-signed certificate. For a certificate to be valid, it needs to be issued by a trusted certificate authority like Comodo or Let’s Encrypt. This is something your hoster could help you with.

      Mark

  • Sank

    Hi
    In my laptop website shows ssl certificate secure.
    in others it shows non-secure what is the problem can u help me to fix it…??

    Your connection is not private

    Attackers might be trying to steal your information from http://www.sskbuildcon.co (for example, passwords, messages, or credit cards). Learn more
    NET::ERR_CERT_AUTHORITY_INVALID

    This is error i found on other pc
    The url https://www.sskbuildcon.co

    • Mark Wolters

      Hi,

      this is because the certificate you are using is self-signed. For an SSL certificate to be valid it needs to be issued by a trusted certificate authority like Comodo or Let’s Encrypt. Once you fix this the site will be available over https://. This is something your hosting provider can help you with. For more information about your certificate see: https://www.ssllabs.com/ssltest/analyze.html?d=sskbuildcon.co&latest.

      Mark

  • goldtour

    also same problem please help

    • Mark Wolters

      Hi,

      it seems there is an issue with your certificate. I’ve done a test over at https://www.ssllabs.com/ssltest/analyze.html?d=turkeygoldtour.com&ignoreMismatch=on&latest which returned that the certificate your site uses is self-signed. For a certificate to be valid, it needs to be issued by a trusted certificate authority like Comodo or Let’s Encrypt. You can fix this by getting a certificate from a certified authority, this is something your hosting provider can help you with. Once a valid certificate is installed, Really Simple SSL can help you migrate your site to SSL.

      Mark

  • Maria

    Hi Mark,
    Thank you for posting this! I’m trying to solve the issue by fixing the js file which seems to be giving the errors but there I fixed all the http I could find to https and nothing has changed. It still says I have 3 insecure images..
    Any suggestions?
    jquery.js:4
    Mixed Content: The page at ‘https://melbourne.lanewaylearning.com/’ was loaded over HTTPS, but requested an insecure image ‘http://melbourne.lanewaylearning.com/wp-content/themes/superspark/images/icon/dark/top-search-button.png’. This content should also be served over HTTPS.
    https://melbourne.lanewaylearning.com/
    Thank you

    • Mark Wolters

      Hi Maria,

      the console makes it look like these images come from the jquery file, but they are actually coming from this stylesheet: https://melbourne.lanewaylearning.com/wp-content/themes/superspark/style-custom7.css?ver=4.4.11. Since this is probably generated by the theme re-saving the theme settings and clearing the cache might resolve this. If not, you can edit the custom CSS in the theme’s settings or edit the CSS file to make the images load over https://.

      In these cases you can find the origin of the image by pressing option+command+F on mac or ctrl+shift+F on windows to open the ‘advanced’ search and paste the mixed content URL, in most cases this will return the origin.

      Mark

  • Martin

    Did have a problem in console but removed that. Still issues though…

    • Rogier Lankhorst

      If there are no issues in the console you should have the green lock. If you tell us what your issue is we might be able to help.

Leave a Comment