Really Simple SSL

How to track down mixed content or insecure content

Rogier

Rogier

Share on facebook
Share on twitter
Share on linkedin

If you do not see the secure lock in your browser address bar, you still have mixed content. It is very important that this is fixed, because browsers will throw all sorts of warnings at users, who might get scared.

Insecure content, mixed content
Whoops: this site has mixed content.
The secure lock! Yeah!

What is mixed content?

Your website consists of HTML, images, javascript and CSS files. When your site is loaded in the browser, the HTML that is loaded will contain links to the images, javascripts and CSS files, the resources of your website. If your HTML is loaded over https, and your resources load (partly) over http, the content is “mixed”: you have mixed content. There can also be other causes: an image that loads over https, but gets redirected to http for example. Finding these insecure resources in the browser is usually not so difficult. Finding which plugin or which file in your theme uses the image is often the hard part.

How can I fix the mixed content on my WordPress website?

The built in mixed content fixer in Really Simple SSL fixes all mixed content in the HTML of your site. But there are some types of mixed content that cannot be fixed dynamically. These will need to be fixed either manually, or by Really Simple SSL pro. This because the links are hardcoded in (css or javascript) files on your site, or because they’re hardcoded in files on other domains, or simply 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 that website’s 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:

Find the warnings in the console

Open your site in Google Chrome,

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

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

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. A mixed content warning will always show ‘Mixed content’. Other warning can be ignored for mixed content purposes.

Now we are getting somewhere! In the yellow/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.

Trace back the mixed content warnings to the origin

In most cases the mixed content fixer in Really Simple SSL will fix all issues in your HTML, so we can expect most issues to be in the resources. Usually if the site doesn’t have a secure lock right away, and the mixed content is coming from your own domain the issue is caused by caching. Clearing all caches the website uses usually resolves mixed content issues. If your site uses Elementor or Divi you might have to perform some additional steps before your site becomes fully secure. See the respective articles for instructions (Elementor, Divi).

Development console advanced search

The development console offers an advanced search feature to determine the origin of the mixed content. On a mac, press option + command + F to open this feature. On Windows, press Ctrl + Shift +F. When pressed, a small search box will appear:

In this box you can copy the url of the image we have previously identified as causing mixed content. Pressing enter will do a search and show more information about the location of the image. This search will usually find mixed content in .css and .js files too.

Manual Method

Some mixed content cannot be found by the advanced search. To manually find the cause of the mixed content, right click on the page and click on “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, re-save 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 insecure URL, and replace any http links you might find.

Of course, you can also save yourself some time and buy the premium plugin, which offers the scan which does all this automatically, and offers secure cookie setting, HSTS, SSL expiration warning, and includes premium support as well.

Related articles

54 Responses

  1. 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 🙂 )

  2. 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?

    1. 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.

  3. 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?

    1. 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.

      1. 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?

  4. 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.

    1. 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

    1. 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

    1. 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

  5. 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

    1. 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

  6. Hi! I used your plugin to get my site SSL set up and now my site gives security errors… how do I get that to stop?!?

    Options:
    * WordPress redirect
    * Mixed content fixer
    SERVER: apache
    SSL is enabled for this site
    ** Detecting configuration **
    plugin version: 2.5.23
    Already on SSL, start detecting configuration
    ssl type: SERVER-HTTPS-ON
    ** Configuring SSL **
    testing htaccess rules…
    test page url, enter in browser to check manually: https://www.glamandglossysociety.com/wp-content/plugins/really-simple-ssl/testssl/serverhttpson/ssl-test-page.html
    htaccess rules test failed with error: cURL error 60: SSL certificate problem: self signed certificate
    checking if .htaccess can or should be edited…
    .htaccess does not contain default Really Simple SSL redirect
    retrieving redirect rules
    converting siteurl and homeurl to https

  7. My WordPress blog gives me this type of error.
    Today I try to find the solution of this error ON google and comes with this article.
    Thank you so much for posting such a great and useful article.

  8. Hello
    I had a surprise problem and did not know why, but I had this message.

    The mixed content fixer is activated, but was not detected on the frontpage. Please follow these steps to check if the mixed content fixer is working. Instructions

    1. Hi,

      do you still experience this issue? I’ve checked your site and the marker data-rsssl=1 which is inserted when the mixed content fixer is active is now visible in the page source, it could be possible you were looking at a cached version of the page.

  9. Hello,

    I have the following error.
    “The mixed content fixer is active, but was not detected on the frontpage.”

    Should I check it every web page or just front page?

      1. Hi,

        I’m currently seeing a maintenance page on the website the license is activated on. If this page is generated by another plugin, it can be the ‘data-rsssl=1’ marker isn’t added to the page source. To check if the marker is present, you can right click on your website and click ‘View page source’. That will show the HTML of the page, then you can search for data-rsssl=1.

        If the mixed content fixer isn’t detected, but there is no mixed content on the website then you can safely ignore the warning.

        Let me know if you have any other questions.

        Mark

  10. Hey there!
    https://www.doyouspeakpolyglot.com/ could you please mine? I did check wqith ssllabs.com and it gets 4 A’s.
    Also, I can find 2 errors on the console, the “data-rsssl=1” is active and present.
    I can find the errors but I don’t quite get it how to fix it…

    jetpack.css Failed to load resource: the server responded with a status of 404 (Not Found)

    social-icons.css Failed to load resource: the server responded with a status of 404 (Not Found)

    1. Hi Luca,
      If you get 404 (not found) errors on css files, you might need to check if they’re actually there, or if they’re blocked by hot link protection on your server. For information on hot link protection, you can contact your hosting company.

  11. Hello,
    I am having issues as well. I have followed all instructions on my site: cetaceanecology.com – my SSL certificate has an A rating, the mixed content code is present, but when I check the console it shows no errors. Still, I get the “This connection is not private” error. I just installed WP and have done nothing else at all with the site. I have another site (consciousscientists.com) that has no issues and I did all things just the same with this site, but for some reason, nothing seems to be working. What can I do? I have tried switching themes in case it’s the pictures but nothing helps. Your support is appreciated.
    Cheers,
    -Y

  12. I have followed all the guides, including WooCommerce’s guide, to converting http to https. My site get’s an A, cert if working and live. I’ve tried everything to port over all the images from my http site, and for the life of me cannot get them to load on the https site. I’ve tried find/replace, etc etc etc. Any help would be much appreciated.

    http://www.agaperoasting.com.

    As far as I can tell, all errors are in the form of ‘failed to load resource, 403’ error. I understand they are still referencing the http location from before, but if someone could give me details on fixing each one, I’d be really grateful. Even if it’s manually.

    Thanks in advance.

    1. Hi, these images do not load from an http location: the URL’s are all with https. But when I load an image directly in the browser, either with http or https, http://agaperoasting.com/wp-content/uploads/2016/07/cropped-small-bean-32×32.jpg, I still get a 403 forbidden. This means there is a configuration issue on the server. It looks like the entire uploads folder is locked for access. I would check your .htaccess file, and aks your hosting company if they know anything about this.

  13. Thank you for the prompt reply. You were correct in that it was an .htaccess file error. I reached out to hostgator, and received the following reply:

    The 403 errors are being caused by invalid code in the sites .htaccess file. The following block of code is resposible and has been commented out but please be aware that we offer very little support with custom htaccess rules.

    #RewriteCond %{HTTP_REFERER} !^http://agaperoasting.com/.*$ [NC]
    #RewriteCond %{HTTP_REFERER} !^http://agaperoasting.com$ [NC]
    #RewriteCond %{HTTP_REFERER} !^https://www.agaperoasting.com/.*$ [NC]
    #RewriteCond %{HTTP_REFERER} !^https://www.agaperoasting.com$ [NC]
    #RewriteCond %{REQUEST_URI} !^/\.well-known/acme-challenge/[0-9a-zA-Z_-]+$
    #RewriteCond %{REQUEST_URI} !^/\.well-known/cpanel-dcv/[0-9a-zA-Z_-]+$
    #RewriteCond %{REQUEST_URI} !^/\.well-known/pki-validation/[A-F0-9]{32}\.txt(?:\ Comodo\ DCV)?$
    #RewriteRule .*\.(jpg|jpeg|gif|png|bmp)$ – [F,NC]

    If you check the site now you should see that it is loading correctly.

    Do you know why those would not have converted properly through the very clear online steps taking a site from http to https?

    Either way, thank you very much.

    1. Hi Ayman,

      this seems to be an error in the ScrollReveal Javascript library, this won’t cause any mixed content on your site. You can contact the developer of the library to get more information about the errors.

      Mark

  14. Hi I am having difficulty figuring out where exactly is the image that causes the mixed content located. I followed the steps above but turns out it is probably in the css or js code. How do I find this out in order to replace it?

    1. Hi,

      when you are in the developers console, you can copy and paste the link that’s causing the mixed content in the advanced search, this can be opened (on a mac) by pressing alt+cmd+f. If the link is in a .css file, the advanced search will reveal it. If you can provide me with your site address I can check this for you.

      Mark

      1. Hi Mark, thanks a lot for your reply. I managed to locate it using your method at style.css file. Funny thing is, when I go to my style.css file in wordpress I cannot find it so I can’t locate it. My website is nuvistastech.com.

  15. I have a issue with Canadianliquidation.com, I have error “The mixed content fixer is active, but was not detected on the frontpage. Please follow these steps to check if the mixed content fixer is working. Instructions ”

    success SSL is enabled on your site.
    error The mixed content fixer is active, but was not detected on the frontpage. Please follow these steps to check if the mixed content fixer is working. Instructions
    success An SSL certificate was detected on your site.
    success 301 redirect to https set: WordPress redirect
    warning HTTP Strict Transport Security is not enabled. To enable, get Premium
    warning Secure cookie settings not enabled. To enable, get Premium

    Still having issues with mixed content? Check out Premium, which includes an extensive scan and premium support. Learn more

    I am using Bitnami wordpress aws any idea how I can fix this thanks

    1. Hi Usman,

      the site uses a self-signed certificate (see https://www.ssllabs.com/ssltest/analyze.html?d=canadianliquidation.com&latest=yes). For a certificate to be valid, it needs to be issued by a certified certificate authority like Comodo or Let’s Encrypt. Really Simple SSL cannot install or obtain an SSL certificate for you. We recommend to get a certificate at your hosting provider, they can easily install a certificate for you. Once the certificate has been installed, Really Simple SSL will help to convert your site to SSL.

  16. Hi Mark,
    I am getting the insecure image error, but that image doesn’t exist in my Media Library. Checking the Console, the image comes up as a 404. Suggestions on how to fix this? Thank you so much!
    Site is: https://lorenafox.com/

    Mixed Content: The page at ‘https://lorenafox.com/lorenafox/’ was loaded over HTTPS, but requested an insecure image ‘http://lorenafox.com/lorenafox/wp-content/uploads/2018/09/foxes-background-5.jpg’. This content should also be served over HTTPS.
    /lorenafox/wp-content/uploads/2018/09/foxes-background-5.jpg:1 Failed to load resource: the server responded with a status of 404 (Not Found)

    1. Hi Lorena,

      this image is coming from the following stylesheet: https://lorenafox.com/lorenafox/wp-content/themes/bridge/css/style_dynamic.css. This stylesheet is dynamically generated by your theme, so I suspect that this image is defined somewhere in your. Locating and removing the image reference should fix your issue.

      If you are in the developers console, pressing option+command+F (on mac) it will open up the advanced search and you will find the location where the image is coming from.

      Mark

  17. Dear Support,
    Kindly help me set up SSL properly be because it has mixed content and its not converting all links from http to https.
    I have license for pro version.
    regards,
    Prashant
    +61497114819

  18. I have Really Simple SSL pro, but was still having issues with Elementor. I eventually figured out the issue was on the Elementor Advanced Settings page. I set the CSS Print Method to Internal Embedding (It had been on External File) and the SSL lock activated.

Leave a Reply

Subscribe