iOS Origin Display: How Popular iOS Apps Display URLs
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...

iOS Origin Display: How Popular iOS Apps Display URLs

Many Browsers and Apps Create Security Risk With Poor Origin Display.

Earlier this year we explained ‘eliding’ – which is the practice of visually truncating a long URL to fit into an address bar – and how desktop browsers display URLs and origins.

We found that many of the popular desktop browsers make basic mistakes in their display of URLs. Poor origin and URL handling can be a usability and security issue if it prevents the user from understanding what site they are visiting. Phishing sites can – and do – take advantage of this to improve their scams.

On mobile devices, where screen real estate is severely limited, accurately identifying the origin can be more difficult. We took a look at a handful of popular iOS apps on an iPhone SE to see how they display URLs and if they follow best practices.

We tested all the major iOS browsers as well as major social media and messenger apps. To show the potential security risk of poor URL display, we tested all the apps with a Paypal phishing site. Here is the full URL (note this is a real phishing site):

https://paypal.com-update-security-access.acount-customer.info/webapps/

Note how many of the apps elide the URL so that you only see the left portion of the domain (where Paypal is located) instead of properly and clearly identifying the origin as “account-customer.info.”

Many apps which are not browsers that involve sharing links and content, such as social media and messenger apps, display web pages natively within the app. This is likely an attempt to create a more seamless and consistent experience, however these apps often had the worst UIs. In some cases, these apps fail to provide even the most basic UI – such as identifying the origin at all, or showing an indicator for HTTPS connections.

chrome iOS origin displayChrome

Overall, Chrome does very well with origin display. Compared to other browsers, there are more UI elements in the top pane leaving considerably less room for the address bar. This is concerning as it may make it harder for the user to easily identify the origin.

✔ URL is elided from the left.

✔ Tapping on the address bar sends the cursor to the endof the URL.

✔ HTTPS pages are indicated with a green padlock icon. The https protocol is also displayed in green, however it is almost never visible on this screen size.

✔ Tapping the padlock icon opens the “Page Info” pane which shows the origin. This can make it easier to determine what site you are on. However, this feature could be improved as it currently truncates the origin.

On HTTPS pages with mixed content (some HTTP resources) a grey circle with an “i” inside is shown (same icons as desktop). Tapping the icon tells you “your connection to this site is not fully secure” with additional text clearly describing the potential risks.

On HTTP pages, there is no way to open the “Page Info” pane.

Safari iOS origin displaySafari

Safari has less UI elements in the top pane, giving them more room to display the origin. However they make poor use of this space.

✖ URL is elided from the right.

✖ Tapping on the address bar sends the cursor to the left-side of the URL. This compounds the risk of its improper eliding.

✔ When the address bar does not have active focus, the path and query string are dropped. This makes it easier to identify the origin.

✔ HTTPS pages are indicated with a black padlock icon.

For sites with EV certificates, the company name totally replaces the URL in the address bar (until it has active focus), and the text is displayed in green.

Firefox iOS origin displayFirefox

Mozilla distributes two browsers for iOS – Firefox (shown here) and Firefox Focus. ‘

‘Focus’ has built-in privacy preserving features and ad blocking. The UI is different, but the handling of origins is almost identical.

✖ URL is elided from the right.

✔ Tapping on the address bar sends the cursor to the right-side of the URL.

✔ HTTPS pages indicated with a green padlock icon.

✔ The subdomain is displayed in a lighter color, making it easier to distinguish the origin. However, because long subdomains can easily crowd the entire address bar, the contrast may not be noticeable. This feature is also present in Firefox for desktop.

Brave iOS origin displayBrave

Brave is a newer browser focused on privacy.

✖ URL is elided from the right.

✔ Tapping on the address bar sends the cursor to the right-side of the URL.

✔ HTTPS pages are indicated with a green padlock.

➖ Tapping the “Brave” icon (orange lion head at upper right) shows the “Site Shield settings” pane which identifies the origin.

However, the origin is truncated in the middle.

Dolphin Browser iOS origin displayDolphin Browser

This is a one of the more popular alternative and independent browsers specifically developed for mobile. Its security is questionable.

✖ URL is elided from the right.

✖ The HTTPS protocol is shown for secure connections, but there is no padlock icon.

✖ Tapping on the address bar sends the cursor to the right-side of the URL.

Facebook Messenger iOS origin displayFacebook Messenger

The dedicated Messenger app displays origins differently than the main app.

✖ Page title is shown instead of the URL. This makes phishing extremely easy as titles are not unique. However, URLs are displayed in full within the message thread, which gives users good visibility before they click the URL.

✖ There is no indicator to differentiate between an HTTP and HTTPS page.

Instagram iOS origin displayInstagram

Instagram does not allow hyperlinks in direct messages or comments, which makes it significantly harder to get a user to directly visit a page.

However users can set a URL in their profile.  The entire URL will be displayed there, no matter the size.

✖ URL is elided from the right.

✖ The page title is prominently shown in black with the URL below in a smaller and lighter font. This compounds the risk of improper eliding.

✖ There is no indicator for HTTPS pages.

Twitter iOS origin displayTwitter

Twitter displays pages in-app with limited UI. The origin is displayed in the title bar but the path is not shown. The address bar cannot be clicked on.

✖ The origin is truncated in the middle. This is better than eliding form the right, but could be abused to aide phishing.

✔ HTTPS pages are indicated with a black padlock.

WhatsApp, Signal, and Wire

These apps have no native way to display webpages. Instead links open in Safari. Given how poorly many apps with in-app viewers handle URLs, this is a safe choice. These messengers also provide privacy features, and natively opening links would leak identifiable information.

Conclusions

Overall, there is consistent failure with URL display in popular iOS apps that display webpages.

Google’s Chrome browser, which is a leader in UI design and HTTPS advocacy on the desktop, also has strong UI design on its mobile app. It is the only app we tested that elided URLs properly (always from the left, never from the right!).

Chrome’s “Page Info” pane provides a wealth of information written in clear language – it’s entirely unobtrusive and does clutter screen real estate. Not all users may realize that tapping the padlock icon does anything, but this is a common convention from desktop that many users should be familiar with.

Chrome’s biggest area of improvement would be making more room for the address bar as it has the fewest pixels allotted to the address bar of all the browsers we tested.

Safari, Firefox, and Brave all elided improperly from the right. However, each browser excelled in other areas. Firefox and Safari give ample room to the address bar which improves readability. Safari does not display with path+query when the address bar does not have active focus which greatly simplifies origin identification.

Firefox’s grey-shading for the subdomain is a nice idea, which it also uses on its desktop version, but it may not translate on mobile. If Firefox properly elided, this feature could be more useful.

Brave’s “Site Shield settings” pane is similar to Chrome’s “Page Info” feature which gives the user another option for identifying the origin. However, the origin should not be truncated in the middle and they may also want to consider dropping the subdomain in this view to make it easier to identify the main origin.

The Dolphin Browser has very poor URL handling. It only gets the very basics right – showing the HTTPS protocol when you have a secure connection. It is clear its designers have not considered how to securely display URLs.

The non-browser apps which decide to handle URLs in-app all fail to display URLs in a secure manner. Basic mistakes – like only showing the page title, or lacking any HTTPS indicator – need to be fixed. These apps should study the best practices and smaller development teams should consider abandoning in-app browsing.