Archive for January, 2011

Influence of Print: Incorporating Newspaper & Magazine Layout Design

New web pages are being designed every day. Great web designers not only keep up with the rest of the pack, but stays ahead of it by tracking what the current trends in web design are. Right now the influence of print design on the web is making quite an appearance in online page design. While many consider the days of newspaper to be archaic and magazines to be a waste of trees, there is great design to be found in these publications. Using that as inspiration for your web pages could jump you up to the cream of the web designer crop.

Print publications have decades worth of experience in the type of design that works and is the most impactful. The best design is always powerful, clear, simple and easy to understand. Negative or white space is king when you are talking about print advertisements including billboards, magazine layouts, newspaper ads and other forms of visual marketing.

The Internet has not necessarily followed this method of reaching their target audiences and making a strong statement to their traffic. One of the greatest benefits to web design is that users are not restricted in what they can say. There is no per word charge when designing a webpage. There was also a lot of flexibility in what graphics could really do. Print advertising does not allow users to incorporate audio, video or Flash. The novelty of being able to design and use these tools is really the fuel for early webpage design.

Today, however, the market is asking for less clutter. They are overloaded with all the information available on the Internet. There is a demand for better search engines, easier to navigate websites, and simply less animation and distracting graphics in modern web design.

This type of design is especially frustrating and ineffective for businesses and marketers who are trying to get one message across. It is too easy for that simple message to get lost in the bells and whistles of an overly design website.

Instead of reinventing the wheel, web designers are going to the experts of old. Print publications have mastered these challenges and understand what it takes to get an audience’s attention.

Typography


The selection of a font is crucial in web page design. Designers need to have an understanding of how fonts affect a design in general, how they affect readers and how best to use them. Typography is design’s way of communicating without speaking. It is common knowledge that the written world can be easily misinterpreted since there are know vocal inflections or an idea of tone.  If your message is not clear or can be easily miscommunication, you lose impact. If you have a great message, but it does not stand out in your design, you lose impact. Designers have to find the right balance in order to properly communication with their target audience and traffic.

Editorial Layouts

When web design began, traditional layout rules were thrown out the window. Frames and tables were the thing and design revolved around creative ways to use them. However, with the demand for simplification and the popularity of blogs – today’s websites more closely resemble their print ancestors.

Print layout design, especially magazine layouts, is great for controlling content heavy sites as well. Not only are the advertisements influential, but the editorial content and design is becoming the go to for blogs, ezines and other content rich websites.

Big bold headlines are common using keywords that enhance SEO techniques. However, the art of the headline is the offspring of newsprint. Other common print approaches that are being used more in web design include indented text, quotations, text in multiple columns and sidenotes and footnotes.

Striking and interesting graphics and photography have always been fundamental parts of design. The layout of these images is also being influenced by traditional print layouts.

Of course, the reason websites were not using these techniques originally is the complication of creating pages using this design style. This is no different today. Beginning web designs may find it difficult to code this kind of layout since the advanced HTML and CSS can take up much more time than more common design approaches.

However, those designers who are familiar with traditional web design are looking for ways to make their sites more appealing and interesting. Incorporating print design ideas and layouts is one of the ways to make a designer’s work stand out. Magazine layouts are known to have even more impact than television advertising – this means spending time studying magazines and using them for inspiration and motivation.

1 Comment more...

For the Love of Logos: Tips, Resources, and More

Advertisement in For the Love of Logos: Tips, Resources, and More
 in For the Love of Logos: Tips, Resources, and More  in For the Love of Logos: Tips, Resources, and More  in For the Love of Logos: Tips, Resources, and More

When it comes to design projects, logo designs tend to be some of the trickiest to work with, simply because of their purpose. All design tends to be conveying a message, this is true, but most designs get to use so much more to make their points accessible to the viewer.


Not to mention that the message being conveyed through most design gets to be a bit more focused or general as well. This is not always true with a logo. Logos usually have much more to convey with a much simpler vehicle to make their message land.

Loveoflogos in For the Love of Logos: Tips, Resources, and More

It is with that in mind that this post came to be. We thought we would search out the best resources, interviews, articles, whatever we could find to help take some of the proverbial guesswork out of this sometimes troublesome design task.

We also thought that we would go ahead and drop some tips into the mix as well to share a few of the pearls that have always stuck out and stayed true with us in this arena of choice: logo design! Which is where we will get started in the post today, with some advice.

The Basics

Now in most conversations that we’ve had on logo design, there are a few standard bits of advice that tend to get tossed at the reader, so we thought that would be a good place to start. You more than likely have heard some of these before, but we have to start somewhere. So why not begin with somewhat of a refresher?

Less is More

Lessismore in For the Love of Logos: Tips, Resources, and More

As was already mentioned, with logos you often have quite a bit for your design to encapsulate which can tend to set you on a cluttered course of an overly busy, somewhat ineffective design. This urge must be avoided, for by and large, the way to the most effective logo design is through simplicity. That’s right, you hear it all the time, you want to keep it simple. Logos tend to work best when they are minimal and sleek, rather than busy and garish, so this is where you want to set your aim when you take on a logo design project.

Counting on Color

Color in For the Love of Logos: Tips, Resources, and More

Given the minimal approach that most logo designs demand, one of the key elements we have at our disposal as designers for effectively pulling this together is color. Not plural. Just color. We stress this because one thing that most designers agree a logo needs to work is to be able to be conveyed in a basic black and white presentation without this compromising its effectiveness. The more colors that are used in the design, the more the design’s message becomes dependent on them. So keep it basic here as well.

The Scaling

Scale in For the Love of Logos: Tips, Resources, and More

As far as basic ‘musts’ for effective logo design go, scalability is near number one on the list. If the logo cannot be resized for use in virtually every size it is needed, then it scores less than fully successful. This is not always the case, mind you, but from what we have seen this tends to be the majority of cases. Logos need to be to versatile in presentation, and among other things that means scalability for transfer between mediums and marketing campaigns. This tends to be why vectors are the format logo designers prefer to work in.

Font Fixation

Font in For the Love of Logos: Tips, Resources, and More

With little to work with, every element counts and carries that much more, which is why choosing the right font for any of your typographical inclusions needs to be heavily considered. This is not a time to simply fall back on your favorite font just so you do not have to think about it. Give the decision the full weight and consideration it deserves, and with the mission in mind find a font that fits nicely within the logo, connecting with all of the finer points of the message that it is carrying. So keep your focus fixed on this element as well when working in this arena so as to not have it feel like an afterthought.

The Brief

Like with all design jobs, getting the client to fill out a project brief is extremely important for being able to effectively craft the logo the client truly needs. Though there are unfortunately occasions when the job has to be done without a brief, or with such a limited one that it barely offers much insight, and things still successfully come together. Though it tends to not be a good idea to try this when creating a logo. Even if you cannot get the client to cooperate and send you the information you need, there is research you can do on your end to fill in the important parts of the brief. Below are a few of the brief bits that you need to be sure that you have covered when you set out to design a logo.

Get the History

History is important. It lets us know where we have been and what we have gone through. The same can be said of a business looking for an updated logo. If we do not know about the history of the company, not only do we have an incomplete picture from which to start our work, but like the saying goes, we might be doomed to repeat it so to speak. If the client is looking for a bit of a rebrand, then without consulting the past versions of the logo, we might near duplicate themes or elements they once had and have wished to leave behind. So getting the client to help us paint this picture can be crucial to the design work we are doing.

Not only can the historical perspective of the brief help us to avoid any repetition, but it can help us to find ways to throwback to the original design in creative new ways. So the history helps on both sides of that coin. Not only that, but as with any job, the more information we have going forward usually is usually the best way to proceed. The more we know about the business and its beginnings, the better prepared we are for finding a way to encapsulate and distill all of the pertinent and relevant information into the logo design. So try your best to get the client to be as forthcoming and comprehensive as they can when they are filling out the brief.

Get the Mission

Even though the history is important for knowing where the business started and how it has grown, another vital section of the brief for the logo design is the company’s current mission. In other words, the history is more of the background of the picture we need the brief to paint, while the mission is the foreground. Where the company is going. What they are moving towards. This helps to give you the full scope of the picture and allows you to feel out the project in a much more accessible way.

Now that you know where they are aiming, you can adjust your focus along that same track and imaginatively explore ways that your design can help create a sense of this endgame. Knowing this direction can assist you in numerous ways, beyond giving you a sense of what to impart. Our clients tend to know more about their fields than we necessarily do as designers (unless the client is from our own field of operations of course, then it is anybody’s game), so with a more distilled mission from the client we know what we need to focus on within their field and what we can avoid as we craft their logo. This way, their audience within the arena becomes clearer, and we can better adapt the message towards them.

Get Client Testimonials

Another section of the brief that we can include for a better picture of the client and their impact within their market is to have them provide a couple of client testimonials if they can. Naturally, not every job or client will have access to this, especially if they are new, but for those who can provide them it can be beneficial. Just like before when we talked about getting the complete picture from the client, these testimonials can serve up some finer points and detail that the picture would have otherwise lacked.

It is one thing to hear from the client about how effectively they are managing withing their field, but to some degree, we tend to write it off as hype. And even though the hype may be all we are selling through our design, if we believe it then we will more than likely be better at conveying that through the work. That is where the testimonials can help to really drive points about the company home through the design brief. By letting us, the designers, know what their audience sees as their strengths we can find ways to accentuate those through the design. So if the client can provide you with these insights, they might prove useful in your process.

Get Competitor Comparison Models

Another area of the brief that is crucial to logo creation, is the section on the client’s main market competitors. This is important for everyone involved in the project to consider for a number of reasons, but for the sake of the logo design, we need this insight to know what is already being done in terms of existing designs in the market. Originality tends to be what we strive for, so we want to be sure that we study the other businesses competing with our clients so that we know what imagery and symbolism has already been executed for conveying these sort of business ideas.

Now this is not to say that we are going to be able to come up with something that has never been done before, but it grants us a headspace wherein we are already in the environment we need to be in for our client’s design. Through this examination we begin already on the path to the audience we will be reaching for through our own design, then we just have to find a new way at them. So this element is often one that we should not attempt to proceed without having in the design brief.

Approaching Style with Caution

Now when it comes to logo designs, there are lots of stylistic approaches that you can take. In fact, you can just check out Logo Trends from Logo Lounge and see the numerous design styles and approaches that have been applied to these projects throughout the community, and which have steered them year by year. The site does a good job breaking down the various styles. However, you have to keep the basics in mind when you consider the stylistic approach that you are going to take. Especially, in regards to colors and scale.

Caution in For the Love of Logos: Tips, Resources, and More

We are the ones who should be aware of the lines and know which ones we should not cross. Image Credit

If the style you choose is too complex then you are going to have to rely on the other elements to help pull it off. Color is where a lot of designers turn in these cases, losing sight of the black and white factor. And though the client does have final say with the overall outcome, when we can steer the design we should opt for a simpler style that does not overcomplicate the design. Not only should we remember the basics, but we should remember to keep it basic. You can still be stylish without compromising the effectiveness of the design, it is just up for us to figure out how to do that.

We are the key to finding and maintaining that balance between function and style in the logo as the project unfolds. It is not a matter of one or the other. Our expertise is what we are hired for, and it is this skill that allows us to find those fine lines that we should not cross. With the depth of the brief it is often easy to lose sight of the simple approach and opt for the razzle dazzle, but this can prove to be a mistake in the end.

Logo Tutorials & Resources

Below are a few collections of resources and tutorials specifically targeted at logo designers for you to get lost in. With so many useful tools and tips all in one place, we felt this was a great place to start for gathering resources for you to use in your own projects!

The Blogosphere’s Best

Throughout the interweb there are numerous blogs that have taken on the task of keeping logo designers in the proverbial know. From sites that are more or less finely focused on this subject matter, to those that take on the topic from time to time, we have gathered a few more cyber stops for you to check out on your logo design quest for knowledge:

Dedicated Sites

  • Logo Design Love is one of the top sites that designers turn to when they are looking for logo design info.
  • Logo Lounge is an awesome site for sure, with lots of insightful logo information.
  • Jeff Fisher’s Logo Motives Blog is a blog from one of the top names in the logo design game.
  • Logobird is a very insightful and useful blog for logo designers from designer Duane Kinsey.
  • Logolog is a fun logo design blog that features some wonderful logo design work from around the globe.
  • Logodesigndotcom can be a useful source of inspiration. Browse their archives for some killer logo artwork.
  • Logotalks’ article on the 33 Best Logo Design Processes of 2009 is a must-browse piece and useful reference collection.
  • LogoBlog does not only blog, but showcases the award winning logos of their international community.
  • LogoOrange gives you a nice insight into Logo Design History. Check out their Famous Brands Glossary and you’ll be astounded where some of today’s famous logos have come from.

Showcases

  • Logodesignerblog features a huge showcase with a nice section on logo design in businesscards.
  • Luka Pensa lets us take a peek into his large logo design portfolio.
  • Gary Simon showcases some of his work in his online portfolio.
  • LogoTwo presents one of the largest collections of Web 2.0 Logo designs on the Internet submitted by webmasters arround the world.
  • LogoFavessole’sintention is to provide you with some logo design inspiration.
  • Pixel Clouds showcases an inspiring selection of logos.
  • The Flickr Logo Showcase is a collection of work you should not miss out on.
  • LogoPond wants you to feast on their Identity Inspiration.
  • LogoRaid features logo design work from around the world.

Very Helpful Articles

Logo Book Learning

Below are a few books on the subject of logo design that we had to highlight before the post wrapped up. If your desire extends beyond the blogosphere, you can always take you love for logo design to more in-depth sources of study:

(sp)(ik)


Keeping Web Users Safe By Sanitizing Input Data

Advertisement in Keeping Web Users Safe By Sanitizing Input Data
 in Keeping Web Users Safe By Sanitizing Input Data  in Keeping Web Users Safe By Sanitizing Input Data  in Keeping Web Users Safe By Sanitizing Input Data

In my last article, I spoke about several common mistakes that show up in web applications. Of these, the one that causes the most trouble is insufficient input validation/sanitization. In this article, I’m joined by my colleague Peter (evilops) Ellehauge in looking at input filtering in more depth while picking on a few real examples that we’ve seen around the web. As you’ll see from the examples below, insufficient input validation can result in various kinds of code injection including XSS, and in some cases can be used to phish user credentials or spread malware.

To start with, we’ll take an example[1] from one of the most discussed websites today. This example is from a site that hosts WikiLeaks material. Note that the back end code presented is not the actual code, but what we think it might be based on how the exploit works. The HTML was taken from their website. We think it’s fair to assume that it’s written in PHP as the form’s action is index.php.

<form method='get' action='index.php'>
<input name="search" value="<?php echo $_GET['search'];?>" />
<input type=submit name='getdata' value='Search' /></form>

In this code, the query string parameter search is echoed back to the user without sanitization. An attacker could email or IM unsuspecting users a crafted URL that escapes out of the <input> and does nasty things with JavaScript. A simple way to test for this exploit without doing anything malicious is to use a URL like this:

http://servername/index.php?search="><script>alert(0)</script>

This exploit works because PHP has no default input filtering, and the developers haven’t done any of their own filtering. This exploit would work just as well in most other programming languages as most of them also lack default input filtering. A safer way to write the above code is as follows:

<?php
$search = filter_input(INPUT_POST | INPUT_GET, 'search', FILTER_SANITIZE_SPECIAL_CHARS);
?>
<form method='get' action='index.php'>
<input name="search" value="<?php echo $search;?>� />
<input type=submit name='getdata' value='Search' /></form>

This is less convenient though and requires code for every input parameter used, so it is often a good choice to set special_chars as PHP’s default filter, and then override when required. We do this in PHP’s ini file with the following directive:

filter.default="special_chars"

We’re not aware of similar default filters in other languages, but if you know of any, let us know in the comments.

It’s important to note that simply adding this parameter to PHP’s ini file does not automatically make your application secure. This only takes care of the default case where an input parameter is echoed back in an HTML context. However, a web page contains many different contexts and each of these contexts requires input to be validated in a different way.

Is input validation enough?

Recently we’ve stumbled upon the following code:

<?php
$name = "";
if ($_GET['name']) {
    $name = filter_input(INPUT_POST | INPUT_GET, 'name', FILTER_SANITIZE_SPECIAL_CHARS);
}
echo "<a href=login?name=$name>login</a>";
?>

The developer correctly applies input filtering, and this code was reviewed and made live. However, something small seems to have slipped through. The developer hasn’t used quotes around the value of the href attribute, so the browser assumes that its value extends up to the first white-space character. A crafted URL demonstrates the problem:


http://servername/login.php?name=foo+onmouseover=alert(/bar/)

All of the characters in name are safe and pass through the filter untouched, but the resulting HTML looks like this:

<a href=login?name=foo onmouseover=alert(/bar/)>login</a>

The lack of quotes turns the attribute value into an onmouseover event handler. When the unsuspecting user mouses over the link to click on login, the onmouseover handler triggers. Quoting the value of the href attribute fixes the problem here. This is a good enough reason to quote all attribute values even though they are optional according to the HTML spec.

<?php
$name = "";
if ($_GET['name']) {
    $name = filter_input(INPUT_POST | INPUT_GET, 'name', FILTER_SANITIZE_SPECIAL_CHARS);
}
echo "<a href=\"login?name=$name\">login</a>";
?>

For this particular situation though, we also need to look at context. The href attribute accepts a URL as its value, so the value passed to it needs to be urlencoded as well as quoted.

Sql in Keeping Web Users Safe By Sanitizing Input Data
Full image (from xkcd)

Commonly overlooked sections

While many web developers correctly quote and validate input in page content, we find that some sections of the page are still overlooked, possibly because they aren’t perceived to be a problem, or perhaps they’ve just been missed. Here is an example from a dictionary web site:

<title><?php echo $word; ?> - Definitions and more ...</title>

Now by default, no browser executes code within the title tags, so the developer probably thought that it was safe to display data untreated in the title. Carefully crafted input data can escape the title tags and inject script with something like this


http://servername/dictionary?word=</title><script>alert(/xss/)</script>

Other commonly overlooked pages are error pages and error messages. Does your 404 page echo on screen the incorrect URL that was typed in? If it does, then it needs to treat that input first. A banking website recently had code similar to the following[2] (they used ASP in this case):

<%
if Request.Querystring("errmsg") then
    Response.Write("<em>" & Request.QueryString("errmsg") & "</em>")
end if
%>

The errmsg parameter didn’t come in from a form, but from a server-side redirect. The developers assumed that since this URL came from the server it would be safe.

Ads/analytics sections at the bottom of a page are also frequently not handled correctly. Perhaps because boilerplate code is provided and it just works. As the following example from a travel site shows, you should not trust anyone and that includes boilerplate code:

<script type="text/javascript">
google_afs_query = "<?php echo $_GET['query'];?>";
.
.
</script>

This is vulnerable to the following attack string:

http://servername/?query=";alert(0)//

In this case input data needs to be validated for use in a JavaScript context since that’s where the data is echoed out to. What meta-characters would you scan for in this case? Would you quote them or strip them? The answer depends on context, and only you the developer or owner of the page know what the right context is.

Different contexts

Now like we mentioned earlier, input may be used in different contexts, and it needs to be treated differently depending on the context that it will be used in. Sometimes data will be used in multiple contexts and may require to be treated differently for each case. Let’s look at a few cases.

HTML Context

In an HTML context, data is written into an HTML page as part of the content, for example inside a <p> tag. Examples include a search results page, a blog commenting system, dictionary.com’s word of the day, etc. In this context, all HTML meta characters need to be encoded or stripped. That’s primarily < and >, but using PHP’s FILTER_SANITIZE_SPECIAL_CHARS is probably safer, and FILTER_SANITIZE_STRIPPED is probably the safest. Make sure you know what character set your data is in before you try to encode it.

There may be cases when you want to allow some HTML tags, for example in a CMS tool or a commenting system. This is generally a bad idea because there are more ways to get it wrong than to get it right. For example, let’s say that your blogging system allows commenters to markup their comments with some simple tags like <q> and <em>. Now a happy commenter comes along and adds the following code to his comment:

<q onmouseover="alert('xss')">...</q>

You’ve just been XSSed. If you are going to allow a subset of tags, then strip all attributes from those tags. A better idea is to use a CMS specific syntax like BBCode that your back end can translate into safe tags.

Attribute Context

In attribute context, user data is included as the attribute value of an HTML tag. Depending on the attribute in question, the context might be different. For non-event handlers, all HTML meta characters need to be encoded. FILTER_SANITIZE_SPECIAL_CHARS works here as well. In addition, all attribute values should be quoted using single or double quotes or you’ll be hit like the examples above.

For event handling attributes like onmouseover, onclick, onfocus, onblur or similar, you need to be more careful. The best advice is to never ever put input data directly into an event handler. Let’s look at an example.

<?php
  $n = filter_input(INPUT_GET, 'n', FILTER_SANITIZE_SPECIAL_CHARS);
?>
<input type="text" value="" name="n" onfocus="do_something('<?php echo $n; ?>');">

Looks safe, doesn’t it? What happens if an attacker tries to get out of the quoted region using a single quote, i.e., they use a URL like


http://servername/?n=foo');alert('xss

The input is sanitized and all single quotes are converted to &#39;. Unfortunately, this isn’t enough. An event handler executes in two contexts one after the other. The data in the page is first HTML decoded and the result is passed into a JavaScript context. So, as far as the JavaScript handler is concerned, ' and &#39; are exactly the same and this introduces an XSS hole.

The best thing to do is to never pass input data directly into an event handler — even if it has been treated. It’s better to store it as a the value of a hidden field and then let your handler pull the value out of that field. Something like this would be safer:

<?php
  $n = filter_input(INPUT_GET, 'n', FILTER_SANITIZE_SPECIAL_CHARS);
?>
<input type="hidden" id="old_n" value="<?php echo $n ?>">
<input type="text" value="" name="n" onfocus="do_something(document.getElementById('old_n').value);">

URL Context

A special case of the attribute context is URL context. The value of the href and src attributes of various elements are URLs and need to be treated as such. Special characters included in a URL need to be urlencoded to be safe in this context. Using an HTML specific filter is insufficient here as we’ve seen in the missing quotes example above.

Also take note of URLs in meta tags and in HTTP headers. For example, code similar to the following was also recently seen online:

<?php
  if(preg_match('!^https?://(\w+)\.mysite\.com/!', $_GET['done']) {
      header("Location: " . $_GET['done']);
  }
?>

On the face of it, it looks safe enough since we’re checking that the done parameter matches our domain before we redirect, however we aren’t validating the entire URL. An attacker could easily slip in a newline character and then add more headers, for example, a second Location header, or an entire HTML document for that matter. All it takes is a little %0a in the done parameter.

Notice that the match uses a / after .com. This is necessary to protect against user@host style URLs or third party subdomains. For example, a malicious user could create a subdomain called www.mysite.com.evil.com and trick your regex. Alternately, they could use a URL like http://www.mysite.com@www.evil.com/ and trick your regex.

If your URL contains only ASCII characters, then PHP’s FILTER_VALIDATE_URL filter can be used instead of funky regular expressions.

Remember: when writing out URLs, the & character is special in HTML, so it needs to be written out as &amp; (although most browsers will accept it if you don’t), while the ; character is special in an HTTP header, meaning that &amp; will break the header.

When dealing with URLs, figure out which context the URL will be used in, encode it correctly and possibly check the domain. When checking the domain, make sure you use a starts-with match, and include the trailing / to protect against user@host style URLs.

JavaScript Context

If input data needs to be written out in a JavaScript context, i.e., within <script> tags or in a file served as the src attribute of a <script> tag, the data should be JSON encoded. In PHP, the json_encode function can be used. The JSON homepage has a list of JSON libraries for many other languages, all of which have a similar function.

Simply escaping quotes using addslashes or something similar is insufficient, because within script tags quotes can also be represented by their HTML entity values.

One special case to think about in the JavaScript context is the use of web services that return JSON-P data. You do this on your web page by including a script tag that points to a web service and specify a callback function to be called when the data is loaded. For example, to load public photos from Flickr, you’d use something like this:

<script src="http://api.flickr.com/services/feeds/photos_public.gne?format=json&jsoncallback=myfunc"></script>

Before you do that, you’d define myfunc in JavaScript. However, what you’re doing is giving the script from Flickr full access to your page’s DOM. As long as the script respects its contract with you (i.e., the API), you should be safe, but if whoever controlled that script were to suddenly turn evil, you’ve just opened your users up to attack.

In general, only point your scripts tags to URLs that you fully trust, both to not be evil and also to never be compromised themselves. If you must include untrusted scripts, consider sandboxing them in an iframe or use Caja if you can. If you do use an iframe, then consider that there may be certain conditions under which you need to use a double-iframe. This is primarily done to prevent referrer leaking if your page’s URL itself is secret, like a search results page or a capability URL.

CSS Context

Internet Explorer is the only major browser around that allows script execution within CSS using the expression syntax (deprecated and no longer supported in IE8 and later). However, that’s still reason enough to worry about it. As an example, consider a website that allows users to customize the background of their profile pages, similar to MySpace or Twitter (note that neither website is vulnerable to this flaw). Let’s say that you accept a background color and/or image and assign that to the CSS background property. If you don’t correctly validate and sanitize the values passed in by the user, they could pass in a JavaScript expression instead of a real color. This might result in CSS code like this:

background: #28d expression("alert('xss')");

Making sure the background color the user specifies is a valid CSS color and nothing else will protect you from this kind of an attack.

With URLs, a different issue may come in to play. Let’s say that you allow the user to specify their own background image URL. You validate this URL when the user specifies it — to make sure it doesn’t return a 404 error. After this is done, the user could replace the URL with a script that returns a 401 HTTP status code. This makes the browser throw up an authentication dialog, which might confuse the user into entering their username and password of your site. An interesting attack that we haven’t seen outside of the lab.

The fix is to download the specified image to your own server and run some kind of transformation on it, most commonly for size. Even if your transformation does nothing, it can still remove malware that may be embedded in a JPEG.

Other Contexts

There are other contexts that we don’t look at in this article. These commonly deal with the back end and include things like an SQL context or a Shell context or a back end web service context. Another interesting attack that results from improper input validation is HTTP Parameter Pollution or HPP for short.

Should you filter on input or output?

The comments of my last article brought up an interesting point regarding whether data should be filtered on input or output. Since we have so many different contexts, it seems obvious that data should be filtered just before output depending on the context. Filtering for the wrong context could still introduce vulnerabilities. This is the ideal case where every programmer on your team knows what they are doing at all times and always programs with security in mind. In practice, this doesn’t always happen. Even experienced programmers have been known to slip up once or twice, and it’s those occasions that come back to bite you.

A simple guideline is to strip out all punctuation by default and let the web developer override this based on context. This means that using untreated input will either be safe, or not work at all, which serves as a reminder to the developer that they need to think about context. We encourage developers to validate data on input. This involves checking data types, ranges, lengths and possibly the character set/encoding in use. The purpose of validation is to make sure that we receive what we expect to receive. Data should be further sanitized on output depending on context. Sanitization involves transforming (possibly destructively) the data to be safe in the output context. Remember that sometimes a single piece of data may be used in multiple contexts on the same page.

Both validation and sanitization are types of filters to be run on input data, and often both might be required.

In closing

No data that comes in from an untrusted source should be trusted. This would include anything that you did not create yourself. The data may come in as command line parameters, through a query string, through POST data, cookies, HTTP headers, a web service call, an uploaded file, or anything else. If you did not create it, then it can’t be trusted. Validate all data to make sure it’s what you expect, and then treat it to make sure it’s safe in the context where it will be used. Be aware of the different contexts within a web page and keep your users safe.

References

  1. Cablegate security vulnerability
  2. XSS on ICICIDirect
  3. Cross site scripting in CSS
  4. PHP’s input validation and sanitization filters
  5. The Caja Project
  6. Capability based security
  7. HTTP Parameter Pollution
  8. HTTP 4xx status codes
  9. JPEG exploit beats antivirus software

Related Posts

You might be interested in the following related posts:

(vf)


© Philip Tellis for Smashing Magazine, 2011. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: , , , ,


Stunning Vexel Artwork

Advertisement in Stunning Vexel Artwork
 in Stunning Vexel Artwork  in Stunning Vexel Artwork  in Stunning Vexel Artwork

Vexel art can look stunning when given a lot of time, effort and thought. For those of you who didn’t know, “vexel” is the word we get when we combine the words vector and pixel. These two dimensions are complementary to each other and this unique blend is known to create great images. In today’s post, we have gathered a collection of very inspiring vexel art to enhance your artwork and workflow. Enjoy!

8 hour Skyline_Vexel by dangeruss

Th Vexel7 in Stunning Vexel Artwork

Ciudad entintada By Sergio-Daniel Garcia Leza

Th Vexel23 in Stunning Vexel Artwork

Monarch Butterfly by MChaos07

Th Vexel4 in Stunning Vexel Artwork

Bunny by Vilone

Th Vexel19 in Stunning Vexel Artwork

The pillow fight by cafeteriastudio

Th Vexel35 in Stunning Vexel Artwork

Gluttony by Wrong-Code

Th Vexel12 in Stunning Vexel Artwork

Digital Portraits Vexels By Kristy Anne Ligones

Th Vexel20 in Stunning Vexel Artwork

Chealse_88813 By Chealse V

Th Vexel6 in Stunning Vexel Artwork

Nissan-350Z-Vexel By Adilson Porto Jr

Th Vexel8 in Stunning Vexel Artwork

Sugar fish by mrbumbz

Th Vexel9 in Stunning Vexel Artwork

I Love DA by Queen-Uriel

Th Vexel5 in Stunning Vexel Artwork

law of Survival. by VermilionX

Th Vexel10 in Stunning Vexel Artwork

Contemplating.. by jawwneeee

Th Vexel11 in Stunning Vexel Artwork

Vexels-Selections By Natalie Sklobovskaya

Th Vexel13 in Stunning Vexel Artwork

Tropical by ghassan747

Th Vexel14 in Stunning Vexel Artwork

Vexel Landscape By Sean Boone

Th Vexel15 in Stunning Vexel Artwork

Scenery by Sumanartist

Th Vexel17 in Stunning Vexel Artwork

Gothic Girl by the2slayers

Th Vexel3 in Stunning Vexel Artwork

Citric explosion by mj-coffeeholick

Th Vexel16 in Stunning Vexel Artwork

The Best Damn Thing by afrikika

Th Vexel21 in Stunning Vexel Artwork

Pininfarina Birdcage By SmevDesign

Th Vexel22 in Stunning Vexel Artwork

Dance with the moonlight by xkisara

Th Vexel24 in Stunning Vexel Artwork

Emotionless By Mario Sánchez

Th Vexel25 in Stunning Vexel Artwork

The waiter by cafeteriastudio

Th Vexel26 in Stunning Vexel Artwork

Mojo Citrus by VAngelLJ

Th Vexel28 in Stunning Vexel Artwork

I dared to vexel by xkisara

Th Vexel29 in Stunning Vexel Artwork

Sparkle of Truth by fabulosity

Th Vexel30 in Stunning Vexel Artwork

Delta Goodrem by the2slayers

Th Vexel31 in Stunning Vexel Artwork

Milo Ventimiglia by o0tingeling0o

Th Vexel32 in Stunning Vexel Artwork

Vulnerable by shebid

Th Vexel33 in Stunning Vexel Artwork

I Think I Saw a Tear by casus-belli

Th Vexel2 in Stunning Vexel Artwork

Miyavi by Katala

Th Vexel34 in Stunning Vexel Artwork

Innocence by kristeli10

Th Vexel1 in Stunning Vexel Artwork

Looking up by IsabellaxParadise

Th Vexel18 in Stunning Vexel Artwork

(ik)


A Simpler Page

Want to design a book? There are mountains of beautifully designed examples to inspire you. But what about digital books? How do you create elegantly typeset, gloriously balanced reading experiences when tablets render type differently and support different fonts, text can extend in every direction, and type can change size? Craig Mod (Flipboard, Art Space Tokyo) addresses these questions and presents the initial release of Bibliotype, an HTML baseline typography library for tablet reading.

  •   
  • Copyright © 1996-2010 BlogmyQuery - BMQ. All rights reserved.
    iDream theme by Templates Next | Powered by WordPress