Началось с того, что я случайно наткнулся на станицу https://lcamtuf.coredump.cx/squirrel/
Это демка представляет собой файл, который будучи сохраненным с расширением .jpg или .jpeg открывается как графический файл, а с расширением .htm или .html как веб-страница. Такого рода трюки для JPEG не новы. Насколько я понял, HTML размещается в секции комментария .jpeg файла. Браузер проглатывает бинарные данные заголовка как мусор, потом рендерит найденный HTML. Немного CSS хитрости чтобы спрятать бинарный мусор от глаз пользователя и вуаля.
Я вооружился редактором Hex Fiend для Mac и довольно быстро смог заменить HTML и изображение на свои.
Я был весьма доволен собой, но мне хотелось продолжить двигаться в этом увлекательном направлении ненормального программирования.
Мне пришла в голову мысль, что можно попробовать провернуть такое с .gif файлом. Я погуглил, оказалось что такого с .gif файлом никто не делал. Некоторое время я бился с Hex Fiend пока не достиг первых успехов. Стало ясно, что затея реализуема.
Я решил сразу взяться за что-то весомое, и решил что буду использовать анимированный GIF.
По моей просьбе жена снабдила меня занятным видео, которое я на скорую руку обработал и получил следующее:
Из него я сохранил анимированный GIF:
Бинарный мусор попадая в браузер открывает большое количество тегов <s>,<u> и <i> поэтому, если вы захотите повторить мои упражнения, я советую их с запасом позакрывать в самом начале, как видно на скриншоте выше, или в исходниках моего файла, ссылку на который я дам в конце поста.
Верстая веб-страницу, я все больше входил в азарт и мне показалось отличной идеей интегрировать мое исходное видео MPEG4 в HTML с помощью base64 и поставить его на бэкграунд. Вот что у меня получилось.
Я не силен в HTML, поэтому страница корректно отображается только в настольных браузерах. Большинству мобильных устройств не хватает памяти, а если хватает, то видео на бэкграунде не воспроизводится.
У меня она корректно отображается под Mac OS в Safari и Google Chrome. В Firefox не отображается видео на бэкграунде, зато на моем iPhone 8 во всех трех браузерах: Safari, Chrome и Firefox страница отображается корректно. Если среди читателей найдется эксперт по верстке, я буду очень признателен за помощь в допиливании этой демки.
Пожалуйста, дайте ей время загрузиться и отрендриться! Моему древнему Хакинтошу при загрузке этой страницы приходится очень несладко. Впрочем, на современном оборудовании работает достаточно гладко.
Видео, которое вы видите на заднем плане, это MPEG4-видео встроенное в HTML-страницу, встроенную в анимированное GIF изображение
Если сохранить данную страницу с расширением .html она будет открываться как веб-страница, а если сохранить в файл с расширением .gif - как анимированный GIF.
Было бы очень круто, если бы при сохранении с расширением .mp4 она открывалась как видео-файл, но это к сожалению невозможно.
Комментарии (11)
Barabas79
25.08.2021 19:36+1Открыл в firefox (91 версия) первую ссылку, там видео бекграундом показывает )
По второй ссылке видео только в правом нижнем углу.
При загрузке конечно сначала видно 2-3 секунды символьный мусор, потом появляется web-страничка
Vasiliy_S
25.08.2021 23:28-1Было бы круто, если бы получилось сделать бесконечный цикл.
В картинку встроен html с отображением этой же картинки. При скачивании картинки в неё всё так же встроен html с этой же картинкой. И так до бесконечности.
nE0 Автор
26.08.2021 12:00Именно так и работает, откройте страницу, в правом нижнем углу "картинка-в-картинке" это анимированный гиф, сохраните его к себе, и там будет вебстраница. Увидеть ее можно если переименовать .gif в .htm
ivan386
28.08.2021 03:27+3В статье GIF изнутри есть описание формата GIF. У GIF также как и у JPEG есть блок комментария который располагается почти в начале файла и туда можно поместить html код.
21 F9 [байт размера блока данных] [блок данных] 00Блоков данных в комментарии теоретически может быть несколько. Если надо вместить больше чем 255 байт нужно тогда это учитывать в HTML коде и правильно его делить.
В конце html кода можно использовать хак с открытием комментария как в случае lcamtuf но проблема в том что браузер интерпретирует дальнейший мусор как html код и пытается его парсить.
С древних времён существует тэг <plaintext> он позволяет сообщить браузеру что всё что идет после его открытия надо интерпретировать как обычный текст. Если его сразу скрыть например при помощи атрибута hidden то браузер уже не будет так страдать пытаясь парсить и отрисовывать мегабайты бинарных данных.
Используя вашу гифку сделал простой пример: html, gif.
Я не стал скрывать заголовок GIF файла.
ivan386
28.08.2021 17:06Поскольку HTML код страницы посмотреть затруднительно из за размера файла выложу его здесь:
<title>Simple HTML in GIF</title> <p>Simple HTML in GIF</p> <img src="#"><plaintext hidden>
nE0 Автор
01.09.2021 15:55С тэгом <plaintext> проблема заключается в том, что этот тэг не закрывается, все что идет после него будет простым текстом, поэтому не получится дописать HTML в конец файла.
ivan386
03.09.2021 02:07Да в том и суть что весь HTML код должен идти до <plaintext> а большая часть файла после него чтоб она не парсилась как HTML. Соответственно HTML код должен полностью распологатся внутри GIF файла в секции комментария которая идёт в его начале.
Я аналогично запихнул HTML код в ваше видео. Правда уже при помощи ffmpeg а не HEX редактора.
SerVB
В Firefox на iOS используется движок Safari, как Apple требует для всех браузеров на iOS:
https://en.wikipedia.org/wiki/Firefox_for_iOS
Так что там совсем не Firefox.