[HN Gopher] How to Create HTML/ZIP/PNG Polyglot Files
       ___________________________________________________________________
        
       How to Create HTML/ZIP/PNG Polyglot Files
        
       Author : gildas
       Score  : 103 points
       Date   : 2024-12-27 23:10 UTC (23 hours ago)
        
 (HTM) web link (gildas-lormeau.github.io)
 (TXT) w3m dump (gildas-lormeau.github.io)
        
       | Retr0id wrote:
       | > a bug in "Archive Utility" on macOS prevents it from
       | decompressing the resulting file
       | 
       | I looked into this in the past, it's because they check for a
       | "PK" header at the start of the file - which is of course not
       | actually required. I assumed it was deliberate because it does
       | exclude most "weird" ZIPs.
       | 
       | By the way, if you're interested in this sort of file format
       | wrangling, check out Ange Albertini's talk tomorrow at 38c3:
       | https://fahrplan.events.ccc.de/congress/2024/fahrplan/talk/Q...
        
         | Lammy wrote:
         | > it's because they check for a "PK" header at the start of the
         | file
         | 
         | Lots of FOSS tooling will have a similar limitation due to the
         | lack of support in the shared-mime-info spec for reading
         | identifying features from the ends of files. Please
         | vote/comment on this issue to voice your support:
         | https://gitlab.freedesktop.org/xdg/shared-mime-info/-/issues...
        
           | garaetjjte wrote:
           | But EOCD is not required to be at the end of file either
           | (well it is, but has stupid comment field).
        
       | gildas wrote:
       | Note that you can also take advantage of the fact that a ZIP can
       | be password-protected and make your web page secret! For example
       | https://gildas-lormeau.github.io/private/ (password:
       | "thisisapage").
        
         | jclarkcom wrote:
         | If you are loading external libraries like in this example your
         | encrypted data is at risk. It would be better to include the
         | decryption code directly in the Js or embed Js zlib.
        
           | gildas wrote:
           | It's possible to define the Content Security Policy with a
           | <META> tag in the "bootstrap page" and prevent this kind of
           | security issue, e.g. <META http-equiv="content-security-
           | policy" content="connect-src 'self' data: blob:;">
        
             | Thorrez wrote:
             | I don't think that will prevent data exfiltration.
             | Malicious javascript could create e.g. an img element with
             | the data to exfiltrate stored in a query parameter of the
             | image URL.
        
               | gildas wrote:
               | The request will be blocked by the CSP.
        
             | infotogivenm wrote:
             | source integrity is probably the more applicable feature
             | for gp's concerns
        
           | nhinck3 wrote:
           | You can also use the SubtleCrypto API
        
       | OkGoDoIt wrote:
       | I was hoping for an example PNG on the webpage to showcase that
       | it actually works. I'm on my phone so I can't do much with a
       | downloaded zip file. But it would be cool to see that the PNG
       | renders like a normal image on Safari mobile.
        
         | Dwedit wrote:
         | It's the "Rennes JS User Group" image that you see in the
         | middle of the HTML page.
        
         | gildas wrote:
         | Note that if you're on iOS, it's possible that the HTML page
         | doesn't work at all because when it's opened from the
         | filesystem, it's displayed by a viewer which doesn't support JS
         | instead of Safari.
        
         | a1o wrote:
         | I am also on my phone and found it weird that wasn't a single
         | online demo
        
           | gildas wrote:
           | Here is the demo file (cf. the first paragraph and the end of
           | the article): https://github.com/gildas-lormeau/Polyglot-
           | HTML-ZIP-PNG/raw/...
        
             | gavindean90 wrote:
             | A screenshot would help
        
               | edflsafoiewq wrote:
               | A screenshot of what? It just looks like a normal web
               | page.
        
             | Aardwolf wrote:
             | This opens a download dialog for me rather that render the
             | html (in firefox on android)
        
               | gildas wrote:
               | This is done on purpose, so you can rename the file to
               | make sure it's polyglot.
        
               | Aardwolf wrote:
               | Thanks, on an actual computer it's easy to check :)
        
       | Dwedit wrote:
       | I think there's probably a much more efficient way to pack the
       | correction data than JSON. For example, if you wanted to embed a
       | 10MB video file in there, the correction data would be huge.
       | 
       | In the project there, correction data is used to recover bytes
       | that have been changed into LF when they are actually CR or CRLF.
       | 
       | One idea is to store the correction data as binary, then read two
       | bits every time you see a LF byte. It's either an actual LF, a
       | CR, or a CRLF. The downside is that binary data itself could need
       | correction as well, and encoding nearly 1-bit data in 2 bits is
       | still wasteful (but simple). Packing five 3-state values into a
       | byte is less wasteful and would eliminate forbidden symbols, but
       | is still not optimal.
        
         | gildas wrote:
         | You're right, SingleFile (which is capable of saving pages in
         | this format) does a little better than the demo, but it can
         | also be optimized. In fact, I chose the JSON format to keep
         | things as simple and didactic as possible for the presentation.
         | I think I need to use your suggestions to optimize this
         | structure in SingleFile ;)
        
         | ElectricalUnion wrote:
         | I believe at that point (huge blobs compared to small amounts
         | of plaintext strings), it's easier to embed a universal binary
         | web server and have it serve the contents of the zip, like
         | https://redbean.dev/
        
       | porridgeraisin wrote:
       | > 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).
       | chromium --allow-access-from-files
        
       | nhinck3 wrote:
       | I don't think need any external libraries to do this anymore with
       | DecompressionStream.
        
         | creshal wrote:
         | Thank $DEITY we don't have to care about IE compatibility any
         | more.
        
       | lifthrasiir wrote:
       | > The bootstrap page is now encoded in windows-1252, which allows
       | data to be read from the DOM with minimum degradation.
       | 
       | This is not always the case if the encoded content happens to
       | have `-->`, for example. A better approach would be the
       | `<plaintext>` element which can never be closed.
        
         | gildas wrote:
         | Indeed, for example the HTML of the files used for the
         | presentation slides [1] use <noframe> tags to keep the HTML
         | well-formed. This point is addressed in the conclusion of the
         | presentation.
         | 
         | [1] https://github.com/gildas-lormeau/Polyglot-HTML-ZIP-
         | PNG/raw/...
        
       | EmileSonneveld wrote:
       | Could they embed "zip.min.js" too? It is not a single file
       | otherwise
        
       | zzo38computer wrote:
       | I would probably prefer to use text other than "Please wait..."
       | since it won't work if JavaScripts are disabled. This can be
       | fixed by changing the text to something such as "This is a
       | HTML/ZIP/PNG polyglot file". And then, omit the <title> to save
       | space.
       | 
       | The URL jar:https://raw.githubusercontent.com/gildas-
       | lormeau/Polyglot-HT... can be used to display the HTML file in
       | some web browsers, although it cannot display the PNG file in
       | this way since it uses # as the URL of the picture.
        
       ___________________________________________________________________
       (page generated 2024-12-28 23:02 UTC)