How to Use SSL Properly and Avoid the Yellow Lock Symbol

by | Jan 18, 2017 | How To, Website Security | 15 comments

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

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


Ravenous Raven Design
Google Rating
Based on 18 reviews