How to Use SSL Properly and Avoid the Yellow Lock Symbol

I’m sure you may have at one point seen this error in a browser window?

Your connection to “your website” is encrypted with 128-bit encryption. However, this page includes other resources which are not secure. These resources can be viewed by others while in transit, and can be modified by an attacker to change the look of the page.

Well, It’s not really an error. It’s warning you that there are other elements on the page that are not secure and can be cause for a hacker to still hack the page. Hackers can use these vulnerabilities to hack your visitors. There is no point in installing SSL unless your site/page is FULLY secure. It’s kind of like the same people who put security stickers and signs around their house, but they really don’t have a security system.

Screen-shot-2014-03-18-at-12. 01. 36-pm

It’s an easy fix and there should be no reason as to why you shouldn’t make the lock green for a fully secure site.

How to Fix the Yellow Lock

  • Make sure any external scripts you have running on a webpage are using HTTPS. Not HTTP. This can include google fonts, backgrounds images, etc..
  • Make sure all images on the page are using HTTPS in the URL rather than HTTP
  • Make sure to block all widgets that may be calling HTTP code. If your using WordPress you can use widget logic to block widget elements on just this page alone. All you have to do is simply call a conditional that tells the browser to not display those widgets on this particular page. Here is a sample code: !is_page(23) This code says, if this page is page ID 23, do not show this widget on this page. Simple 🙂
  • Sometimes you might be calling HTTP inside your CSS or PHP code. Use your console to check running scripts. It will tell you exactly what is being blocked and why.

Implement these fixes and you should have no problem generating a green lock for a fully secure site. If you have run into other problems that generated a yellow lock, please describe below and what you did to fix it.

For WordPress Users who aren’t as tech saavy, here are a few plugins that work awesome without having to do the above manual work.

In the HTACCESS here are a few rules you can use to change from http to https (ssl certificate)

Other useful blogs on fixing ssl and http to https
https://www.keycdn.com/blog/http-to-https/
https://plus.google.com/+JohnMueller/posts/PY1xCWbeDVC

SSL Causing Images Not to Display? Here’s How to Fix It

 

Heather Valencia

Heather Valencia

Web Designer & Developer | Owner

I’ve been developing WordPress websites as a freelance web designer in Spokane since 2010. My passion for building websites is as strong as the dedication I put forth in strengthening my client relationships.

15 Comments

  1. Alex

    Thank you! You saved my day! 🙂

    Reply
  2. WPZee

    Useful tip. Thanks for sharing.

    Reply
  3. Gary Dixon

    Neet tool wanted to share with ye.

    SSL certficate is using SHA-1 algorithm that expires after 2015. You should re-issue your SSL certificate as SHA-2 to avoid padlock warning in Chrome.
    Server supports SSLv3, may be vulnerable to POODLE attack. It is suggested to disable the SSLv3 protocol.
    Server certificate

    https://www.whynopadlock.com/check.php

    Reply
  4. sal

    Hi, “Use your console to check running scripts.” How do I do this? Sorry, I’m not a techie. Thanks in advance.

    Reply
    • Heather Valencia

      You will have to use chrome developer tools https://developer.chrome.com/devtools

      If you are not a techie then I suggest hiring a local freelance web developer. They will have the skills necessary to fix these problems.

  5. Ronnie

    Hello

    I am facing a big Issue on My blog. I have not be able to access WordPress dashboard after login, because it is showing HTTPS, but I have not done any changes to my site in last few days, it’s just I updated some bulk plugins. I don’t enabled any SSL or anything similar, I don;t have much knowledge about it.

    I just able to login using my username and password and that’s it, can’t go ahead. Please help me out. It’s urgent.

    Not been able to access dashboard from 24 hours now.

    Reply
    • Heather Valencia

      Shoot me an email or give me a call and I’ll be happy to do some work for you to get it fixed. Sounds crazy.

  6. Pamela

    Hi there… I installed both the Really Simple SSL AND the SSL Insecure Content Fixer plugins and I still get the yellow lock.. I’ve checked my css, my functions file, my images, links, etc.. I can’t find anything… Can you guide me? Here is my blog: https://lifecoffeeandchocolate.com/ Thanks so much!

    Reply
    • Heather Valencia

      You are still loading insecure content, 3 of those things looking like they belong to whatever you are using for ad’s. One is an insecure image. Use web developers console and you can see the exact scripts that are causing conflict. If you aren’t able to figure out how to fix it (cause it can be challenging) feel free to contact me and I’ll be happy to help you further.

    • Pamela

      I actually found it.. it was the Social Sharing Toolkit plugin.. I disabled it and now it’s fine.. whew! Thanks Heather!

  7. Vinay

    Hi Heather, nice article. I had this strange thing happen to SSL on my website. It was fine till noon today and now the locked got crossed out in Chrome and the warning!
    I am porting my current website to wordpress and it’s on my development server, both the website is on the same server. Could this one of the reason, what do you suggest I should be doing now. Here are the links
    https://www.ivdisplays.com/ – my main site
    http://demo.ivdisplays.net/ivdisplays_wordpress/ – development server.
    I hope this is not a botheration for you and thank you in advance

    Reply
  8. Freddy

    Hi Heather,

    Thanks for the explanation… perfect answer to fixing my yellow lock issue which I found to be an image I uploaded that was using http

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *