Yahoo! Mail Bug: HTML Sanitizer Breaks Mobile Responsive Email


[Incident: 150122-037378] - filed Jan 24, 2015

Bug Report

The Yahoo! Mail sanitizer modifies CSS media queries in a way that causes mobile responsive emails to render badly in Yahoo! Mail. Developers creating mobile responsive email are having to hack workarounds just to make their emails work in Yahoo! Mail. With mobile being a priority at Yahoo! perhaps its time to fix it.

This report goes into detail:
a) What happens
b) Why it happens
c) What can be done to fix it
d) Why this is important

But first, the formalities...

The operating system including version number you use to access your Yahoo account

OS X Yosemite 10.10.1 (Issue is not OS specific)

The Web browser including version number you use to access your Yahoo account

Google Chrome Version 39.0.2171.99 (Issue is not browser specific)

A detailed description of what the problem/issue is and the exact steps you took to replicate the issue

Here goes....


a) What Happens

Emails that are designed to accomodate mobile devices frequently contain media queries. Media queries are CSS declarations that tell the client to render a set of CSS differently if the email is viewed on a mobile email client like the Apple iPhone vs on the desktop like Webmail.

What happens in Yahoo! Mail is that the media queries are altered in such a way that CSS within media queries are activated in Yahoo! Mail even though its viewed on a non mobile device.

Here's what an email that does not fully implement workarounds to address the Yahoo! Mail bug looks like :



Note the narrow text in Yahoo! Mail (left) vs how it should render (right).
See the code for the email here: http://codepen.io/freshinbox/pen/vEZKWX



b) Why It Happens

This happens because the HTML sanitizer is unable to properly handle nested CSS blocks.

Take a media query that looks something like this:

          @media only screen and (max-width: 480px)  {
            .div1 { width: 50px; }
            .div2 { width: 60px; }
          }
The CSS within the above media query should only activate when the client is narrower than 480px.

However, The Yahoo! Mail sanitizer transforms it into something like this:

          _filtered #yiv7320523903 { }
          #yiv7320523903 .yiv7320523903div2 { 
            width: 60px;
          }
          #yiv7320523903
What happens is that the .div2 CSS declaration that was formerly bounded by the media query is now exposed and it becomes active in Yahoo! Mail even though it was meant for mobile devices.

The reason is that the sanitizer prematurely closes the block when it "filtered out" the media query declaration. So instead of neutralizing the media query, it in effect activates it!

Also .div1 was probably consumed by the sanitizer because it assumed that .div1's closing bracket matched the media query's opening bracket and that .div1 was not a proper CSS declaration.


c) What Can Be Done To Fix It

It appears the sanitizer once it detects an opening bracket ( { ), hunts for a closing bracket ( } ), disregarding any subsequent open brackets. Once it detects the first closing bracket, it parses the declaration. If it contains unpermitted/unknown styles, it is replaced with "_filtered".

However the abovementioned strategy fails on media queries since it contains nested styles and results in CSS that was only meant to be active in mobile, being activated in Webmail.

Fix 1: Properly remove nested blocks.
Properly match opening and closing brackets and remove the content within.

          _filtered #yiv7320523903 { }
Fix 2: Detect @media declarations and treat it as a nested block.

          _filtered #yiv7320523903 {
            #yiv7320523903 .yiv7320523903div1 { 
              width: 50px;
            }
            #yiv7320523903 .yiv7320523903div2 { 
              width: 60px;
            }
          }
Fix 3: Support media queries!

          @media only screen and (max-width: 480px)  {
            #yiv7320523903 .yiv7320523903div1 { 
              width: 50px;
            }
            #yiv7320523903 .yiv7320523903div2 { 
              width: 60px;
            }
          }



d) Why this is important


The current sanitizer implementation causes headaches for every email designer
Imagine, EVERY single email designer and developer in the world who wants their email to look good on mobile will have to hack workarounds just to deal with this bug. Bad joojoo.

Looks bad for Yahoo! as a company
Yahoo! spent a ton over the past few years acquiring mobile talent. If Yahoo! Mail cannot do a simple thing such as handle emails with mobile markup without breaking, it sends a signal - especially to developers - that Yahoo! still does not "get" mobile.


#letsfixemail