(No Ratings Yet)

Loading...

• Facebook
• Twitter
• LinkedIn
• Mail

March 15, 2017 Comments closed

Eliding and Origin UI: Displaying URLs Properly In the Browser

in Hashing Out Cyber Security

Many Major Browsers Fail Basic Design Principle

Earlier this week we introduced ‘eliding’ – one of the many methods that browsers use to format and display URLs. As a follow up, we are going to talk more about the way that browsers display URLs, specifically we’re going to talk about Eliding and Origin UI.

The effective display of URLs is incredibly important from a security perspective. The average user will look to the address bar and URL to find out what site they are on and the type of connection they have (insecure over HTTP, or secure over HTTP).

If the address bar’s display of URLs is confusing, ineffective, or misleading, it can drastically aid phishing scams and social engineering. Given that these are two of the biggest threats to users – both as blanket attacks mass-emailed to millions, and targeted efforts used against high-priority targets – it is incredibly important that browsers get this right.

Yet many major browsers, including the desktop versions of Chrome, Firefox, and Opera, are all making major mistakes in their display of origins/URLs.

What is an Origin?

Usually when we talk about pages and places on the internet we are talking about URLs; and unless you are talking to developers, you are almost certainly referring to internet addresses as URLs.

But URLs can be complicated. They can be very long (thousands of characters) and include all sorts of nonsense that does not help us understand who we are connected to.

If our goal is to understand who we are talking to, we instead want to talk about origins. The Chromium Project defines an origin as the combination of a scheme, hostname, and port.

Here are some examples of origins:

Scheme | Hostname | Port

http://www.example.com:80

https://thesslstore.com:443

ftp://subdomain.example.com:21

Defining and understanding an origin is important because this is how your browser sees things. Chromium calls origins the “fundamental security boundary on the web,” and the same-origin policy is a major design ideology driving how web browsers handle, share, and isolate data and apply privileges.

Change any one of those three parts of an origin, and from a browsers standpoint, you are talking to an entirely different website.

Simplifying URLs and Origins

In addition to those three parts, URLs also include the path and query. For example:

Scheme | Hostname | Port | Path | Query |

https://www.google.com:443/search?q=what+is+a+url

At their worst, URLs can be very confusing (for the example above I had to cut off more than half the query to make it fit on one line) and can do a lot of obscure what site you are on. It is a common tactic for phishing sites to specifically craft URLs that are difficult to read and understand.

Unfortunately, origins can be equally complicated. Most browser users probably have no idea what a port is, let alone its purpose.

But since users are constantly following links, visiting websites, and entering their personal data, it’s incredibly important that browsers do their best to make origins and URLs understandable. An everyday user needs to be able to quickly understand where they are.

Here is an origin for a phishing site:

http://paypal.com-webapps-summarympp.verify-page-confirmation.com:80

How quickly can you figure out what domain this is? How confusing is it for an average user to parse this, especially with the recent proliferation of TLDs which makes it impossible to know what to look for.

Chrome, Firefox, and Opera elide (remove, or hide) parts of an origin when possible in order to simplify its display. For example, if you are accessing a scheme over a default port, the port is automatically dropped. If you pasted our above examples into Chrome and hit enter, the origins would be elided when doing so causes no loss of accuracy, as such:

This is basic work that removes the most extraneous parts of an origin.

But a user likely wants more help than that. Distinguishing the domain you are on is necessary, since that almost always the most important part of an origin and the most important factor driving a user’s decisions about what actions to take. Most phishers know this and add long and misleading subdomains to make it hard to understand what domain you are really on.

Visually Distinguishing Components of a URL/Origin

Each browser has different visual treatment of URLs/origins, which vary in effectiveness.

Arguably, Chrome has the least effective visual treatment. It displays the path and query in a lighter color than the origin. However the entire hostname is styled the same, making it hard to determine the important part of the hostname (domain) from the parts of secondary concern (subdomains).

Firefox highlights the domain by displaying it in black and leaves all other parts of the URL and origin in grey. Notice how this helps you quickly identify the true domain on this phishing site, which is using a subdomain to mislead:

Opera goes even further. In addition to highlighting the domain name, the entire query string is dropped unless the address bar has focus:

While all of these browsers clearly put some consideration into how to display URLs and origins, they all fail to do the most important thing properly.

None of these browser properly elide when there is not enough space to show the entire origin. Because phishers often use long hostnames on purpose to confuse users, this is a pretty important security consideration.

The Chromium Project notes that when you have a long hostname and you need to elide part of it, you want to make sure that you are always displaying the “effective top-level domain” (or eTLD) plus the next label. The concept of an eTLD comes from the Public Suffix List which provides a list of domains where users can directly register names. For example, .com, .edu.au, and .github.io.

So if the hostname is “really-long.annoying-website.com”, you should make sure that, at a minimum, you are always displaying “annoying-website.com” (.com being the eTLD, and annoying-website being the next label).

However, Firefox, Chrome, and Opera do not obey this rule. They elide from the right, cutting off the domain when there is not enough room to display the entire origin. In the worst case only the subdomain is shown. This makes it hard for a user to understand what origin they are connected to, and easy for an attacker to mislead or trick them.

Lack of space is a common problem affecting a large proportion of users. With a half-width window on a budget laptop the browser has less than 700 pixels of total width to work with. Once you subtract the rest of the browser UI, there is not much left for the address bar. Somewhere around 40% of desktop users have a screen resolution of 1366×768 or lower.

Firefox is by far the worst, with space for only ~25-30 characters in total (including the scheme) in a half-width window on a 1366×768 resolution monitor. This makes it easy to entirely cutoff the domain, which negates the usefulness of their domain highlighting feature, since there is no longer any contrast to provide context.

The same can be accomplished with Chrome or Opera, but the user’s browser window has to be unusually narrow. However, if a user has extensions/extra icons in their menu, that leaves them with even less room and can cramp their address bar even at full screen resolution.

A Work In Progress

These major browsers are all failing a key principle of proper origin display by eliding in the wrong direction. Chrome and Firefox also have room to improve their domain-highlighting techniques. It is clear they all have major work to do when it comes to displaying origins.

However we also should give them credit for the many improvements they have made so far. This post only covers some of the basic concepts and issues – excluding a lot of the complexity that browsers have to deal with, such as right-to-left languages, permission management, and internationalized domain names (IDN), areas where they have made major improvements.

Proper display of an origin is important because it helps a user quickly and confidently identify who they are connected to. Eliding when the entire origin can’t be displayed is absolutely vital, given the ease of abuse. But browsers should not stop at ensuring they show you the essential part of an origin during sub-optimal conditions. UI should be easy to parse at a glance under optimal conditions as well.

• #Address Bar
• #Eliding
• #Origins
• #URLs
• #web browsers