This article is a summary of the presentation available HERE. The resulting demo file can be downloaded at the end of the article. The repository can be found at https://github.com/gildas-lormeau/Polyglot-HTML-ZIP-PNG.
Introduction
SingleFilea tool for web archiving, typically storing web page resources as data URIs. However, this method may not be effective for many resources. A more elegant solution has emerged by combining the ZIP format’s flexible structure with HTML. We’ll take this one step further by encapsulating this entire structure inside a PNG file.
The Power of ZIP
The ZIP format provides an organized structure for storing multiple files. It is based on a structure with file entries followed by a central directory. The central directory acts as a table of contents, with headers containing metadata about each file entry. These headers include important information such as file names, sizes, checksums, and file entry offsets. What makes ZIP so versatile is its flexibility in data placement. The format enables data to be prepended before the ZIP content by setting an offset greater than 0 for the first file entry, while allowing up to 64KB of data to be appended afterwards (ie ZIP comment). This feature makes it well suited for creating polyglot files.
Create HTML/ZIP Polyglot Files
Based on this knowledge, we can create a self-extracting archive that can be used by web browsers. The page to be displayed and its resources are stored in a ZIP file. By storing the ZIP data in an HTML comment, we can create a self-loading page that extracts and displays the contents of the ZIP file.
Here is the basic structure of the takeover page itself:
charset=utf-8>
assets/main.js script on this “bootstrap page” reads the ZIP data by calling fetch(””) and uses the lib/zip.min.js JavaScript library to extract it. This bootstrap page is then replaced by the extracted page with its resources. However, there’s a problem: due to the same-origin policy, retrieving ZIP data directly with fetch(””) fails when the page is opened from the filesystem (except in Firefox).
Reading ZIP Data from the DOM
To overcome the filesystem limitation, we can read ZIP data directly from the DOM. This approach requires careful handling of character encoding. The bootstrap page is now encoded inwindows-1252, which allows data to be read from the DOM with minimum degradation. Some encoding challenges emerge:
- DOM text content gets decoded to
UTF-16instead ofwindows-1252 - The
NULLcharacter (U+0000) gets decoded to the replacement character (U+FFFD) - Carriage returns (
\r) and carriage return + line feeds (\r\n) get decoded to line feeds (\n)
windows-1252. For the last point, “consolidation data” in a JSON script tag is added in the bootstrap page. This data tracks the offsets of carriage returns and carriage return + line feeds, and enables accurate reconstruction of the original content when extracting the ZIP data.
Here is the resulting structure:
charset=windows-1252>
Adding PNG to the Mix
The PNG format consists of a signature followed by chunks. Each chunk contains these fieds:- Length (4 bytes)
- Type identifier (4 bytes) e.g.,
IHDR(header),IDAT(data),IEND(end of file),tEXt(custom data)… - Data content (n bytes)
- CRC32 checksum (4 bytes)
- PNG signature (8 bytes)
IHDRchunk (13 bytes)- One or more
IDATchunks IENDchunk (12 bytes)
The Final Form: HTML/ZIP/PNG Polyglot Files
The ultimate implementation combines all three formats into a single file. The HTML format’s fault tolerance allows for this complex structure. However, this approach introduces new challenges:- The signature, the
IHDRand theIENDchunks become visible as text nodes briefly and should be removed as soon as the page is parsed - The displayed page is rendered in quirks mode, requiring specific handling through
document.write()and related methods to parse the displayed page
(PNG signature)
(IHDR chunk)
(tEXt chunk
Please wait...
Please wait...
) (IEND fragment)
Optimization Through Image Reuse
The final optimization removes the image from the ZIP file and reuses the page, rendered as a PNG file, to replace it on the displayed page.
Result File
Downloads demo.png.zip.html.
2024-12-27 23:10:00
