Это подлый трюк. Он был разработан Джейкобом Сейделином на Nihilogic.dk и использовался некоторыми участниками конкурса 10K An Event Apart , хотя есть некоторые споры относительно того, соответствует ли он духу события.
Тем не менее, интересно посмотреть, как это делается, так что давайте посмотрим. Вот шаги:
1. сверните ваше приложение
Первый шаг — сжать ваш окончательный CSS и JavaScript до минимально возможного размера, используя любой подходящий инструмент сжатия .
2. Кодируйте свой CSS и JavaScript в виде графики
Это сложная часть. Вам необходимо преобразовать ваши файлы CSS и JavaScript в кодировке ASCII в одно двоичное изображение. Формат PNG является лучшим, потому что он без потерь (ваш код сохранен), использует сжатие zlib и поддерживается всеми браузерами.
Веб-разработчик Cal Henderson опубликовал свои исследования и PHP / Perl-код, который преобразует код в изображение с использованием различных форматов, таких как 1-битный, 8-битный, 24-битный и т. Д. Вы можете просмотреть библиотеку jQuery в виде 1-битного квадрата здесь .
PNG может быть уменьшен в размере с помощью таких инструментов, как Smush.it и PNGOUT .
3. Извлеките код из изображения
Теперь нам нужно загрузить изображение и преобразовать его обратно в исполняемый код. Это может быть достигнуто путем загрузки изображения в элемент canvasdrawImage() Затем отдельные пиксели считываются с использованием getImageData()eval()
Результаты могут отличаться, но можно сэкономить 75%. В некоторых случаях формат изображения может превзойти файлы, сжатые с помощью Gzip. Таким образом, вы можете принять участие в конкурсе 10K с кодом 40Kb!
Это имеет реальное использование?
Таким образом, кроме обмана на конкурсах, имеет ли эта техника какое-либо практическое применение? Это интересный хак, но сжатие исходных файлов на сервере обычно приводит к лучшему сжатию, и его гораздо проще реализовать.
Тем не менее, я мог видеть метод, используемый для стеганографии или для шифрования секретного кода от начинающих хакеров. Очень круто, но вы бы использовали это?