Christian Heilmann

Posts Tagged ‘security’

TTMMHTM: Alt attributes, social media tips, security and Germans vs. IE

Saturday, January 16th, 2010

Things that made me happy this morning:

Things you can use – my talk at the Deveoper Evening with Yahoo and Opera in Oslo, Norway

Thursday, December 3rd, 2009

I am currently in (freezing) Oslo in Norway and about to leave for the NITH university for the Yahoo and Opera developer evening. Here are the slides and notes of what I am about to present tonight. Audio will follow laterAudio is now available.

For those who will attend tonight: stop right here, you’ll just spoil it for yourself :)



The audio recording is available on or as a 54MB MP3 file.


Things you can use (by the Yahoo Developer Network and friends)

In the following hour or so I will be talking to you about some of the things that have been done for you that you can build on. Web development is confusing enough as it is. There is no need to make it more complex by not using what has been done for us already. But first, a few facts about me:

I am Chris and I’ve been developing web sites for about 12 years. I’ve worked with numerous frameworks and CMS and I’ve delivered various international and high-traffic sites. I’ve written several books and dozens of articles and hundreds of blog posts on the subject of web development, accessibility, performance, maintainability, internationalization and many other things I had to battle in my day to day job.

Right now I work as a Developer Evangelist, which is a pretty new job in the market and as many people were confused about it, I wrote a Developer Evangelism Handbook which is free and creative commons online, but you can also buy a hard copy on

I work for the Yahoo Developer Network and you will find most of the things I will talk about today there.

Learning the basics

The good thing about these days we live in is that we have great resources on the web to learn good basics of web development. That we still learn it by viewing source and trial and error after copy and paste is human nature but also keeps us from evolving. The Opera Web Standards curriculum is an amazing resource to learn web standards based development (as is the WaSP interact) and the Yahoo Developer Network theatre is full of videos of talks and tutorials. All of this is free to use and to build upon.

Starting with a clean canvas

One thing I learnt is that in order to deliver products that work and are fun to maintain you need to work on a solid base. Web development is hindered by the fact that our deployment environment is totally unknown to us. This is why we need to even the playing field before we should go out on the pitch to play.

You achieve this by defining what you call “support” for browsers. In the case of Yahoo this is the graded browser support document. If you aim to make your web product look and work the same on every browser out there you are doing it wrong. Web design is meant to go with the flow and accustom itself to the ability of the user agent (browser in most cases). At Yahoo, we have the Graded Browser Support for this – browsers that are not capable of supporting new technologies will not get them. Web sites are not meant to look and work the same everywhere. On the contrary – the ability to accustom the interface to different user agents is what makes web development so powerful.

CSS frameworks and frontend libraries

The next step is to free ourselves from the limitations of browsers and especially their differences. This is what CSS frameworks and front end libraries like jQuery, Mootools, Dojo, YUI and many more are for. All of these have the same goal: allow you to build code that is predictable and limited to the bare necessities. We should not have to bloat our code just to make our products work with random browser implementation problems. These are a moving target as there is all kind of weirdness happening across the board. Libraries make our job predictable and allow us to use web standards without catering for browsers. If you build your code based on libraries you can fix your product for the next browser by upgrading the library. If you choose to do everything yourself – good luck.

Building interfaces that work

The next thing to consider is that an application interface is not just the look and feel. In order to make it work for everybody we’ll need to understand the ways users interact with our products. This includes simple usability (not overloading the user, not confusing the user) but also means knowing about different interaction channels – for example keyboard users. A great resource for starting the journey towards usable interfaces is the Yahoo Design pattern library. There we collected information how our end users use the web and reach a goal easily. If anything, have a look at these patterns before you start building your first widget or application. They even come with stencils for different designer tools.

Using the web

The big change in web development over the last few years was that we stopped trying to do everything ourselves. The web is full of specialized systems such as YouTube, Flickr and Google Maps that allow you to host data in specific formats and make it dead easy for you to convert and re-use that data in web formats. Using this information happens via Application Programming Interfaces or short APIs. These allow you to demand data in a certain format and get back only what you need. There are hundreds of APIs available on the web. For an idea of what is available, check out

Thinking data first

The main thing to be aware of if you want to build great products is to separate your data from your presentation. This is essential to allow for localization, internationalization and to keep your code maintainable. In the case of a mashup of different data sources this means you need to think about making it as easy as possible for you to use different APIs. The complexity of your product increases with the number of APIs you use. Every API has different ways to authenticate, expects different parameters and returns data in different formats.

Mixing the web with YQL

YQL is a solution that Yahoo built for its own needs. All of our products are built on APIs – for scalability reasons. Having to learn all these APIs and negotiating access cost us a lot of our time so we thought we’d come up with a better solution. This solution is called YQL. YQL is a SQL-style language to get data from the web. The following query would get us photos of London from flickr:

select * from geo.places where text=”london”

Or would it? Actually it would give us photos with the text “london” and not photos taken in Oslo. If we wanted that we need to use another API. The Yahoo Geo APIs allow you to define any place on earth and get it back as a “where on earth ID” or short woeid. This format is supported by flickr, so we can use these APIs together. Twitter will also soon support this.

select * from where woe_id in (
select woeid from geo.places
where text=”london”

This gives you some data of the photos you want to show but not all, so let’s use another API method to get that information.

select * from where photo_id in(
select id from where woe_id in(
select woeid from geo.places where text=”london”


This is a lot of data so in order to only retrieve what we really need we can filter the data down by replacing the *:

select farm,id,secret,owner.realname,
from where photo_id in(
select id from where woe_id in(
select woeid from geo.places where text=”london”


Using this query in the YQL console, choosing YQL as the output format and “flickr” as the callback will give us a valid URL to use in a browser or script:

Using this in the src attribute of a script tag and writing a few lines of Dom Scripting displays the photos.

Is this limited to Yahoo?

No, of course not. First of all you can use any data on the web as a source using the atom, csv, feed, html, json, microformats, rss and xml tables.

Scraping HTML with YQL

The HTML table is quite interesting as it allows you to get data from any HTML document, cleans it up by running it through HTML Tidy and then allows you to access parts of it using XPATH.

This allows you for example to take a simple web site like this one about TV jokes and turn it into a wiget to include into other pages with a few lines of JavaScript.

Extending YQL

You can also add your own data by providing a simple XML schema called an open table. In this schema you need to tell YQL what the data endpoint is, what parameters are expected and what gets returned.

Open tables also allow for an execute block which allows you to write JavaScript that will be executed by YQL on the server side using Rhino and has full e4x support.

Using this we can turn the earlier example of the Flickr photos returned as a list into an open table and make it much easier to get Flickr photos in the right format:

select * from flickr.photolist where text=”me” and location=”uk” and amount=20

Using the JSON-P-X output this means we can simply use innerHTML to render out photos.

If you want your tables to be available in YQL, all you need to do is to add to the open tables repository on GitHub. For more information, check out the YQL documentation.

Building with Blocks

The best thing you can do right now if you want to build a web application is using already tested and working building blocks. The Yahoo User Interface library is full of these as this is exactly how we build our own tools.

For creating layouts with CSS without having to know all the hacks that browsers need you can use the YUI grids and if you are really lazy you can even use the WYSIWYG grids builder.

Using the CSS grids and some of the YUI widgets it is very easy to build a working application that is tested across all the browsers defined in the graded browser support. Examples are this geographical Flickr search and a showcase to get information for Delhi.

One thing that is really useful about the widgets provided in YUI is that they are all driven by custom events. That way you can extend and change their functionality without having to mess around with the code. Simply write an event listener for the custom event, add your functionality and prevent the original functionality.

Another great benefit of YUI is the very detailed documentation and the hundreds of examples you can use to get you started.

Wanna get super famous?

The last thing I want to talk about today is the Yahoo Application Platform or short YAP. Using YAP you can build a web application using JavaScript, HTML and CSS and add it to the Yahoo Homepage, My Yahoo and in the future even more properties of Yahoo.

You start at and develop your application to the largest part in your Applications Dashboard. Yahoo apps have two views: a small view which is more or less static (but allows for some Ajax) and a large view which gives you full access and much wider screen space. The small view is overlayed over the Yahoo page and will show Yahoo ads next to it. The large view can be monetized by you.

One thing that can be a bit of a frustration about YAP when you go at it with a normal web development mindset is that not all CSS/HTML and JavaScript is allowed as YAP uses Caja to keep our applications secure. Therefore we’ve put together some Caja-ready code examples to get you on track.

The easiest way to build YAP apps is by using the Yahoo Markup Language (YML) and YUI as YUI was re-written to be Caja compliant.

If you want to take a look at what a YAP application looks like, check out the source of TweetTrans on GitHub. In essence it is a simple PHP API call using YQL and a YML interface to display the results using Ajax. No JavaScript involved as YML does that for us.

You can install TweetTrans by clicking the following link: This is also the way to promote your own applications (simply replace the application ID with yours) until the YAP application gallery is up and running.

The more powerful way of promoting your application in Yahoo is to piggy-back on our social connections and you can do this by diving into the social graph API. The easiest way to do that is to use the social SDK also available on GitHub. Notice that the SDK will not work on a localhost – you need to run it inside the application dashboard or a Yahoo container on the homepage.

Elevator pitches

Yahoo User Interface Library – YUI

YUI is the system that Yahoo uses to build its web sites. It is constantly tested to work for the largest amount of users, free, open source and covers everything from design patterns to out-of-the-box widgets. It is modular and you can use only what you need. You can either host it yourself or get it from a network of distributed servers.

Yahoo Query Language – YQL

YQL is a web service that allows you to mash-up any data on the web from various sources with a simple SQL-style language. You can filter the data down to what you need and you can convert the data with server-side JavaScript before returning it. Data providers can use YQL to publish an API on the web on top of Yahoo’s infrastructure and cloud storage.

Yahoo Application Platform – YAP

YAP is the Yahoo Application Platform which allows you to build applications that run on the Yahoo homepage and soon other properties. You can dive into Yahoo’s social graph to promote your applications and you can create highly secure web apps as YAP uses Caja to ensure code quality.

Liberté, Accessibilité and Securité – that was Paris Web 2009

Tuesday, October 13th, 2009

Last week I went to Paris, France to speak at a Yahoo Developer Network event and Paris Web. Paris Web is a web development, design and accessibility conference that runs for the fourth year (I think) and I’ve been speaking there for the third time.

My presentation – basic housekeeping

Originally I planned to speak about my favourite topic – the web of data and how to use it – but the organisers had other plans for me. Normally I hate changing my topic and being asked to do specials but I have a fond spot for Paris Web so I talked about web security instead. The slides of my “basic housekeeping” talk are available on SlideShare:

In the talk I covered some very basic measures you can take to protect your web site from becoming a spam hub, part of a botnet or simply get spammed. I pointed out the following mistakes people make:

  • Underestimating the severity of web application security holes – it is not about your server but also about users who use the same passwords all over the place.
  • Keeping folders listable and thereby allowing people to find vulnerable scripts and dig into data they shouldn’t be able to see (the example I showed was failing to protect their /cgi folder and thus allowing full access to an admin section and listing their DBs)
  • Allowing search engines to index admin sections of web applications (I proposed using robots.txt but as one attendee pointed out in the Q&A protecting with .htaccess makes a lot more sense)
  • Keeping error messaging on and thus allowing people to gain insight into your server setup
  • Having an insecure PHP setup with globals enabled which would allow for overriding security checks and remote code injection (using phpsecinfo can help you find these issues)
  • Blindly relying on software and not testing installs. Also, not overriding preset users and passwords (as an example try the user and password “builtin” on any Ektron-powered web site)
  • Not keeping installs and plugins up-to-date
  • Relying on HTML as a source of data for JavaScript/Ajax (I can easily manipulate this in Firebug)
  • Relying on JavaScript – you can’t and if you use it as the only means of validation turning off JavaScript allows attackers to inject any kind of data.
  • Leaving information inside the HTML by commenting out in HTML - always comment on the server side.
  • Not filtering inputs.
  • Trying to filter instead of whitelisting
  • Allowing for inclusion into iframes and thus allowing for clickjacking.
  • Failing to provide easy to use and stress-free interfaces and thus allowing for social engineering (“This is too hard for you, give me your password and I will fill this out for you”).
  • Staying authenticated and logged in over a longer period and thus allowing attackers to make you click on web sites that contain CSRF traps (the example was demo code that could get protected Twitter updates).
  • Giving users the impression that you are the one responsible for security instead of it being the job of both the user and the site provider.
  • Relying on Captchas as a sole measure against bot attacks (check PWNtcha for a captcha cracking tool).
  • Not keeping their software up-to-date
  • Not periodically checking their logs for hacking attempts.

I then quickly went over some of the ideas we now have in place to make the web easier to use and at the same time safer: Guest Passes, One-off logins, oAuth, OpenID and Caja.

I explained the security threats and trends in phishing social networks, the mobile web, camera access, geo location access and biometric recognition.

I had good feedback and I love speaking in France. You can make jokes and people are happy to laugh out loud when you bring up things that are just not expected.

The rest of the conference

This is a general thing at Paris Web. The speakers do not only really know what they are talking about but are also happy to be unconventional when it comes to presenting. Whilst the slides of ParisWeb do only hint at that you can find some very cool photos of what is going on there.

Paris Web 2009 : Day 2 by  ~Thanh.Paris Web 2009 : Day 2 by  ~Thanh.

Also check out the video:

The location is very luxurious (IBM’s HQ in France) and has all the latest systems you need for presenting – microphones, a great projection system, on-stage monitors, live translation and so on. The catering was very impressive and the food was – well, it is France, we don’t need to say more.

Double budget approach

The other great thing that Paris Web does that other conferences should copy is that on the day after the conference there are workshops with the speakers who are happy to give them for a very low price (last year it was 10 Euro, not sure what it was this year). This allows students that cannot afford the main conference to come only on Saturday and still take advantage of the experts coming to Paris.

All in all I am always very proud to be part of the conference and to see the enthusiasm and great things that happen in France when it comes to advocating web standards, future technologies and ways to work professionally as web designers. The strong streak of accessibility and usability that compliments the high-tech talks makes it a useful conference for anybody who creates any work on the web.

Alas, there is one issue.

The language barrier

As the conference is held predominantly in French, a lot of the great insights, information and practices is lost for non-francophones. This is a shame as I am very impressed with the pragmatic approach of the talks. There is not much “blue sky” thinking but very down-to-earth information on how to build better products, how to talk to your boss in the right way, how to make web development an important part of your company’s portfolio and a lot of talks about quality of our work and pragmatic accessibility. All the talks are filmed and recorded and it would be a great step for Paris Web to translate the transcripts – maybe that is something that can be done with crowdsourcing?

Introduction to Yahoo Open Applications

Sunday, October 11th, 2009

Last week I was in Paris for a Yahoo Developer Network evening and Paris Web and one of the talks I gave was an introduction to Yahoo Open Applications. These are applications that you can embed in the Yahoo homepage or My Yahoo and thus allow you to reach millions of users – or extend the Yahoo homepage with your own personal app. Here are the slides and the audio recording of the talk delivered by Sophie Davies-Patrick (aka “my boss”) and me at La Cantine in Paris:

Yahoo Open Applications use the Yahoo Application Platform – YAP. In essence, you write a small app using CSS, JavaScript and HTML and it will get embedded into the Yahoo Homepage.

TweetTrans – translate Twitter updates

The example I showed was a tool that adds little translation links to a Twitter stream:

The code of TweetTrans is available on GitHub and I’ve built it initially as a bog-standard Ajax web application.

The main step afterwards was to convert the app over. This is less hard than it seems upfront but the fact that YAP uses Caja to make the whole application more secure means you need to restrict yourself. Things you cannot use are:

Caja and HTML

  • Custom attributes
  • Custom tags
  • Unclosed tags
  • javascript:void(0)
  • Radio buttons in IE
  • Relative URLs

Caja and CSS

  • star hacks
  • _ hacks
  • IE conditionals
  • Insert-after clear fix
  • expression()
  • @import
  • Background images in IE

Caja and JavaScript

  • eval()
  • new Function()
  • Strings as event handlers (node.onclick = ‘...’;)
  • Names ending with double / triple underscores
  • with function (with (obj) { ... })
  • Implicit global variables (specify var variable)
  • Calling a method as a function
  • document.write
  • window.event
  • OpenSocial return JS

Get the SDK

The easiest way to build Yahoo Open Apps is to use YML which is a markup language that gives you access to the Yahoo social connections and creates Ajax functionality for you without having to write any JavaScript.

If you want to use the full Yahoo social stack the best place to start is to download the SDK which makes the oAuth authentication very easy for you.


Once you have your app done you can easily make people install it by sending them a link. This link contains the application ID. In the case of TweetTrans this is:

More info

To get more information, check out the YOS section on the Yahoo Developer Network and the forums on YAP.

TTMMHTM: 8 bit lego animation, blind phreaker, code collaboration, uk postcodes and SVG for IE

Monday, August 24th, 2009

Things that made me happy this morning: