In a recent project I was working on a script interacting with an image map consisting of irregular areas and needed to find the center of each of these areas.
I couldn’t find a function to do that so I wrote my own. It’s pretty simple, but in case anyone else needs this I thought I’d share.
Posted in JavaScript.
 |
The hard work of front-end designers never ceases to amaze us. Over the last months, we’ve seen Web designers creating and presenting a plethora of truly remarkable CSS techniques and tools. We have collected, analyzed, curated and feature latest useful resources for your convenience, so you can use them right away or save them for future reference.
Please don’t hesitate to comment on this post and let us know how exactly you are using them in your workflow. However, please avoid link dropping, but share your insights and your experience instead. Also, notice that some techniques are not only CSS-based, but use HTML5, JavaScript, or JavaScript-libraries as well. Thanks to all featured designers and developers for inspiring, hard work.
Rotational Sliders
Eric Meyer shares six of his animated transforms that are capable of sliding around to a particular extent with non-centered transform origins.
Generating Organic Randomness with Prime Numbers and CSS
At first, you may be wondering why the heck is Alex Walker talking about cicada’s and Web design. Once taking a closer look, a sort of connection between the two evolves and a ‘cicada principle’ is born.
CSS3 3D Hologram
Being inspired by holographic effects that can be achieved with HTML/CSS, Hakim El Hattab has developed his own 3D box which alters perspective depending on device orientation. Note that this requires a webkit browser and has only been tested on iPhone. Also make sure to visit more of Hakim’s CSS/HTML5 experiments.
Checkerboard, striped & other background patterns with CSS3 gradients CSS3 Keyboard CSS3 Progress Bars Hover on “Everything Butâ€� Creating a Sphere With 3D CSS CSS3 Planetarium Natural Object-Rotation with CSS3 3D CSS Drop-Shadows Without Images Incrementable Length Values in Text Fields Beveled Corners & Negative Border-Radius with CSS3 Gradients Flexible Height Vertical Centering With CSS, Beyond IE7 Coding up a semantic, lean timeline CSS Border Tricks with Collapsed Boxes Quick Tip: Nonintrusive CSS Text Gradients Bokeh with CSS3 Gradients Different Transitions for Hover On / Hover Off Styling children based on their number, with CSS3 CSS Modal Rotating Feature Boxes When and How to Visually Hide Content How to avoid common CSS3 mistakes Introduction to CSS Escape Sequences Wrapping Long URLs and Text Content with CSS CSS Generated Content Controlling width with CSS3 box-sizing Revisit Hardboiled CSS3 Media Queries iPad Orientation CSS CSS Value Lengths, Times, Frequencies and Angles 320 and up CSS3 Generator – By Eric Hoffman and Peter Funk CSS Pattern Generator Griddle.it – Web page alignment made easy The 1140px Grid: Fluid down to mobile Fighting the @font-face FOUT CSS3 Github Buttons CSS3 Facebook Buttons Minimee Live.js Bootstrap.less Animatable: Create CSS3 animations and advertising for Webkit browsers Ceaser: CSS Easing Animation Tool Shower CSS Pivot Roots WordPress Theme Free Online CSS3 Typeset Style Generator CSSPrefixer Type-a-file A Best Practice Baseline for Your Mobile Web App Code Beautifier Markup Generator CSS Sprite Generator Respond Adapt.js – Adaptive CSS Firmin, a JavaScript animation library using CSS transforms and transitions Command-line CSS spriting Code Standards How to Manage CSS Explosion CSS: Innovative Techniques and Practical Solutions (vf) (ik) © Smashing Editorial for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
You’re probably familiar with CSS3 gradients by now, including the closer to the standard Mozilla syntax and the verbose Webkit one. I assume you know how to add multiple color stops, make your gradients angled or create radial gradients. What you might not be aware of, is that CSS3 gradients can be used to create many kinds of commonly needed patterns, including checkered patterns, stripes and more. Also, check out Lea’s CSS3 Patterns Gallery
Click in the box and start typing on your computer’s keyboard. Cleverly developed by Dustin Cartwright and Dustin Hoffman. You’ve got to respect the amount of time and effort which went into producing this demo.
A couple of nice progress bars created by Chris Coyier that use no images — just CSS3 fancies. In browsers that do not support CSS3, these progress bars will look more simplified.
A tutorial by Chris Coyier which shows us how easy adding a hover state to an element can be. In this case, the hover state is applied to everything but the element actually being hovered over.
With CSS3’s 3D transÂforms it’s possible to creÂate a sphere-like object, albeit with many elements. Paul Hayes shares his version of a 3D CSS sphere (works in the latest Safari and iOS) and provides us with the coding needed.
This demo highlights leading edge CSS3 and HTML5 features that Mozilla Firefox and the open web community push into modern Web browsers.
A tutorial by Dirk Weber that teaches us how to build a 3D packshot in HTML and CSS by applying some CSS 3D-transforms. By adding some Javascript, we can make the object freely rotatable in 3D space. And as we will enhance our Javascript with some touch-interactivity, the packshot will also work nicely in Safari for iOS-platforms like iPhone or iPad.
Nicolas Gallagher shares presents his CSS drop-shadows without any images.
Lea Verou explains how to implement a feature that allows you to increment or decrement a <length> value by pressing the up and down keyboard arrows when the caret is over it.
Beveled corners and simulate negative border radius without images, by utilizing CSS3 gradients once again — Lea Verou is amazed by how many CSS problems can be solved with gradients alone. Works on Firefox 3.6+, latest Webkit Nightly builds, Chrome and Opera 11.10.
Roger Johansson shares his thoughts on how to improve centering an element both horizontally and vertically with the display:table alternative.
This article tells you how to create a semantic lean timeline.
These border tricks tricks will help you to display content outside of the content box, over borders, without the use of images, CSS3 gradients or extraneous markup.
Jeffrey Way shows some ways for creating pure CSS text-gradients with a bit of trickery. The key is to use a mix of attribute selectors, webkit-specific properties, and custom HTML attributes.
Divya Manian uses the CSS gradients and shows the results of his work on a project which uses a bunch of circles as a decorative background.
Chris Coyier tries to acchieve “different transitions on mouseenter and mouseleave”, but he isn’t using JavaScript here; we’re talking about CSS :hover state and CSS3 transitions. Hover on, some CSS property animates itself to a new value; hover off, a different CSS property animates.
Lea Verou shows how to style children of elements based on their total number (that is, their total count).
Using CSS3 techÂniques a modal box can be creÂated withÂout JavaScript or images. With a bit of aniÂmaÂtion, tranÂsiÂtion and transÂform, it can be made that litÂtle bit more special. The problem: when you hit the “Back”-button after the modal has popped up and was closed, you’ll see the modal again. But maybe you’ll come with a way to fix it?
The full effect of it (with transition animations) will work in newish WebKit and Opera browsers and Firefox 4 (in real beta as of today). Any other browser will rotate the blocks without transition animation.
Visually hiding content on a web page, usually textual content, is at times a viable technique in web design and development. It can be done for several reasons, most importantly, to improve the experience of a screen reader user. Other reasons include improving readability when CSS cannot be rendered, and improving search engine optimization (SEO). Other exaples about using the Visually Hide Content are shown in this article.
The new features of CSS3 bring with them complexity and new things for us to screw up. This article will help keep us in check as we start using these new features.
Escape sequences are useful because they allow style sheet authors to represent characters that would normally be ignored or interpreted differently by traditional CSS parsing rules. In this article Mert Tol shows how to use these sequences.
To wrap long URLs, strings of text, and other content, you can just apply a carefully crafted chunk of CSS code to any block-level element .
Trevor Davis shows on some examples what you can do with the CSS generated content.
An incredibly useful CSS3 feature when you’re creating columns with floats is box-sizing. It lets you choose which box sizing model to use – whether or not an element’s width and height include padding and border or not. It makes it much easier to define flexible widths where you also need padding and/or borders. A typical example is laying out forms, which can be a real pain when you want flexible widths.
Shi Chuan takes a close look at boilerplates and helps us understand the math we need to tweak the width required for a good resolution to any particular device.
Keith Chu revises Cloud Four’s work and finds a way to alleviate extra HTTP requests, not iPad-specific as well as lack of reusability. In this post, he shares with us his proposed revision to the iPad orientation CSS.
In this article the authors go over all the math type units that can be applied as property values in CSS.CSS Tools
‘320 and Up’ prevents mobile devices from downloading desktop assets by using a tiny screen’s stylesheet as its starting point. Try this page at different window sizes and on different devices to see it in action.
This generator was proudly designed by Eric Hoffman and coded by Peter Funk.
Patternify is a simple pattern generator that enables you to not only build your patterns online, but export them with the base64 code, so you don’t even need an image file anymore. Just include the code in your CSS and you’re ready to go. Created by Sacha Greif.
A clean and simple way to help align your layouts. No complex grid frameworks necessary.Just put your dimensions after our URL to get a background guide image to work with in your browser. Grids are created on the fly, so any combination should work.
The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser.
Paul Irish’s 2011 update for the @font-face FOUT issue. Good news: Firefox 4 has no FOUT, IE9 does, and FOUT-b-GONE will help you out with that.
CSS3 Buttons is a simple framework for creating good-looking GitHub style button links.
CSS3 Facebook Buttons
On the Internets, speed is everything – which means that when it comes to CSS & Javascript files, size DOES matter. By automatically minimizing and combining your files for you, Minimee takes the heavy lifting out of keeping your files svelte.
one script closer to designing in the browser.
Bootstrap is a pack of mixins and variables to be used in conjunction with LESS, a CSS preprocessor for faster and easier web development.
Animatable is the easy way to create CSS3 animations and advertising for Webkit browsers on any platform or device — including Android, BlackBerry, iOS and WebOS.
Ceaser is an CSS Easing Animation Tool.
This 
This tool allows you to add CSS styles to any website, and share (and adjust) the result with a short link.
Roots is a starting WordPress theme made for developers that’s based on HTML5 Boilerplate, Blueprint CSS (or 960.gs) and Starkers that will help you rapidly create brochure sites and blogs.
An advanced generator of CSS buttons; the tools allows you to define font and color variations, shadows, borders, corners etc.
You hate writing vendor prefixes for all browsers? The CSSPrefixer does it for you.
This tool will give your Web typography a head start. Type-a-file is essentially a small collection of CSS stylesheets with heavy focus on rich and beautiful typography. The tool uses Typekit to preview the stylesheets, so if you have a Typekit-account, you could purchase the font license and have exact the same typography on your website.
Mobile Boilerplate is your trusted template made custom for creating rich and performant mobile web apps. You get cross-browser consistency among A-grade smartphones, and fallback support for legacy Blackberry, Symbian, and IE Mobile.
This tool allows you to format, clean up and optimize your stylesheets.
Markup Generator is a simple tool created for HTML/CSS coders that are tired of writing boring frame code at the very beginning of slicing work.
This tool allows you to create and maintain your CSS sprites.
A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)
Adapt.js simply checks the browser width, and serves only the CSS that is needed, when it is needed.
Firmin is a JavaScript animation library that uses CSS transforms and transitions to create smooth, hardware-accelerated animations.
The author shows, how to create CSS sprites from the command line alone.Last Click
This document contains normative guidelines for web applications built by the Interface Development practice of Isobar North America (previously Molecular). It is to be readily available to anyone who wishes to check the iterative progress of our best practices.
A very useful thread on StackOverflow on how to keep CSS files organized and clean.
Related Posts
The main goal of the article is to present powerful new CSS techniques, encourage experimentation in the design community and push CSS forward.
Post tags: CSS, css3, html5, javascript, techniques, tools
|
Recently we’ve been receiving more requests for carefully selected, useful round-ups. We try to avoid round-ups on Smashing Magazine, but sometimes the format is useful and — if the resources are relevant — can be extremely helpful. Besides, we are glad to drive traffic to some obscure, yet useful resources and thus support the developers of these resources.
In this round-up, you’ll find some of the useful JavaScript and jQuery tools, libraries and plugins that we have stumbled upon recently. Hopefully, you’ll find them valuable for your upcoming projects. Among other things, you’ll find handy services and online utilities, recently released JavaScript libraries and jQuery plugins.
You might want to take a look at the following related posts:
Respond.js: Fast CSS3 Media Queries for Internet Explorer 6-8 and More
The goal of this script is to provide a fast and lightweight script to enable responsive Web designs in browsers that don’t support CSS3 Media Queries. In particular, Internet Explorer 8 and under.
Blackbird: Open Source JavaScript Logging Utility
Blackbird offers a dead-simple way to log messages in JavaScript and an attractive console to view and filter them.
Treesaver.js
Treesaver is a JavaScript framework for creating magazine-style layouts using standards-compliant HTML and CSS. It is free for all uses and made available under the MIT or GPLv2 licenses.
Bibliotype
Bibliotype is a (very) simple HTML, CSS and JS based library for rapid prototyping long-form typography and reading on tablets.
Highcharts – Interactive JavaScript charts
Highcharts is a charting library written in pure JavaScript, offering an easy way of adding interactive charts to your web site or web application. Highcharts currently supports line, spline, area, areaspline, column, bar, pie and scatter chart types.
jStat: a JavaScript statistical library
jStat is a statistical library written in JavaScript that allows you to perform advanced statistical operations without the need of a dedicated statistical language (i.e. MATLAB or R).
highlight.js
Highlight.js highlights syntax in code examples on blogs, forums and in fact on any web pages. It’s very easy to use because it works automatically: finds blocks of code, detects a language, highlights it.
Visual Event JS Library
Events in Javascript are often seen as a bit of an enigma. This is odd given that Javascript is very much an event driven language, but it is typically down to their complex nature and difficulty to debug. To this end the author created Visual Event to help track events which are subscribed to DOM nodes.
Underscore.js
Underscore is a utility-belt library for JavaScript that provides a lot of the functional programming support that you would expect in Prototype.js (or Ruby), but without extending any of the built-in JavaScript objects.
Popcorn.js
Popcorn.js, is a HTML5 javascript library for integrating the web into video production.
SlickGrid!
SlickGrid is a JavaScript grid/spreadsheet component.
JavaScript InfoVis Toolkit
The JavaScript InfoVis Toolkit provides tools for creating Interactive Data Visualizations for the Web.
Handlebars.js: Minimal Templating on Steroids
Handlebars provides the power necessary to let you build semantic templates effectively with no frustration. You might want to read ThinkVitamin’s article Getting Started with Handlebars.js, too.
Backbone.js
Backbone supplies structure to JavaScript-heavy applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing application over a RESTful JSON interface.
Load JavaScript and Stylesheets on Demand | SidJS
SidJS is a lightweight JavaScript library used to load JavaScript scripts and CSS stylesheets on demand. It increases AJAX applications performance by loading resources when they’re needed.
OpenFaces
OpenFaces is an open-source library of AJAX-powered JSF components, an Ajax framework and a client-side validation framework. OpenFaces is based on the set of JSF components formerly known as QuipuKit. It contains fully revised codebase of QuipuKit and introduces many new components and features.
d3.js
D3 allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document.
Tempo: JSON rendering engine
Tempo is a tiny JSON rendering engine that enables you to craft data templates in pure HTML. It not only makes AJAX content easier to work with but also manages clear separations of concerns, i.e. no HTML in your JavaScript files!
Art Deco – Selectable Text
A quick proof-of-concept of split typography, based on Pierre Fix-Masseau’s Art Deco style. The challenge here was to achieve ‘split letters’ as part of a Web page layout, while retaining the ability to select text.
Using Less.js to Simplify Your CSS3
LESS is an amazing little tool that extends CSS with the addition of variables, mixins, operations and nested rules.
PhantomJS: Headless WebKit with JavaScript API
PhantomJS is a headless WebKit with JavaScript API. It has fast and native support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG.
TestSwarm: Continious & Distributed JS Testing
TestSwarm is an open source project by Mozilla Labs (and created by John Resig) which aims to simplify the complicated and time-consuming process of running JavaScript test suites in multiple browsers. It offers a continious & distributed testing environment that can be used by multiple users running the tests in various browsers with a “set-and-forget” logic.
Minimee
On the Web, speed is important — so when it comes to CSS and JavaScript files, size does matter. By automatically minimizing and combining your files for you, Minimee takes the heavy lifting out of keeping your files nice and clean. Minimee is an ExpressionEngine add-on only.
Doctor JS
Doctor JS is a tool which analyzes your JavaScript code. The tool tests how well your code is written in regards to polymorphism, prototypes, exceptions and callbacks. You might want to check out JSLint as well.
Remy Sharp’s JSConsole
A JavaScript (and CoffeeScript) web console, useful for quick experimentation, debugging, presentations (for live coding) and workshops. Also available as a native iOS app from the iTunes store.
JavaScript Library Boilerplate
Why go through the tedium of creating both a closure AND a .noConflict method when all you want to do is create your own JavaScript Library? With JavaScript Library Boilerplate, you can hit the ground running and create your own JavaScript Library in no time!
jsdoc-toolkit
JsDoc Toolkit is an application, written in JavaScript, for automatically generating template-formatted, multi-page HTML (or XML, JSON, or any other text-based) documentation from commented JavaScript source code.
Jasmine: BDD for your JavaScript
Jasmine is a behavior-driven development framework for testing your JavaScript code. It does not depend on any other JavaScript frameworks. It does not require a DOM. And it has a clean, obvious syntax so that you can easily write tests.
ObfuscateJS: JavaScript compressor
The obfuscator currently removes whitespace and comments. It renames variablenames with a local scope to a shorter version, And as an advanced option it renames all variables with a certain prefix to a shorter name.
Online JavaScript beautifier
This beautifier will reformat and reindent bookmarklets, ugly javascript, unpack scripts packed by the popular Dean Edward’s packer, as well as deobfuscate scripts processed by javascriptobfuscator.com.
PEG.js
PEG.js is a parser generator for JavaScript based on the parsing expression grammar formalism. It enables you to easily build fast parsers which process complex data or computer languages. You can use it as an underlying tool when writing various data processors, transformers, interpreters, or compilers.
JSONView
JSONView is a Firefox extension that helps you view JSON documents in the browser.
jsPerf: JavaScript performance playground
jsPerf aims to provide an easy way to create and share test cases, comparing the performance of different JavaScript snippets by running benchmarks.
JSonduit
JSonduit is a service that can turn practically anything on the web into a JSON feed that any website or mobile app can consume.
jsplumb
jsPlumb provides a means for a developer to visually connect elements on their web page, in much the same way you might have seen on Yahoo Pipes. It uses Canvas in modern browsers, and Google’s ExplorerCanvas script for stone-age browsers. The current version (1.2.5) can be used with jQuery, MooTools and YUI3.
Helma
Helma is a server-side JavaScript environment and web application framework for fast and efficient scripting and serving of your websites and Internet applications.
HTML + JSON Report
Online HTML5 JSON Report format to view any JSON data in a human-readable HTML view.
JSON Editor
This editor allows for easy editing of json strings, after loading a sample from the dropdown list click ‘build tree’, expand the tree, click nodes and start changing.
JSCSSP, a CSS parser in JavaScript
JSCSSP is a CSS parser written in cross-browser JavaScript. It parses a string containing CSS styles and outputs a CSS Object Model (warning: not the CSS Object Model). It can preserve some comments, at-rules and style rules that your browser does not recognize and trashes, and even whitespaces if you absolutely need to preserve indentation and blank lines.
sausage.js
Sausage is a jQuery UI widget for contextual pagination. It complements long or infinite-scrolling pages by keeping the user informed of her location within the document.
jQuery Waypoints
Waypoints is a small jQuery plugin that makes it easy to execute a function whenever you scroll to an element.
Pietimer jQuery Plugin
Pietimer injects a canvas element into the page which has an ever reducing pie shaped timer.
ImageLens: a jQuery plug-in for Lens Effect Image Zooming
You can use this jQuery plug-in to add lens style zooming effect to an image.
Timeglider jQuery Plugin/Widget
Timeglider is a zooming, panning data-driven timeline — great for history projects, project planning or any other tasks where you’ll need to display a time frame.
960 Grid on jQuery-Mobile
A port of a 960 grids to use in jQuery mobile. It aims to bring more flexibility to jQuery-mobile layouts and thus makes it easier to use on tablets. The code is available on Github under MIT license.
diagonalFade jQuery plugin
A jQuery plugin allowing you to easily specify direction, fade-in, fade-out, and a host of other options to a grouping of elements.
Wijmo jQuery UI Widgets
Wijmo is a complete kit of over 30 UI widgets with everything from interactive menus to rich charts. If you know jQuery, you know Wijmo. Complete with documentation and professional support, every widget is hand-crafted and includes premium themes.
Lettering.js – A jQuery Plugin for Radical Web Typography
CSS does not offer a complete down-to-the-letter control. Here you’ll find kerning type, editorial design, manageable code and complete control — just a few examples of what can easily by done with Lettering.js.
jslide
jslide is a jQuery plugin to create a simple slideshow of list elements, containing either images or other content.
Isotope: A jQuery Plugin for Magical Layouts
An exquisite jQuery plugin for magical layouts. Enables filtering, sorting, and dynamic layouts. Isotope’s capabilities are designed to be used together cohesively. You can do it all — filter, sort, change layout modes, add items — and Isotope will handle it with ease.
Better Check Boxes with jQuery and CSS
In this short tutorial, the authors will create a replacement for the default browser checkboxes in the form of a simple jQuery plugin.
Thumbnails Navigation Gallery with jQuery
In this tutorial the authors are going to create an extraordinary gallery with scrollable thumbnails that slide out from a navigation. They are going to use jQuery and some CSS3 properties for the style.
jQuery Quicktag
Quicktag is a tagging plugin for the jQuery JavaScript library.
DataTables (table plug-in for jQuery)
DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table.
jQuery Tags Input
This plugin will turn your boring tag list into a magical input that turns each tag into a style-able object with its own delete link. The plugin handles all the data — your form just sees a comma-delimited list of tags.
jquery.timepickr.js
a jQuery library that enhances a date picker input area with a more convenient date selection.
JavaScript Commodore Emulator
This emulator is meant as a ‘proof of concept’ and uses the HTML5 Canvas-element to render the Commodore 64 screen layout.
BreakDOM
A remix of the classic Breakout game. This one will keep you busy for a while.
© Smashing Editorial for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: javascript, jquery, tools, useful
A while ago I posted Tips for creating enterprise-level HTML, CSS and JavaScript, where I mentioned a few examples from the Enterprise CSS, Enterprise HTML, and Enterprise JavaScript sites.
The examples on those sites are meant to be ironic, showing what not to do. Some readers have contacted me because they feel that the irony isn’t completely obvious and are worried that people getting started in front-end web development would misinterpret the “tips�. They do have a point, so I thought I’d bring up a few of the examles from the Enterprise CSS/HTML/JS sites and explain why I think they are bad examples.
Posted in (X)HTML, CSS, JavaScript.
|
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.
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.
Full image (from xkcd)
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.
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.
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.
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 '. 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 ' 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);">
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 & (although most browsers will accept it if you don’t), while the ; character is special in an HTTP header, meaning that & 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.
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.
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.
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.
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.
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.
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: filtering, hpp, javascript, security, xss