Archive for August, 2006

How to Trust Email Again

Thursday, August 24th, 2006

As fradualent emails become more and more commonplace, and occurences of identity theft rise in frequency, Arc90’s lead architect Joel Nagy steps back and thinks about a new way to make email a bit more secure.

With the onslaught of spam and phishing that deluges our inboxes everyday we have a hard time even trusting legitimate email. This past weekend I received an email from my bank with a link to login to my account, which of course I didn’t trust. How are we supposed to know which messages are real and which are phishing tactics?

Wouldn’t it be nice if you could tell, at a glance, whether or not an email was from a reputable source? Users need email communication from service providers to be uniquely identifiable with some sort of key. This way, any email without this key would be immediately suspect. Luckily, there exists a mechanism built-in to email software for doing this: pictures. If every email from your bank contained a simple, recognizable picture, you would know when you received an email from someone who wasn’t your bank.

For the picture to be easily identifiable the account holder should upload a unique photo. To make it slightly more secure so that someone can’t simply grab your photos from flickr and try to send them to you in an email, upon upload the image should be modified with some random filters. Filters such as rotation, coloring, borders, noise, or inverting will make the image more unique, yet still recognizable.

Here’s an example of what an email could look like with this method employed, I would notice that this was a picture I took my self and with a few filters applied to the image it is now unique and still recognizable: pictrust_example

Granted any information sent in an email is able to be intercepted, and someone could potentially get your picture, however this would be part of a targeted attack. Phishing by and large is a wide net approach at trying to get millions of people to enter their account information. This approach is not meant to be a complete solution but part of broader security measures (which would take into account users with disabilities), and provides a simple and quick way for users to gain a higher level of trust from online services.

External Link

Wednesday, August 2nd, 2006

The fourth tool out of the Arc90 lab addresses one of those problems that every web developer has struggled with at some point: opening links in a new browser window. External Link is a script that appends an icon to external links — an icon that opens the link in a new window. Now, the user has the choice to follow the link in the current window by clicking on the text, or open it in a new one with the icon. It’s a nice, clean solution.


What is this?

Providing users with a simple way to choose whether to follow a link by opening a new window or not is a tricky problem, and most solutions aren’t easy to implement. Not so with External Link. Include our script in your blog or web page and just add classes to your links, and you give users convenient icons to open new windows, while maintaining the text links for continuing in the current window. No hassle, no fuss and no more problem.

Giving all of your links this helpful feature is easy, too. Just copy one extra line into your html head and you don’t even need to add classes to your links. Plus, the script is smart enough to avoid adding the icon to links that don’t go to external sites.

How Do I Use It?

Download the Code

Click on the icon below to download the source code for External Link:

Download

The file, extlink.zip, contains the script, one required image and an example page. Once downloaded, upload the script and the image to your site. They must be in the same directory.

Link to the Javascript and Add Style

Add a link to the javascript in the page(s) you’d like External Link implemented. Remember to adjust the path to properly point to the location of the file on your server. Then, you need to add a line of CSS code.

You can copy this line and paste it into your <head> section:

<script language="JavaScript" type="Text/JavaScript" src="http://myserver.com/path/to/javascript/arc90_extlink.js"></script>
<style type="text/css" media="screen">.arc90_extlinkIMG { background: transparent url(/tools/c/images/extLink_img.gif) no-repeat top right; margin-left: 2px; height: 12px; width: 12px; cursor: pointer; padding-left: 12px; }</style>
Add Classes to Your Link Tags

Add a new window icon to a link by adding the “extlink” class:

<p>I can add a new window icon to an external link just by adding a class to my anchor tag.</p>
<p>Here is an ordinary <a href="http://www.basement.org" class="extlink">basement.org</a> link.</p>
<p>Here's a paragraph without a link.</p>
<p>...
Give Icons to All

It’s easy to add new window icons to all of your external links, too. Add the following line to your script headers:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>arc90 lab | tools: External Link</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script language="JavaScript" type="Text/JavaScript" src="http://myserver.com/path/to/javascript/arc90_linkthumb.js"></script>
<script>arc90_extLinkUseClassName = false;</script>
</head>

And now you don’t even need a class on your links:

<p>This <a href="http://www.google.com">regular old link</a> will have an icon.</p>
<p>And guess what - <a href="http://www.yahoo.com">this one</a> will, too.</p>
<p>Here's a paragraph without a link.</p>
<p>...

Examples

You can see External Link in action by clicking here.

Supported Browsers

Currently, the External Link script has been tested and confirmed on the following browsers:

  • Internet Explorer 6.0+
  • Mozilla Firefox 1.5+
  • Apple Safari 2.0
  • Opera Version 9.0

Licensing

This arc90 tool is licensed under the Creative Commons Attribution 2.5 license.

Discuss External Link

You can send feedback on External Link at the arc90 blog.