A curious way to break Twitter's search results


Screenshot of a tweet. The HTML is malformed.

(This isn't really a security issue, although I've disclosed it to the Twitter team.) "Fuzzing" is a computer science term which means "sending weird data into a program and seeing what happens." It's a useful way to see how your code can break in new and unexpected ways. It's particularly good at showing what a website's search engine does when it is confused. For example, here's a fairly mundane Tweet. Offshore A-Z@OffshoreAZ🏢 HONOUR INTERNATIONAL LIMITED🇰🇾 Cayman Islands🎯 <html><head…

Continue reading →

MailChimp leaks your email address


Change email address page with obscured email address

An annoying privacy violation from leading email newsletter company MailChimp. Responsibly disclosed on 2017-12-04. When you click a link on a webpage or an email, your browser opens up that link and sends the newly visited webpage a Referer Header. (The misspelling is a historical artefact.) This says "Hello new site, I was referred here by this previous website." This has some privacy implications - the administrator of a web site can see which website you were on. Usually this is fairly…

Continue reading →

Mapping in HTML - a proposal for a new element


Two men are confused by a paper map

This is a sketch of a proposal for a new HTML element to simplify displaying maps on a website. I'd like your comments and criticisms before I submit it. This is born out of my frustration of using different JavaScript mapping solutions - my phone has a mapping app, why do I need to share my location with a website and their mapping provider? At the moment, if I want to use Google Maps, or OpenStreetMap, or Carto, or any other mapping provider, I have to load in a bunch of external JavaScript …

Continue reading →

How *not* to do a password change page


We've all been faced with this screen, right? You haven't logged in to a website for a while, so it prompts you to change your password. sigh Annoying but probably necessary. The problem was, every time I tried to change my password, it told me that my old password was invalid. The one that I'd just used to log in. I use the incredible LastPass Password Manager - so I knew I wasn't typing it incorrectly. It took a few tries, but I finally figured out what was going wrong. When I'd set…

Continue reading →

Minimum Viable XSS


Update! I now have an XSS which is only 18 characters! Here's a fun little game for all the family! What is the minimum number of characters required to perform a successful XSS attack? Let's take an entirely theoretical example - suppose we have a site which echos back user input without sanitising it. So a search for " <em>" turns the whole page italic. ahem A hacker might think, "Hurrah! Now I can directly inject JavaScript into the page. MWAHAHAHA!" But wait, young grasshopper, for…

Continue reading →

Overlapping Animated GIFs


Just a couple of silly experiments on a Sunday afternoon. I think it's beautiful to overly animated GIFs on top of one another. If the topmost GIF has a transparent background it becomes hypnotic to see the synchronisity which appears to develop - akin to listening to Dark Side of the Moon while the Wizard of Oz is on the TV. The background and foreground have differing periods of motion, which gives a rather pleasing effect. It's also possible to overlay GIFs to use as sprites. In this…

Continue reading →

How Should We Punctuate on the Web?


Screenshot showing a 404 error on the Guardian's website.

Imagine, just for a moment, you were a computer. Take a look at the following sentence and try to work out where and how you should hyperlink the text. He said "You should visit http://example.com/!" Obvious, isn't it? Except, of course, it's not really that simple. There could well be a file named "!" on the webserver. Infact, there could be file named "!"" on there. And yet, to my tastes, it looks so ugly to write something like: Visit my blog (http://example.com/blog ) The space…

Continue reading →

BBC News Don't Get Responsive Design


In October, I was interviewed in Econsultancy about the BBC's new "responsive" website. I said: The BBC's mobile site is fairly responsive. If you view it on different sized phones and tablets it adapts quite well. But it is an entirely separate site from the main BBC news site. The BBC are doing device detection and redirecting mobile users. It's not a bad strategy per se - but it is not best practice Clicking on a link on the BBC's front page today, lead to this "responsive" experience. …

Continue reading →

Should < img > Deprecate "height" and "width"?


The HTML5 Logo.

Image adaptation and resizing is a hot topic at the moment. With devices of varying screensize accessing your site, how do you ensure that the crappy 240*240 phone gets a reasonable experience while still making everything look gorgeous on the retina-busting iPad? One of the very first things we're taught in HTML school is that we should separate content and style. <span font="comic sans" colour="red">This is wrong!</span> Instead, we should be doing <span class="stylish">This is…

Continue reading →

London Web Standards - State of the Browser


Photo of me holding a microphone. I'm wearing a T-Shirt with the HTML5 logo on it.

Here's the introduction I gave to London Web Standards for their State of the Browser conference. Slideshare seem to have screwed up some of the formatting, but here are the slides. State of the Browser - London Web Standards from Terence Eden Full details of the day on Lanyrd. Thanks to Nick and the rest of the team for inviting me. It was an excellent day full of demos, discussions, and debates. …

Continue reading →

Twitter and Linebreaks


As any student of computer science knows, line breaks are confusing. There are styles of line breaks unique to Unix, Mac and Windows - so what should a web renderer do when faced with a newline command? In HTML, it's simple, they should be ignored. But what when it is user generated text, not HTML? This was a problem I faced when trying to get Dabr to render the ASCII* art produced by Aral Balkan's Feathers App. Feathers uses line breaks to achieve images like... 〰❀❃ Introducing ❃❀〰 My new i…

Continue reading →