How to Use SSL Properly to avoid Yellow Padlock Issue? Reason might be: Insecure form call OR CSE Script Download over HTTP

Are you recently moved to HTTPS? We have published very detailed article on how to enable SSL on your WordPress site sometime back.

There is very high possibility that, you may get Yellow Padlock Icon in address bar instead of the Green one when you try to load your blog in Chrome/Mozilla browser?

How to fix that insecure connection issue? (Yellow -> Green padlock)

Well, there were two issues in our case:

1. Most probably you are loading some non-secure data on your blog, may be Google Custom Search (CSE) script.
2. You may have non-secure <form> call.

Fix for an issue-1: Load CSE script over HTTPS

Everybody knows that Google is the best place to search and hence why not to use Google Search on your blog too? As mentioned in this post we are using Adsense Search on Crunchify.

As you see in that tutorial, Google loads two resources over HTTP to make sure search box and search result appears correct way.

# search-box script
https://www.google.com/coop/cse/brand?form=cse-search-box

# search-result script
https://www.google.com/afsonline/show_afs_search.js

In a strange note: even if you move above two URLs from http to https you may notice yellow padlock.

How did we identify this issue?

There is a site called whynopadlock.com which shows the actual reason.

So question here is: How to use Google Custom Search on https to avoid non secure content prompt?

Let’s fix it?

Step-1: search-box script

On Crunchify.com we have fixed this issue by copying http://www.google.com/coop/cse/brand?form=cse-search-box script content locally in file gce-search-box.js and stored it on our server’s root folder.

• So for search box: my code would look like this:

Step-2: search-result script

Similarly for Search Result page, copying content from https://www.google.com/afsonline/show_afs_search.js script to gce-search-result.js file.

But make sure you change http to https in script gce-search-result.js (only 1 occurrence).

• So for search result page my updated code would look like this:

Now try loading your SSL WordPress blog in Chrome/Mozilla Browser again and you shouldn’t see any yellow padlock issue.

Fix for an issue-2: fix Insecure <FORM> call

How did we identify this issue?

Same way by visiting https://www.whynopadlock.com and by entering url: https://crunchify.com.

How did we validate this?

• Go to https://crunchify.com
• Right click on page
• Click on View Page Source
• Go to line 98 to check http form call

Seems issue happened because we are using Genesis eNews Extended WordPress plugin which internally adds submit action form with non-secure http call. And that’s the cause of Yellow padlock and Insecure <form> call error.

How did we fix Insecure <form> call error?

As I knew where to fix – I went ahead and modified plugin file directly and changed http to https for feedburner URL.

After making above changes and clearing cache, Yellow Padlock issue resolved. I was able to see Green Padlock. Try it out and let me know for any more query.