Polyglot Inception = JPEG = CSS = JS = HTML

JS-Wizard Martin Kleppe hat ein JPG, ein Stylesheet, ein Javascript und ein HTML in dasselbe Textfile gebacken: Polyglot Inception4.

deepLevels of Inception

  1. Browser loads page as index.html
  2. HTML contains <script src="#"> tag
  3. Script writes <link href="#">
  4. Stylesheet renders background: url()

How Does it Work?

  • View the page source and watch the network panel to see what is going on.
  • The document starts with the HEX signature "FF D8 FF E1" that identifies the file as a JPEG.
  • The following two bytes define the EXIF header size. Here "0D 3D" leaves space for 3389 bytes.
  • Because the encoding was set to "ISO-8859-1", the first assignemnt ???? = {} is a valid JavaScript expression.
  • The equal sign is not a allowed in CSS selectors but it won't cause the interpretor to stop.
  • The rule inception * { background: url() } is valid CSS and JS at the same time.
  • To avoid errors in JavaScript, we need to hoist the variable "inception" and the function "url".
  • When using href="#", src="#" or url() it points to the same ressource.
  • Line and block comments make it possible to apply the HTML structure and load our script.
  • To render HTML on the first run, the "Content-Type" header must be "text/html".
  • The type will be ignored later, when we refer to it as a JS, CSS and JPEG.
  • Then we include the JPEG image data and close the block comment at the end of the file.