LeastAuthority / Transfer

File transfer app that uses the magic wormhole protocol
MIT License
11 stars 3 forks source link

Display icon associated with file type of file to be sent/received #26

Open on-ba opened 3 years ago

on-ba commented 3 years ago

Improvement

Improve the sender/receiver's experience, by displaying an icon relevant to the file type that they are expected to send/receive. This can help them by confirming they're sending what they expect to send, or help them by aiding their understanding of what kind of file they would be receiving.

Existing behavior

At the moment, users see a general file icon at various stages of the send/receive flow. Namely, on:

Example:

Screenshot 2021-07-08 at 15 17 51

While users are presented with useful metadata, namely filename/extension and file size, not everyone is familiar with what file type extensions mean. Operating systems generally provide more information, by showing an icon belonging to the specific file type.

New behavior

We should display a relevant icons for commonly used file types.

As a first pass, we can use the categories of files with associated file types listed below.

The to be used icons can be added to this issue later.

The file types/groupings listed below are informed by these resources by Mozilla: https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types https://developer.mozilla.org/en-US/docs/Web/API/File/type

Audio:

Extension Kind of document MIME Type
.aac AAC audio audio/aac
.cda CD audio application/x-cdf
.mid; .midi Musical Instrument Digital Interface (MIDI) audio/midi audio/x-midi
.mp3 MP3 audio audio/mpeg
.mp4 MP4 audio video/mp4
.oga OGG audio audio/ogg
.opus Opus audio audio/opus
.wav Waveform Audio Format audio/wav
.weba WEBM audio audio/webm

Image:

Extension Kind of document MIME Type
.bmp Windows OS/2 Bitmap Graphics image/bmp
.gif Graphics Interchange Format (GIF) image/gif
.ico Icon format image/vnd.microsoft.icon
.jpeg; .jpg JPEG images image/jpeg
.png Portable Network Graphics image/png
.svg Scalable Vector Graphics (SVG) image/svg+xml
.tif; .tiff Tagged Image File Format (TIFF) image/tiff
.webp WEBP image image/webp

Video:

Extension Kind of document MIME Type
.avi AVI: Audio Video Interleave video/x-msvideo
.mpeg MPEG Video video/mpeg
.ogv OGG video video/ogg
.swf Small web format (SWF) or Adobe Flash document application/x-shockwave-flash
.ts MPEG transport stream video/mp2t
.webm WEBM video video/webm
.3gp 3GPP audio/video container video/3gpp
.3g2 3GPP2 audio/video container video/3gpp2

Document/text:

Extension Kind of document MIME Type
.abw AbiWord document application/x-abiword
.azw Amazon Kindle eBook format application/vnd.amazon.ebook
.doc Microsoft Word application/msword
.docx Microsoft Word (OpenXML) application/vnd.openxmlformats-officedocument.wordprocessingml.document
.epub Electronic publication (EPUB) application/epub+zip
.odt OpenDocument text document application/vnd.oasis.opendocument.text
.pdf Adobe Portable Document Format (PDF) application/pdf
.rtf Rich Text Format (RTF) application/rtf
.txt Text, (generally ASCII or ISO 8859-n) text/plain

Compressed/archive:

Extension Kind of document MIME Type
.arc Archive document (multiple files embedded) application/x-freearc
.bz BZip archive application/x-bzip
.bz2 BZip2 archive application/x-bzip2
.gz GZip Compressed Archive application/gzip
.rar RAR archive application/vnd.rar
.tar Tape Archive (TAR) application/x-tar
.zip ZIP archive application/zip
.7z 7-zip archive application/x-7z-compressed

Other/General file (every other file extension, including...):

Extension Kind of document MIME Type
.bin Any kind of binary data application/octet-stream
.csh C-Shell script application/x-csh
.css Cascading Style Sheets (CSS) text/css
.csv Comma-separated values (CSV) text/csv
.eot MS Embedded OpenType fonts application/vnd.ms-fontobject
.htm; .html HyperText Markup Language (HTML) text/html
.ics iCalendar format text/calendar
.jar Java Archive (JAR) application/java-archive
.js JavaScript text/javascript
.json JSON format application/json
.jsonld JSON-LD format application/ld+json
.mjs JavaScript module text/javascript
.mpkg Apple Installer Package application/vnd.apple.installer+xml
.odp OpenDocument presentation document application/vnd.oasis.opendocument.presentation
.ods OpenDocument spreadsheet document application/vnd.oasis.opendocument.spreadsheet
.ogx OGG application/ogg
.otf OpenType font font/otf
.php Hypertext Preprocessor (Personal Home Page) application/x-httpd-php
.ppt Microsoft PowerPoint application/vnd.ms-powerpoint
.pptx Microsoft PowerPoint (OpenXML) application/vnd.openxmlformats-officedocument.presentationml.presentation
.sh Bourne shell script application/x-sh
.ttf TrueType Font font/ttf
.vsd Microsoft Visio application/vnd.visio
.woff Web Open Font Format (WOFF) font/woff
.woff2 Web Open Font Format (WOFF) font/woff2
.xhtml XHTML application/xhtml+xml
.xls Microsoft Excel application/vnd.ms-excel
.xlsx Microsoft Excel (OpenXML) application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.xml XML application/xml
.xul XUL application/vnd.mozilla.xul+xml

Risks/tradeoffs

The icon we would display would be based on the file extension, as opposed to the actual file type (based on the content of the file). This extension can be manipulated. This means that if someone sends a malicious executable but renames it to .png, the receiver could think they are receiving an image as opposed to an executable. My understanding, possibly misguided, is that operating systems also open files based on their extension instead of based on their content. This would mitigate concerns that a PNG file would automatically be opened as an executable.

meejah commented 3 years ago

My understanding, possibly misguided, is that operating systems also open files based on their extension instead of based on their content. This would mitigate concerns that a PNG file would automatically be opened as an executable.

Not precisely .. for example on Linux, if you set the "executable" bit on a file and then try to run it (e.g. in a terminal, or double-clicking in certain GUI programs) then the OS will try to run it. If it turns out that there was a valid ELF file in kitty.png then it'll work.

Further muddying the waters, it's possible to create files that are in fact several valid formats at once -- e.g. see research here: https://fahrplan.events.ccc.de/congress/2014/Fahrplan/events/5930.html

So, determining the "type of a file" seems like a simple problem but is in fact pretty complex. (And unfortunately, the weird edge/failure cases are likely to be the security-relevant ones we're interested in).

It's maybe useful to discuss why we want to display different icons.

If the point is to "do whatever the OS does" then we should use OS-specific APIs to figure out an icon (instead of hard-coding our own list).

If the point is to give the user confidence about what kind of file they're receiving then we should use some sort of "format validation" library or similar (so that we don't tell the user that foo.png is a picture if it's actually a Java program or shell-script instead).

I think a hard-coded mapping of "extension -> icon" is bound be be wrong / incomplete / out-dated and probably gives the user confidence that they shouldn't have (e.g. "the software says it's an image, so that's safe") or even give them unfounded fears (e.g. "the software didn't find an icon for foo.jpe so that's maybe malware").