summaryrefslogtreecommitdiffstatshomepage
diff options
context:
space:
mode:
authorWolfgang Müller2021-07-03 13:33:36 +0200
committerWolfgang Müller2021-07-03 13:33:36 +0200
commit50553089ef5de8cf126c1bdc5450889e12f0ac9d (patch)
tree8834ca9290e10d72228a1edf8561a79155b62751
parentaa04d615cdd832d2300d427f4342ac09b93609d0 (diff)
downloadzunzuncito-50553089ef5de8cf126c1bdc5450889e12f0ac9d.tar.gz
content: Add new post: "Firefox and the Link HTTP header"
-rw-r--r--content/6/firefox-link-header.pngbin0 -> 408317 bytes
-rw-r--r--content/6/index.md43
2 files changed, 43 insertions, 0 deletions
diff --git a/content/6/firefox-link-header.png b/content/6/firefox-link-header.png
new file mode 100644
index 0000000..f9e5199
--- /dev/null
+++ b/content/6/firefox-link-header.png
Binary files differ
diff --git a/content/6/index.md b/content/6/index.md
new file mode 100644
index 0000000..6e2b3e4
--- /dev/null
+++ b/content/6/index.md
@@ -0,0 +1,43 @@
++++
+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.