karlcow

Promoting interoperability is at the heart of Open The Web.

Web standards

• WhatWg summary - Base64, model trains, Web Workers & the DOM, captions, …
• Webkit Summary - JavaScript Full Screen API, Navigation Timing and repeating CSS Gradien
• Microsoft participation in W3C “Microsoft, as part of its ongoing focus on interoperability, is committed to the W3C and we currently have had some 66 participants in 38 technical groups.”
• The Ambiguity of “Open” and VP8 vs. H.264
• Change of name, video bandwidth, Change Proposals, and XSS
• W3C Public Newsletter, 2011-01-17

Javascript

• Feature detection is not browser detection
• Obscure javascript

I18N

• Copy and Paste Character

CSS

• CSSOM, Vars, Mixins, Nesting, and Modules
• CSS Variables and mixins, Interactive Validation and pre-rendering

HTML5

• There is a new logo

Mobile

• Mobile entrepreneurs in Africa
• Mobile browser shares 1/4 “The basic pattern we’ll see in this article is Opera being hugely in the lead and Nokia following at a respectful distance.”

Semantic Web

• Getting Started with RDF and SPARQL Using 4store and RDF.rb
• CubicWeb is a semantic web application framework, licensed under the LGPL, that empowers developers to efficiently build web applications by reusing components (called cubes) and following the well known object-oriented design principles.
• Write Web of Data
• Retours à chaud sur SemWebPro and Sem Web Pro (both in French)

Web Accessibility

• Death to Captchas

Auth

• Yahoo! Opens to Third-Party Authentication with Facebook/Google IDs

Opera

• Opera Tokenizer Performances

User Agent sniffing is bad most of the time. It creates a lot of issues. It relies on the idea that a Web site should be working only for a few browser vendors. But User Agent sniffing becomes really unacceptable when the site definitely exclude specific browsers based on their user agent string. Even more so when we realize that once the user agent string has been spoofed, it is possible to access and use the content of the Web site.

Let’s take an example from last week, the exact domain name is not important, so let’s call it: http://bad.example.com/. It always starts with one or more bug reports of Opera users saying. I’m a customer of the company Bad Inc. and I’m not able to access the Web site with my browser. Then, we check if it’s a bug in Opera or an issue with the Web site. curl is a wonderful tool to quickly test what’s goint in between the browser and the server.

So let’s start. We check with Firefox, Safari and Opera and look what is working and not working. The combination is not always the same. In this case it was working with Safari, Firefox and not working in Opera. Let’s switch to the command line. The option I in curl creates a HEAD HTTP request.

% curl -sI http://bad.example.com/
HTTP/1.1 404 Not Found

That means that the server is clearly doing “whitelist” user agent sniffing. It allows only what it knows and blocks the rest. Let’s try with a Webkit user agent string.

% curl -sI -A "Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_5; de-de) AppleWebKit/534.15+ (KHTML, like Gecko) Version/5.0.3 Safari/533.19.4" http://bad.example.com/
HTTP/1.1 200 OK

It is working and with Opera?

% curl -sI -A "Opera/9.80 (Macintosh; Intel Mac OS X 10.6.6; U; fr) Presto/2.7.62 Version/11.00" http://bad.example.com/
HTTP/1.1 404 Not Found

Not working. At this point the issue is clear the next step will be to contact the site and ask them to modify their server side user agent sniffing to include Opera or even better to include everyone else. But I was wondering what exactly triggered the user agent sniffing. For example, I tried to reduce the user agent string to Mozilla only.

% curl -sI -A "Mozilla" http://bad.example.com/
HTTP/1.1 404 Not Found

Not working that’s not it. What about Gecko?

% curl -sI -A "Gecko" http://bad.example.com/
HTTP/1.1 404 Not Found

Not working either… hmmm… ok one more try.

% curl -sI -A "Mozilla Gecko" http://bad.example.com/
HTTP/1.1 200 OK

Bingo! But what about IE it doesn’t have Gecko in its user agent string. after trial and errors I got

% curl -sI -A "Mozilla MSIE 6" http://bad.example.com/
HTTP/1.1 200 OK

with MSIE n, where the n >= 6. Put a 5 in there and it stops working. I thought ok that’s interesting what about adding these strings to Opera.

% curl -sI -A "Opera/9.80 (Macintosh; Intel Mac OS X 10.6.6; U; fr) Presto/2.7.62 Version/11.00 Mozilla Gecko" http://bad.example.com/
HTTP/1.1 404 Not Found

Hmmm. oh! One more try

% curl -sI -A "Mozilla Opera/9.80 (Macintosh; Intel Mac OS X 10.6.6; U; fr) Presto/2.7.62 Version/11.00 Gecko" http://bad.example.com/
HTTP/1.1 200 OK

Bingo! The site is working. Big smile and then head banging on the table on realizing how it is dumb. What did I say? ah yes, do not use user agent sniffing if you do not know what you are doing.

Promoting interoperability is at the heart of Open The Web.

If you had missed the topic of the week is Google planning to drop the support of H264 in Chrome. I’ll spare you the links, there were plenty all over twitter.

Web standards

• Navigation Timing defines an interface for web applications to access timing information related to navigation and elements. And an experiment from Google
• Chrome will stop support for H264
• 25th anniversary of the IETF

I18N

• 7 Tips and Techniques For Multi-lingual Website Accessibility
• InputKing, Online Input System is a web-based multilingual input method editor (IME). Google’s version

CSS

• Introduction to CSS Escape Sequences
• CSS3 Flexbox vs A Princess Bride

HTML5

• Version 1.3 of the Validator.nu HTML Parser Released
• Wrapping Things Nicely with HTML5 Local Storage
• Using ARIA instead of IDs in HTML
• What the heck is shadow DOM?
• What is happening with XBL?

Web APIs

• How to Use JavaScript Shared Web Workers in HTML5

• Web Audio API

Mobile

• 2010 Mobile browser stats
• Mobile OS usage splits the world (chart)

HTTP

• LOL Verbs and Gripes in URIs, Again
• Agent driven conneg in HTTP
• experimenting w/ RESTful clients
• Video and Audio resources on REST topics
• Add the correct mime-type for your fonts

SVG

• SVG: The best way to graph quantitative data

XML

• xml5.js

Yesterday, I was writing about collecting the mistakes that create interoperability issues in Web browsers. So let’s start with a first one. You thought the Y2K bug was the biggest nightmare on Earth, that every servers will stop on the planet with buffer overflows. Well… You have not seen anything.

The Bug

Let me introduce you the 2DVN (Two Digits Version Number) bug. Browser identifies themselves on the Web with a User Agent string. For example, the user agent string for the old version of Opera 9.70 on Linux was:

Opera/9.70 (Linux i686 ; U; en-us) Presto/2.2.0

So far so good. Web developers included javascript scripts in their Web sites to match the name, the character “/”, and finally the version number. Because Web developers were not interested by the minor version number (.70 in our example), they made script matching only the major number (9 here in our example). They add things such as

browserName = Opera;
browserVersion = 9;

and with these were applying different rules. Opera browser proudly, before every other browsers, reached the version 10 beta on June 3, 2009 and then sites started to break everywhere. The issue is that they were doing it the wrong way by taking a substring with a length of 1 character. The value for the two variables were becoming

browserName = Opera;
browserVersion = 1;

The Patch

Sites started to block Opera thinking that it was a bad bot spoofing Opera, or applying the bad rules to the browser thinking that this and that is not supported. You can try to contact all the sites on earth to fix it and we try to do that when we detect this kind of mistakes, but the easiest solution was to do something such as:

Opera/9.80 (Macintosh; Intel Mac OS X 10.6.6; U; fr) Presto/2.7.62 Version/11.00

We kept the first number with 1 digit, so javascript will not break with a two digits number and we added a new string called Version/11.0 displaying the real version number of Opera. This creates issues with stats and analytics software which will not detect the new version of Opera for the same reason explained above, but at least most Web sites were not blocking anymore Opera for no reasons.

The Return Of The Vengeance Of Doom

New libraries have been developed for matching the Version/xx.xx number at the end of the User Agent string such as jQuery browser.version. Guess what… some Web developers are doing again the same mistake by using Javascript code such as:

jQuery.browser.version.substr(0, 1)

I see already some people smiling in the room thinking “Who cares? That is only Opera”. We then can wait with a big smile… Chrome has reached version 7 in two years, upgrading its number every 3 months. IE has reached version 9, the next one is 10. Here an example of code which is currently available on the Web on a cool site:

if ($.browser.msie && jQuery.browser.version.substr(0, 1) == "9") {}

Working to open the Web, solving interoperability issues, helps maintaining an open choice for users. So they can use any browsers to interact, communicate and share on the Web.

Some cookies are really bad for your health and you have to be careful when you cook them. A very simple cookie looks like that when the server sends it to the client:

Set-Cookie: cookieName=cookieValue

but more often it will looks like this

Set-Cookie: cookieName=cookieValue; Path=/; Domain=example.org

Sometimes they will contain an Expire date.

Set-Cookie: cookieName=cookieValue; Expires=Wed, 09 Jun 2021 10:18:14 GMT

Cookies are defined in the specification 2695 and now in the specification HTTP State Management Mechanism currently written by Adam Barth. The production rules for the servers are strict and defined in the section 4.1. Set-Cookie.

These are a set of rules you have to check when you are coding either javascript or your Web framework to produce cookies.

• Set-Cookie:SP The space is important. US-ASCII SP (octet 32)
• cookieName any US-ASCII characters except control characters (octets 0-31) and DEL (octet 127) and, the following characters “(“, “)”, “<”, “>”, “@”, “,”, “;”, “:”, “", “/”, “[“, “]”, “?”, “=”, “{“, “}”, the double quote character itself, US-ASCII SP (octet 32) or the tabulation (octet 9)
• = no space before and after.
• cookieValue same than cookieName

Then optionally you can add

• ;SP The space is important

Set-Cookie: {$aaa|xxx:"zzz"}=foo