Polyglot-HTML-ZIP-PNG

Introduction

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

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

Presentation

You can view the web presentation in:

TL;DR

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

This file is compatible with:

Fun fact

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

Installation

If you are using a Chromium-based or a WebKit-based browser to view te 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.