Polyglot-HTML-ZIP-PNG

Introduction

This repository contains a step-by-step presentation for RennesJS, showing how to create HTML/ZIP/PNG polyglot files in JavaScript.

The presentation provides a didactic explanation of how (universal) self-extracting files work in SingleFile.

TL;DR

Here is the resulting self-extracting HTML file: demo.png.zip.html

Here is a similar online page: https://gildas-lormeau.github.io

This file is compatible with:

• HTML (extracted page displayed in no-quirks mode)
• ZIP (contains the displayed page and its resources) - view it with ZIP Manager
• PNG - view it with PNG file chunk inpector

Fun fact

The image displayed at the center of the page demo.png.zip.html when viewed in HTML is the page itself, but interpreted as a PNG file.

Presentation

You can view the web presentation in:

• english (code)
• french (code)

Installation

If you are using a Chromium-based or a WebKit-based browser to view the first examples from the presentation, you should install the extension from the zip file located in util/web-extension in order to add the support of file:// URIs in the Fetch API. Alternatively, you can open the examples via an HTTP server.

Known issues

• A bug in “Archive Utility” on macOS prevents it from decompressing the resulting file. You can use “unzip” to get around this issue.
• Depending on the browser you’re using, the presentation may be a little slow.

This site is open source. Improve this page.