+++
date = 2021-07-03T13:23:34+02:00
title = "Firefox and the Link HTTP header"

[taxonomies]
tags = ["TIL"]
+++

HTTP [defines](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Link)
the _Link_ header with which 
[_Link Relations_](https://www.iana.org/assignments/link-relations/link-relations.xhtml)
can be defined directly in the HTTP response. This lets websites define their
stylesheets or favicons without having to pass them in an HTML
[`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)
element.

When displaying certain files directly, Firefox wraps them in its own HTML. This
happens, for example, when you look at a `.txt` file marked as `text/plain` or
an image marked as `image/png`.

Turns out that for plain-text files, Firefox will load and honour any stylesheet
passed to it in the _Link_ header and apply it to its own HTML.  One could, for
example, link a stylesheet that overrides the font settings, or even include
pictures. Firefox will duly load all of these when displaying the file, whilst
_View Page Source_ will still show only the file itself.  It is only when
looking at the HTTP response and the _Network_ tab in the Inspector that you see
what exactly is happening.

{{ img(path="firefox-link-header.png", alt="Firefox displaying a plain-text file
alongside a picture.", caption="A plain-text file... in Comic Sans... that also
displays a picture?") }}

This does not seem to work when Firefox is displaying images and it doesn't work
_at all_ in Chromium-based browsers. The only relevant entry in Mozilla's
Bugzilla instance I could find was 
[this issue](https://bugzilla.mozilla.org/show_bug.cgi?id=748294)
from 9 years ago.

Arguably this could be considered a bug, and I do strongly feel that Firefox
**should not** load any outside resource when displaying plain-text files. For
now, though, have fun confusing people with this.

Thanks to [puck](https://puck.moe) for pointing this out to me.