Dr. Dobb's is part of the Informa Tech Division of Informa PLC

This site is operated by a business or businesses owned by Informa PLC and all copyright resides with them. Informa PLC's registered office is 5 Howick Place, London SW1P 1WG. Registered in England and Wales. Number 8860726.


Channels ▼
RSS

Web Development

Reestablishing Trust in the Web


October, 2005: Reestablishing Trust In the Web

Amir is a professor of computer science at Bar Ilan University and Ahmad an instructor at Netanya Academic College. Ahmad is also a graduate student in the computer science department at Bar Ilan University. They can be contacted at http://AmirHerzberg.com/ and achmad@ netanya.ac.il, respectively.


Electronic commerce is growing rapidly. Unfortunately, electronic fraud is growing just as fast. Among the most acute current security threats are web spoofing and "phishing." Web spoofing is the creation of fake web sites, typically a fake e-banking login page designed to harvest user passwords. On the other hand, phishing attacks involve fake e-mail messages, typically directing recipients to spoofed sites on some pretext. Alas, many users fall victim to such attacks. Studies estimate millions of victim users and stolen accounts ("phish"), and damages in the order of $1 billion in 2003 alone. Furthermore, both the rate and sophistication of the attacks is accelerating, attracting more and more criminal elements. Amazingly, current browsers fail to protect users by helping them tell the difference between known, trustworthy sites and spoofed ones.

We created TrustBar (http://AmirHerzberg.com/TrustBar/) to address this problem. TrustBar is a browser extension that provides improved security, identification, and trust indicators. TrustBar is sufficiently visible to draw the attention of even naive users upon entering a spoofed site. In this article, we examine the current browser UI for identifying sites and their weaknesses and explain the extended UI provided by TrustBar.

Browser Identification Mechanisms

Granted, browser UIs include areas that should be examined by users to authenticate web sites. For instance, the location bar contains the location (URL) of the current web page, while the status bar contains a closed padlock icon in pages protected by the SSL/TLS protocol. However, these elements are not sufficient to protect most users.

For one thing, the location bar and padlock are not sufficiently visible, and many naive users are not even aware of their existence, let alone importance or meaning. In particular, the location is usually given as a URL, and most users do not know which part of it identifies the domain. Indeed many users ignore it or completely remove it. Furthermore, spoofed sites may remove it, possibly replacing it by a fake look-alike image and/or script. Nor, for that matter, is the padlock highly visible, and most users are not aware that a padlock is meaningful only in the status bar and not inside the web page. In any event, the padlock merely indicates only whether the site has invoked SSL/TLS with a public key certificate from one of the (hundred or so) Certificate Authorities (CAs) trusted by the browser. These CAs differ extensively in their requirements, procedures, and costs. Specifically, some certificates only involve validation of ownership of the domain by e-mail/phone to the contact, while others involve validation of corporate documents. Most users are not aware of the identity of most CAs, not to mention that these (unknown) entities are responsible for validating the identities of owners of (protected) web sites.

In reality, most users rely on the content of web sites as a means to identify the site and whether it is protected. Unfortunately, it is trivial for attackers to mimic the appearance of victim sites. This situation is made worse because some of the most important web sites request passwords and even indicate a padlock and claim to use security in unprotected web pages. Most of these sites invoke SSL/TLS to encrypt the password in transit, but users have no way to know this in advance, and therefore, are unlikely to detect a spoofed version that sends the passwords to a cracker. Amazingly, this trivial-to-fix—yet fatal—vulnerability exists in many sensitive sites, including online banks (Chase, PayPal, Wells Fargo, MidFirst, TD Waterhouse, Bank of America); merchants (Amazon); and even security services (Microsoft Passport and Equifax); see Figure 1 and http://AmirHerzberg.com/Shame.htm for an updated list. The combined vulnerability of the browser's UI, user's naïveté, and the irresponsibility of site designers encourage web spoofing and phishing attacks.

TrustBar is an open-source browser extension we built for the Mozilla and Mozilla Firefox browsers (http://trustbar .mozdev.org/). The purpose of TrustBar is to provide highly visible, preferably graphical, indicators for the identification of sites. Specifically, TrustBar presents the identity of the site as names or preferably logo, rather than URLs, and lets users select their own name or logo ("My Bank," for instance). Furthermore, TrustBar also presents the identity of the Certificate Authority (CA), which is the entity that validated the identity of the site. Some CAs have multiple certificate products, typically for different levels of identity validation; TrustBar lets the CA display a different logo for each such product or class of certificate.

Because we designed TrustBar as an integral part of the browser UI, attackers have no control over its display and cannot remove or clone it. Furthermore, it contains clear graphical and/or textual indicators so that users can distinguish between original and cloned sites—identification for the site, identification for the CA, and indication whether the site is protected. Users can edit both text and graphical identifications.

We decided to locate our bar at the top of the browser window, above all other toolbars. It is fixed and beyond the control of web sites. As such, it appears under all conditions. These properties were implemented via the XUL language that was used to build the Mozilla UI. We are currently investigating ways to make TrustBar more like other bars, while still protecting it from removal or cloning by rogue web pages.

Mozilla Firefox Extensions

Using extensions, you can enhance Mozilla's Firefox browser functionality. The TrustBar extension is a collection of files developed as an independent package and overlaid on Mozilla Firefox. This package consists of XUL, CSS, JavaScript, and image files. All files must be zipped in one XPI file using a ZIP utility.

The XUL file contains a description of the extension UI. If the UI is complicated, then its description can span several XUL files. Each XUL file can be overlaid with the original Firefox XUL file to affect the browser UI. The CSS files describe the attributes of the UI elements defined in the XUL files, and the JavaScript files are the code controlling the system. To create an installable extension, all these files are ZIPPED into a JAR file and that, together with install.rdf file, must be packaged in an XPI file.

The TrustBar Package

The TrustBar package is provided in the installation file TrustBar.xpi created by using ZIP. This file contains:

  • Install.rdf, a mandatory file in any Firefox extension. This is an XML-like file that defines properties such as GUID, name, version, target application, and JAR files.
  • TrustBarOverlay.xul, which defines the UI of the main bar of TrustBar.
  • TrustBar.js, a Javascript file that contains code for supporting the UI defined in TrustBarOverlay.xul.
  • TrustBarDlg.xul, which defines the TrustBar dialog UI. This file also includes JavaScript code for supporting this UI.
  • TrustBarGlobal.js, which defines functionality used globally.
  • TrustBar.jar, a ZIPPED file that contains the XUL and JavaScript files, except for the install.rdf file.

The TrustBar identification mechanism is always displayed, regardless of the security level of the loaded site. When the site reached is unprotected, TrustBar displays a message (such as Figure 2) and two buttons:

  • Suspect Fraud Button, which lets users report suspected sites.
  • What Does It Mean Button, which presents users with explanations about the meaning of entering an unprotected site and suggests a potential secure alternative.

In secure sites (as shown in Figure 3), TrustBar lets users modify the identification details by clicking the "show TrustBar dialog" (Figure 4). Within this dialog, users can edit the site/CA organization name, attach a new logo to the site/CA, and change the trust extent for the current CA.

To do it easily and quickly, TrustBar lets users replace current site logos with new ones by right clicking the mouse over any image within the site contents and making that image the active logo (Figure 3).

TrustBar UI

The TrustBar UI is merged into Mozilla Firefox UI using Listing One. This is an XUL file that defines the TrustBar UI and is overlaid with the Firefox original XUL file, called browser.xul. Line 1 defines file elements that are embedded with the browser's original main window and become a part of its UI.

The TrustBar's main element is the horizontal TrustBarBox defined in line 13. This element functions as a container of any number of elements such as logos, text, and buttons.

We verified that the mainCommandSet element defined in the Firefox browser.xul file is always above all other elements. We use the insertbefore attribute to place TrustBarBox above it.

The context attribute defines the context menu activated from inside the TrustBarBox.

The elements contained in our main box are defined in lines 14 to 21. These elements represent either the site and CA logos or their text. The whatId button lets users reach the TrustBar dialog for further information and modifications, and the fraudId button lets users report suspected sites.

The TrustBar dialog pops up whenever an unrecognized secure site is reached or by clicking the whatId button within a secure site. The XUL file describing the TrustBar dialog UI is available electronically; see "Resource Center," page 4.

TrustBar in Action

Once the TrustBar UI is merged into the Mozilla Firefox UI, the JavaScript code in it is activated (see Listing Two).

The main function that initiates TrustBar is Init. This function is called when the main window of the browser is loaded. This is done using this XUL statement:

<window id="main-window" onload="Init()" >

This statement overrides the onload event of the main window of the browser by the TrustBar Init function. The Init function in line 3 initially calls the initialization function of the main window of the browser and then initializes TrustBar.

The initialization tasks of TrustBar include:

  • Creating local directories for saving information about sites and CAs. This is done by calling the createLogoDir function (line 7).
  • Initializing a listener to the browser so TrustBar can get all types of notifications from the browser. Line 5 adds the user-defined listener TrustBarProgressListener (Listing Three) to the browser.

The listener definition includes all notifications that have to be implemented. One of the main notifications to which TrustBar responds is the onSecurityChange notification (line 10). This notification is received whenever a switch occurs between unprotected and secure sites and vice versa.

We look into whether the browser switched to a secure or unprotected site in line 13. The switch statement checks the State variable against two constant values in lines 15 and 26. In case the browser security level changes to a secure site, TrustBar responds in line 15; if it changes to an unprotected site, TrustBar, line 26, responds. The response consists of two functions—one is for destroying the current secure UI, and the other for constructing the unprotected UI to be conformed to the new state. These two functions are straightforward. Basically, they hide some elements and make others visible. In the secure case, we initially verify the SSL certificate by calling the verifySSLCertificate. If this check fails, TrustBar automatically switches to unprotected state. If this verification passes, we make some UI initializations. In line 21, we call the updateTrustBarDB function that checks whether the CA and the site are known to TrustBar, and accordingly, updates TrustBar's local database. Based on the database, TrustBar decides whether to present its dialog.

DDJ



Listing One

1. <overlay id="TrustBarOverlay" 
       xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
2. <window id="main-window" onload="Init()" >
3. <script type="application/x-javascript" 
       src="chrome://safergn/content/safergn.js" />
4. <script type="application/x-javascript" 
       src="chrome://safergn/content/TrustBarGlobalFunctions.js" />
5. <popupset>
6. <popup id="safergnMnu">
7. <menuitem id="dialogmenuId" 
       label="Show identification details dialog" disabled="true"   
8. oncommand="ShowLogoDialog(true);"/>
9. <menuitem id="resetmenuId" label="Reset..."  oncommand="Reset();"/>
10. <menuitem id="aboutmenuId" label=
      "About TrustBar" oncommand="openAboutDlg()"/>
11. </popup>
12. </popupset>
13. <hbox id="TrustBarBox" insertbefore="mainCommandSet" 
       context="safergnMnu" align="center">
14. <image id="OrgImgId" maxheight="45" status="none" />
15. <label id="OrgTxtId" hidden="false" class="header"/>
16. <label id="CertifiedBy" value="Identified by " 
      class="header" hidden="true"/>
17. <image id="IssuerImgId" maxheight="45"/>
18. <label id="IssuerTxtId" class="header"/>
19. <label id="CANotVerByUserId" class="header" hidden="true"/>
20. <button id="whatId" label="what does it means?" 
       oncommand="ShowLogoDialog(true);"/> 
21. <button id="fraudId" label="suspect fraud?" 
       oncommand="reportFraud(CLocation)"/> 
22. </hbox>
23. </window>
24. <popup id="contentAreaContextMenu">    
25. <menuitem id="logomnuId" insertafter="context-setWallpaper"  
        label="Set As Site Logo"  
        hidden="true" oncommand="GetPointedImage(Sdir);"/>
26. </popup>
27. </overlay>
Back to article


Listing Two
1. function init
2. {
3. Startup();
4. br = top.document.getElementById("content");
5. br.addProgressListener(TrustBarProgressListener);
6. gid=document.getElementById("OrgTxtId"); 
7. CreateLogoDir();
8. }
Back to article


Listing Three
1. var TrustBarProgressListener = {
2. onStateChange: function(webProgress, request, stateFlags, status)
3. {  },
4. onProgressChange: function(webProgress, request, 
        curSelfProgress, maxSelfProgress, curTotalProgress,maxTotalProgress) 
5. {},
6. onStatusChange: function(webProgress, request, status, message)
7. {},
8. onLocationChange : function(aWebProgress, aRequest, aLocation)
9. {CLocation=aLocation; },
10. onSecurityChange: function(webProgress, request, aState) 
11. {
12. const wpl = Components.interfaces.nsIWebProgressListener;
13.  switch (aState) 
14.  {
15. case wpl.STATE_IS_SECURE | wpl.STATE_SECURE_HIGH:
16.    sCert=pickServerCert();
17.    if (verifySSLCertificate(status.serverCert))
18.     {
19.        constructSecureUI();
21.        var newCA=updateLocalDB(sCert);     
22.        showTrustBarDialog(newCA);
23.      }
24.    else
25.      badVerification();break
26. case wpl.STATE_IS_INSECURE:
27.  destructSecureUI();
28.  constructInsecureUI();
29. break
30. }
31. }
32. }
Back to article


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.