Exploits and bugs

Image Cache Overread (bug / exploit)

We can visually read into Flipnote Studio's image cache. This is achieved using a small .npf image (1px x 15px recommended for best results, with each pixel using a different color) as the src of an image element, but then setting the width and height of the image to much larger values (128px x 1024px recommended).

  <img src="overread.npf" width="128" height="1024">

This happens because .npf images don't have any dimension information in their headers, instead they expect that the image element will have the correct dimensions for them to be displayed properly. However, if we specify much larger dimensions, the renderer will get to the end of the image data then continue reading into the image cache as it looks for more data to fit the dimensions. This can be done quite effectively with the .npf format, as each pixel represents 1 nibble (half-byte) of data.

Table Overflow (layout bug)

Flipnote Studio's browser won't allow for CSS positioning or floats, so having content overlap something else can be difficult. Negative margins are an option, but they require you to know the exact pixel height of the overlap content.

This is where the table overflow hack comes in. We start with a html table with one row containing one column, then make that column span two rows by adding the rowspan="2" attribute.

The content of the table column is rendered as normal, however, when the browser tries to render the next row, it realises that there isn't one, and the table's height gets collapsed to 0 before moving on to the next element.

Because of this, the rest of the page will continue to render as if the table was empty; the table doesn't contribute to the page scroll calculation either.

<table>
    <tr>
        <td rowspan="2">Overlapping content</td>
    </tr>
</table>

...
Content that gets overlapped
...