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.
