Your Browser Security IQ

Eric Wuehler
4 min readMar 13, 2017

--

For years we have all been trained to look for the lock icon in the browser window before entering credit card information or other private information we want to keep secure. This has been, in large part, successful because the ability to acquire the certificate necessary to make the lock icon magic happen wasn’t easy. Now, with services like LetsEncrypt that offer free certificates and a simple way to automate their use, the doors are open for bad actors to add the lock icon to their malicious websites. The automation and management of these free certificates will only become more commonplace as cloud services like AWS incorporate these features.

Secure, encrypted traffic between browser and online services is awesome — more HTTPS, please. However, we all need to evolve our Browser IQ to distinguish between when traffic is simply encrypted and when you can be confident the website you are interacting with is actually who they say they are. Whether the user is Dad at home buying something online or an employee at the office working with a supplier’s website, most of us equate the browser lock icon to “this website is safe to use.”

Newer browsers are providing information to distinguish these two, but most of us likely haven’t noticed or understand the changes. If we look at how browsers are displaying this information, here are the three buckets:

  • Non-encrypted websites
  • Encrypted, but not verified websites
  • Encrypted and verified websites

Note: The following is not intended as a commentary on the user interface design or user experience, I’ll let smarter people than myself debate those issues. Rather, this is to point out how browsers visual display the different buckets above and hopefully provide you with some visual clues on how to distinguish them.

First up, the traditional non-encrypted websites:

Browser bar on websites without encryption

This is the baseline — what the browser bar looks like when you visit a website without encryption. For the curious, starting from top to bottom, the browsers are: Edge (Windows), IE 11 (Windows), Chrome (Windows), Safari (Mac), Chrome (Mac), Firefox (Ubuntu), Chrome (Ubuntu), Safari (iOS), Chrome (iOS), and Chrome (Android).

Next up, look at what the browser bar might look like on a website that uses encryption, but not verification (image spotlighting is mine):

Browser bar on websites encrypted, but not verified

Here we start to see some subtle differences. Lock icons start to appear, although not necessarily in the same locations. Some browsers change the color to green, and some add the word “Secure” among other visual cues. This is what we have been trained over the years to look for to identify “Secure” websites.

As mentioned earlier, creating a “Secure” website is not the same as verifying ownership of a website. Automated tools for website developers make creating “Secure” websites inexpensive, which lends itself to allowing authors of malicious websites the ability to feign “security”. However, all this really means is the website data is encrypted (good!) — it does not mean that the receiver on the other end of any transaction is who they claim to be.

What we need to start training ourselves for now is identifying verified websites. The browser bar for verified websites should look something like this:

Browser bar for encrypted and verified websites

Comparing this to the previous picture, we see an addition of a company name next to the lock icon instead of just icon or the word “Secure”. Looking at the top three browsers running on Windows, you see the company name in the bar. The fourth one from the top is Safari, which replaces the URL with an all-green title of the company name instead of the website address. One note on the mobile browsers, the third from bottom (Safari on iOS) reuses the Safari Mac concept — but the Chrome browser on iOS and Android is indistinguishable from just a “Secure” site.

Browsers still have a bit of work to do to educate their users on the differences between an “encrypted” site and an “encrypted and verified” site — especially in the mobile browser where visual space is at a premium. As a user of various sites and services, take the time to learn how to recognize the differences between encrypted and verified sites. However, not all websites use the “encrypted and verified” approach, so just because your bank or favorite e-commerce site doesn’t appear similar to the above example doesn’t mean your transaction isn’t safe — it just means nobody has verified they really are who they say they are.

Bonus notes…

Most of the browsers allow you to click on the lock icon for details about the certificate — if you’re curious. One thing to look for in the certificate is the name of the company — it may or may not be there depending on the certificate issuer and the type of certificate. If you really want to get into the details, you can read here about Domain Validated Certificates (these are for just “encrypted” sites) and Extended Validation Certificates (these are for “encrypted and verified” sites).

--

--

Eric Wuehler

Principal Engineer, Office of the CTO @McAfee. Co-host @MostlySecurity podcast. Tweets are my own. I have three teenagers. Bring it on.