HTTPS, SSL and the Green Address Bar

Have you ever been on a website and noticed that the address bar is green? If you visit a different site, it’s sometimes not green. And on some sites, the text is green and the name of the company pops up too in green. I started noticing this last weekend and wanted to figure out what all the different versions of green in the address meant.

As you can see from above, browsing four different sites gives me four different types of address bars, some green and some not. So what’s all that about? First, let’s understand a simple concept that will make understanding the different icons and colors very easy: secure vs. insecure content.

Secure vs Insecure Content

The first thing to understand is what secure and insecure content really mean. That’s where HTTPS and SSL come into play. SSL stands for Secure Socket Layer and it’s the underlying technology that the protocol HTTPS uses to secure HTTP content. In simplest terms, HTTPS is HTTP over SSL. HTTP is unencrypted HTML traffic between a client and a server.

That’s why when you visit a site like Online Tech Tips, you won’t see any green text or HTTPS in the address bar. All you see in the screenshot above is a white document icon. What does that mean? It just means that the website is not using SSL, which means the data is not encrypted.

So if you were to type any information into a form on my site, for example, that data would not be encrypted over the Internet and therefore could potentially be captured by a third party and read. In Google Chrome, if you click on the little document icon, you’ll get some detailed info like below:

There are two tabs that show up: Permissions and Connection. Let’s talk about the Connection tab. Here you will see that the identity of the website has not been verified. All that means is that I have not bought a security certificate for my website from a trusted certificate publisher like Verisign and therefore Online Tech Tips could be owned by anyone, including the Russians and you really can’t be sure. That’s why you should never type any sensitive information on a website that is not encrypted, which will be almost all blogs and regular websites.

The Green Address Bar

Now that you are understand why you don’t have green text in the address bar, let’s explain the different situations when we are working with a secure connection. First, let’s talk about a site that always has confused me until now: Gmail! When you first load Gmail, your address looks like this with a nice pretty green padlock icon and green HTTPS text.

However, after a point, suddenly the icon would grey with a yellow triangle in the center:

So what’s up with that? This icon basically means that the website is using SSL with encryption, but some content on the page is insecure (not encrypted). So does this make the website unsafe? Not necessarily. In Gmail, for example, images that show up in emails are not secure and therefore not encrypted. That’s why you always have to click the “Always display images from…” link. The second you click that link, you will notice the green padlock icon change to the grey triangle one. So Gmail is still secure, but some of the content in that email is not secure.

The only time you should really worry is if you see a padlock with a red icon and a strikethrough on the HTTPS text.

This could mean a couple of things including the website’s security certificate being expired or other content like Javascript being insecure on the site. This is called high-risk insecure content. Images are not considered high-risk because there is usually no interaction with the user. However, if Javascript is insecure, users could be filling out forms and that data being transmitted insecurely.

So how do you know what content is insecure on a page? You can actually check that in Google Chrome. Click on the Settings icon at the top right, then click on Tools – Developer Tools.

Once there, click on the Console tab and you’ll get a list of all the warnings or errors like shown below.

As you can see from above, the email from AA has a bunch of images that I’ve decided to display and those are insecure. In the Console, you can see the actual specific images that are causing the page to be insecure. This is a nice way to see if something important is insecure or if it’s just images and that sort of thing.

Lastly, on some sites you see the green text and the name of the company in green also like in the first screenshot when logged into my Apple account online. There is no difference in the level of encryption or security, it’s just a visual indicator of trust.

Companies can apply for Extended Validation certificates, which basically cost more money and make the company verify more information about the website and themselves. The name of the company or website is on the certificate and therefore it shows up in a fancy green box to the left of the HTTPS text.

If you click on the padlock here, you’ll see a lot more security information than in the same screenshot above for my website:

As you can see, Apple Inc. has been verified by a  VeriSign Class 3 Extended Validation SSL certificate. You can also see the amount of encryption (128-bit) and other info. Banks normally have 256-bit encryption, which is good since that’s your financial data traversing the Internet.