Мациевский Николай, Parallels

Зашифруй свой сайт
Клиентская оптимизация в
информационной безопасности
Мациевский Николай, Parallels
webo.in / webo.name
1 / 14
Основные направления
• Меньше данных
– Скорость передачи по сети сильно
ограничена
• Меньше запросов
– Каждый запрос обходится очень дорого как
для клиента, так и для сервера
webo.in / webo.name
2 / 14
Уменьшение размера файлов
•
•
•
•
Удаление комментариев
Сжатие и обфускация
Удаление мета-данных из изображений
Удаление заголовков
webo.in / webo.name
3 / 14
Удаление комментариев
• Из HTML-кода
– Версия и название системы
– Время создания файла
– Данные о внутренней структуре
• Из CSS- / JavaScript-кода
– Название темы оформления и автора
– Номер версии и дата создания
webo.in / webo.name
4 / 14
Сжатие и обфускация
• HTML- , CSS- и JavaScript-код
– Уменьшение читаемости
– Нет данных о первоначальной структуре
• JavaScript-код
– Удаление первоначальных названий
функций и переменных
– Зашифрованный «пакет» данных
– JSMin + YUI Compressor + Packer = ?
webo.in / webo.name
5 / 14
Мета-данные в изображении
• PNG / JPEG
– Информация о генераторе изображения
– Специфичные методы сжатия
• JPEG
– Информация о фотооборудовании
– Информация об авторе
webo.in / webo.name
6 / 14
Удаление заголовков
• Информация о сервере и окружении
(frontend / CDN)
• Специфические отладочные данные
• Информация о времени изменения
файлов
– Last-Modified -> ETag
• Удаление ненужных Cookie
webo.in / webo.name
7 / 14
Уменьшение числа запросов
•
•
•
•
Объединение CSS- и JavaScript-файлов
CSS Sprites
data:URI / mhtml:
Пост-загрузка ресурсов
webo.in / webo.name
8 / 14
Объединение файлов
• Информация о числе файлов
– reset.css, style.css -> /cache/434043d70.css
• Информация об используемых модулях
и дополнениях
– /js/jquery.min.js -> /cache/d26e43778.js
webo.in / webo.name
9 / 14
CSS Sprites
• Тяжело использовать
первоначальное
изображение
• Тяжело найти
первоначальное
изображение
webo.in / webo.name
10 / 14
data:URI
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA
ABAAAAALCAIAAAD5gJpuAAAAGXRFWHRTb2Z0d2FyZ
QBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUKM9tj
z1OwlEQxH8P/hV2NIZY0NhYeA0TbkLLPTyFV6DgLhYWF
IaOmEhM3szbtXhEPmSy2Z3d2Y9sORySEyKih87iCg4GY
DIByEwoQGbPCowzR3mG3e576Jsz85zkLZRSIqIsFrlc5n5
PBK1la0Rka2lfeDun07JafQ2bTTw/l+0WOy3klFLKWq/9fA4
wADZS/g10ufdVpeqxYheIAehHq9Li1PrvgpQQw5rxk15/6m
fYWR1yVIUc0pFUNync7vyw5m14gbHfQx+3l3di4Vba4z0M
ASOZ2Swl3LCQitQ/w8amtW4B5QBxZlymVxLwCz+JZR4A
eSrEAAAAAElFTkSuQmCC
webo.in / webo.name
11 / 14
Дерево пост-загрузки
• array.js
– dom.js
• effects.js
– lightbox.js
– animatioc.js
– events.js
– ajax.js
• clientsize.js
• HTML: <script src=“array.js”></script>
webo.in / webo.name
12 / 14
Бонусы
• «Разгони свой сайт» – первая русская
книга о клиентской оптимизации
• NGENIX.net – первая в России CDN
• DURIS.ru / Sprites.in – автоматическое
создание data:URI / CSS Sprites
• Web Optimizer – веб-приложение для
автоматизации клиентской оптимизации
webo.in / webo.name
13 / 14
Спасибо. Вопросы?
Зашифруй свой сайт
Мациевский Николай, Parallels
webo.in / webo.name
14 / 14