Время на прочтение
3 мин
Количество просмотров 3K
На написание данной статьи меня подтолкнуло участие в соревнованиях по информационной безопасности — Capture the Flag (CTF). Это был MCTF 2021 , проводимый Московским Техническим Университетом Связи и Информатики.
Таск — Next Level Recon
Описание
Next Level Recon относится к категории MISC (разное) и имеет сложность «Easy», что как бы намекает нам, что таск будет легкий. Помимо описания содержит прикрепленный файл с расширением .pcap
Решение
Первый взгляд
Учитывая, что нам дан pcap-файл — это без сомнения дамп сетевого трафика. Рассмотрим его подробнее в анализаторе сетевого трафика — WireShark.
В дампе всего 26 пакетов, присутствуют только протоколы TCP и HTTP. Причем отправитель и получатель — это один и тот же IP-адрес.
Восстановление трафика
Попробуем собрать поток HTTP-трафика. Для этого щелкаем правой кнопкой мыши на HTTP-пакете и выбираем «Follow -> HTTP Stream«.
После сбора потока HTTP-трафика, мы наблюдаем картину обычного GET-запроса HTTP и ответа ему.
Судя по содержимому, ничего особенного здесь не происходит:
-
Скачивается иконка сайта (favicon.ico)
-
Выводится строка «Site in development…«
Так как в описании задания говорится, что нужно найти какой-то сайт, то можно попробовать «пихать» в поисковики специальные поисковые запросы с определенными строками и параметрами, но заранее скажу, что данный способ здесь не поможет. Поэтому под наш прицел попадает именно favicon.ico. Попробуем вытащить его из дампа.
Экспорт объектов из HTTP-трафика
На самом деле здесь все просто — WireShark сделает все за нас. Нужно только нажать «File -> Export Objects -> HTTP…«
Далее просто нажать «Save All» и указать путь куда файлы будут сохранены.
Открыв для просмотра файл «favicon.ico» можно предположить, что он такой же, как и у самого сайта https://mctf.online, на котором и проходили соревнования. Судя по описанию таска, наши предположения должны быть верными. Проверить это на практике можно путем расчета контрольных сумм двух иконок (они совпадают).
Поиск по хешу
По заданию нам необходимо найти сайт, на который переехал сайт из дампа. Первое что приходит на ум — это искать в Shodan. У нас из исходных данных — файл favicon.ico. Продолжая верить в то, что это такая же иконка, как и у основного сайта соревнований, посчитаем MurmurHash от него.
Для этого на GitHub есть даже за нас написанный скрипт. Модифицируем его под наши исходные данные и получим следующее:
import mmh3
import requests
import codecs
response = requests.get('https://mctf.online/favicon.ico')
favicon = codecs.encode(response.content,"base64")
hash = mmh3.hash(favicon)
print(hash)Скормив этот скрипт питону, получим хеш: -535199269
Остается скормить этот хеш в Shodan, применив специальный фильтр http.favicon.hash:
Как видно из результата запроса — найдено 3 совпадения, одно из которых это сам сайт https://mctf.online, а второй с говорящим названием «Flags are here!«. Наша теория подтвердилась! Зайдем на страницу по IP-адресу, на который указывает «Flags are here!«, чтобы забрать наш флаг:
Вывод
Таким образом можно искать любые сайты в Интернете — просто узнав MurmurHash соответствующего favicon.ico. Это может быть полезно, если сайт переехал на другое доменное имя, либо вы вообще не знаете ни доменное имя, ни IP-адрес, либо просто хотите посмотреть какие еще сайты хостятся с данным фавиконом.
14.05.2021 От: faq Из: Общие
@WebforSelf
Был сайт интересный который запомнил по фавикону, теперь не могу его найти, остался только фавикон. Можно как то найти его по нему?
Поиск по картинкам только выдает НТВ блин)
Решения вопроса 0
Ответы на вопрос 1
@Zettabyte
Быстро можно сказать только то, что сайт https://trove.nla.gov.au/ имел вот такой логотип:
Trove
Глубже вам, скорее всего, надо копать самостоятельно.
Похожие записи:
- Тротлинг видеокарты asus zephirus s17 gx701lxs
- Реализация простого общего указателя C ++
- разделение чисел на три фактора
- БП, цикличный скрип
- ПК зависает без BSOD и перезагружается
Добавить комментарий
Ваш адрес email не будет опубликован. Обязательные поля помечены *
Комментарий *
Имя *
Email *
Сохранить моё имя, email и адрес сайта в этом браузере для последующих моих комментариев.
Сегодня хочу «спалить» способ как можно посмотреть фавикон (favicon) с любого сайта не заходя на сайт.
В двух словах напомню тем кто забыл: Favicon (сокр. от англ. FAVorites ICON — «значок для избранного», от названия папки с закладками) — значок веб-сайта или веб-страницы. Отображается браузером в адресной строке перед URL страницы, а также в качестве картинки рядом с закладкой, в вкладках и в других элементах интерфейса.
Традиционно использовались изображения размера 16×16 пикселей формата ICO, помещённые в корень сайта под именем favicon.ico
у Google есть так сказать специальный сервис через который можно посмотреть иконку
www.google.com/s2/favicons?domain= тут дописываем домейн
например
http://www.google.com/s2/favicons?domain=webtun.com
у Яндекса тоже есть такая опция (правда Яндекс показывает favicon только с проиндексированного им сайта)
http://favicon.yandex.net/favicon/webtun.com
Faviconize Google
Кто хочет может поставить себе скрипт который добавляет фавиконы на страницу поиска Google. Как Яндекс. Работает в последних версиях Firefox, Opera и Safari.
Скачать
faviconize-google.user.js
офф. страничка
Faviconize Google
Как установить?
в Опере
1) Открываем Preferences → Advanced → Content → jаvascript Options…
2) Указываем в User jаvascript files папку, куда мы будем класть скрипты
в Firefox
1) Устанавливаем расширение
Greasemonkey
.
2) Открываем *.user.js файл.
в Internet Explorer
1) Устанавливаем
IE7 Pro
2) Открываем ieuser.js файл. Вот, например,
GoogleAutoPager2008.ieuser.jsв Safari
1) Устанавливаем
GreaseKit
2) Открываем *.user.js файл
Советы
Что такое фавикон и как его создать
Что такое фавикон
Фавикон (favicon) — это иконка, расположенная перед названием страницы во вкладке браузера. Как правило, картинка содержит логотип, первую букву наименования бренда либо изображение, релевантное тематике ресурса.
Фавикон позволяет легко найти нужный сайт среди множества вкладок
Фавикон — это картинка, значок веб-страницы. Впервые такие изображения начали использовать в браузере Internet Explorer. Узнаваемая картинка помогала легко найти нужный сайт среди множества открытых вкладок. Называли такие картинки FAVoritesICON — в переводе «значок для избранного», отсюда и упрощённое наименование — favicon.
Сейчас фавикон присутствует не только на вкладках, но и на панели закладок, в истории и закладках браузера, в десктопной и мобильной выдаче поисковых систем.
На мобильном экране фавикон служит дополнительным элементом для привлечения внимания
Вне зависимости от места своего размещения, фавикон привлекает внимание пользователей, и помогает запомнить сайт.
Для чего нужен фавикон
Основное предназначение фавикона — выделить бренд или его сайт среди браузерных вкладок. При отсутствии иконки на вкладке отображается картинка чёрно-белой планеты, по которой невозможно распознать сайт. Представьте, что в вашем браузере одновременно открыто 10-15-20 вкладок. При таком количестве открытых страниц текст заголовка просто не виден, и распознать нужный сайт можно только по изображению.
Кроме того, фавикон — это возможность сделать бренд более узнаваемым и запоминаемым для аудитории. Картинка привлекает внимание, запоминается и ассоциируется с брендом. Позже, когда пользователи видят ту же иконку в поисковых результатах, в рекламных объявлениях или закладках, они вспоминают о бренде.
Владельцам сайтов фавикон полезен тем, что:
- обеспечивает узнаваемость сайта и, соответственно, бренда;
- выделяет ресурс среди конкурентов;
- косвенно подтверждает внимательность владельца к деталям;
- дополняет единый стиль оформления сайта.
Посетителям фавикон облегчает поиск вкладки либо закладки.
Большинство пользователей легко угадает названия сайтов по этим значкам в диспетчере закладок браузера и без подписи
Дизайн фавикона
Три главные характеристики хорошего фавикона — это чёткость, простота и запоминаемость. Изображение должно быть понятным, запоминающимся и легко узнаваемым.
Чтобы понять, насколько качественной получилась готовая иконка, рекомендуем ответить на следующие вопросы:
Выделяется ли фавикон на фоне конкурентов? Посмотрите выдачу поисковика по вашим ключевым запросам и изучите фавиконы. Обратите внимание на форму, цвет и содержание картинок конкурентов. Вам необходимо придумать что-то, что будет кардинально отличаться.
Вызывает ли фавикон ассоциации с брендом, сайтом или видом бизнеса? Хорошая иконка при первом взгляде на неё помогает вспомнить категорию сайта или определить принадлежность к бренду. В качестве эксперимента можно показать изображение сторонним лицам и спросить, какие связанные мысли у них возникают.
Понятно ли, что именно изображено на фавиконе? Учтите, что на небольшой картинке будет сложно различить мелкие детали. Постарайтесь избегать слишком ярких цветов. Они будут отвлекать внимание от содержания сайта.
Не ошибиться и сделать иконку с корректным отображением в разном контексте помогут специальные онлайн-сервисы. К примеру, Realfavicongenerator позволяет проверить, как выглядит фавикон для сайта на разных ресурсах.
В Realfavicongenerator еще на этапе регистрации можно посмотреть, какие браузеры и платформы поддерживает сервис
Помимо проверки и демонстрации отображения сервис даёт рекомендации, что стоит улучшить в иконке.
Realfavicongenerator показывает иконку на выбранной платформе и советует, что надлежит улучшить
Что касается непосредственно создания иконки, важно правильно подобрать размер и формат картинки.
Размер фавикона
Favicon — растровое изображение и измеряют его в пикселях.
Стандартный размер фавикона, поддерживаемый большинством браузеров и устройств — 16×16 px в формате .ico.
Но в зависимости от операционной системы и версии браузера размер варьируется — 24х24, 32х32, 64х64 и более. Например, Google рекомендует создавать фавиконки, кратные 48 пикселям — 48 x 48, 96 x 96, 144 x 144 и т. д. Это помогает масштабировать картинку в браузере без ухудшения качества.
Для формата .svg точные размеры не предусмотрены. Главное, сделать картинку квадратной.
На устройствах Apple, начиная с версии iOS 1.1.3, и на некоторых устройствах с ОС Android применяют большие иконки. Это позволяет использовать фавиконы как значки веб-приложений. Так рекомендуемый размер иконки для iPhone равен 60×60 px, для iPhone с retina-дисплеем — 120×120 px.
Для iPad и iPad с retina-дисплеем, рекомендуют иконки размером 76×76 и 152×152 пикселя соответственно.
Для устройств на Android с браузером Chrome оптимальны фавиконы размером 192×192 пикселя в формате .png.
Существует огромное количество мониторов, браузеров, устройств с разными требованиями к размерам фавикона. Для каждой операционной системы предусмотрены свои стандартные размеры иконок. Например:
Формат favicon
Изначально картинки для фавиконов создавали только в формате .ico. Этот формат использовал для закладок Microsoft Internet Explorer. Иконки помещали в корневой каталог сайта под именем favicon.ico.
Формат .ico удобен, поскольку в нём можно указать несколько размеров иконок с различной битностью. Минус в том, что браузеры не всегда правильно выбирают размер изображения и в итоге фавикон отображается в низком разрешении.
Позже на смену .ico пришли форматы .png и .svg. Они хорошо отображаются и меньше весят. Большинство современных платформ и операционных систем поддерживают .png, а формат .svg используют в Safari MacOS.
Иногда фавиконки делают в форматах .jpeg и .gif. Это допустимо, но нежелательно, поскольку поддерживают эти форматы не все браузеры. Firefox и Opera разрешают использование анимированных «гифок», но не рекомендую их применять — движущиеся картинки будут отвлекать внимание посетителя при просмотре сайта и раздражать пользователя при отображении среди браузерных вкладок.
В таблице показаны версии основных браузеров и поддерживаемые ими форматы фавикона:
| Основные браузеры и поддержка различных форматов фавикона в разных версиях | |||||||
|---|---|---|---|---|---|---|---|
| Браузер | ICO | PNG | JPEG | SVG | GIF | APNG | GIF-анимация |
| Google Chrome | Да | От 4.0 | От 4.0 | Нет | От 4.0 | Нет | Нет |
| Opera | От 7.0 | От 7.0 | От 7.0 | Нет | От 7.0 | От 9.5 | От 7.0 |
| Firefox | От 1.0 | От 1.0 | Да | Да | От 1.0 | От 3.0 | Да |
| Internet Explorer | От 5.0 | От 11.0 | Да | Нет | От 11.0 | Нет | Нет |
| Safari MacOS | Да | От 4.0 | От 4.0 | Да | От 4.0 | Нет | Нет |
На текущий момент основные форматы для фавикона — это .ico и .png. Формат .jpeg в некоторых случаях может отображаться некорректно. Для Safari MacOS лучше применять .svg. А вот прочие форматы использовать нецелесообразно из-за плохой поддержки.
Для хорошего отображения фавиконов в разных контекстах желательно создавать иконки в двух вариантах:
- С прозрачным фоном. Значок будет показан рядом с URL-адресом: в закладках, в адресной строке и прочее.
- Со сплошной заливкой. Отображается там, где устройство или браузер использует маску для фона: в контекстном меню, в сетчатых закладках.
В таблице я показала, какие стиль и размер фавикона в форматах .png/.svg выбрать для разных браузеров и операционных систем
|
Классические десктопные браузеры |
|||
| 16×16, 32×32, 48×48 | PNG | Прозрачный | |
|
Браузер Safari |
|||
| Вектор | SVG | Прозрачный | |
|
Мобильный браузер Opera |
|||
| 228×228 | PNG | Сплошная заливка | |
|
Windows 8.0 |
|||
| 144×144 | PNG | Прозрачный | |
|
Windows 8.1 |
|||
| 128×128, 270 x 270, 558×558 | PNG | Прозрачный | |
|
Apple iOS |
|||
| 180×180 | PNG | Сплошная заливка | |
|
Google Android и Chrome |
|||
| 192×192, 512×512 | PNG | Сплошная заливка |
Конечно, сложно представить даже в нескольких таблицах все возможные вариации иконок. Если вы не знаете, какой именно размер фавикона вам необходим, воспользуйтесь специальными сервисами. Например, генератор Favicomatic предлагает на выбор различные размеры иконок и к каждому значку показывает подсказку для лучшего соответствия.
Favicomatic показывает возможные размеры фавикона и в подсказке рассказывает, где их можно применять
Если вы всё же сомневаетесь, какой размер фавикона выбрать, используйте значки размером 16x16px или 32x32px в формате .ico или .png. Но если вы хотите максимально позаботиться об UX/UI, желательно учесть требования платформ относительно оптимальных размеров.
Теперь, когда мы немного разобрались в размерах и форматах, можно переходить к созданию иконок. Оптимальный вариант — использование сервисов.
Генераторы для создания фавикона
Найти сервисы для генерации фавиконов можно в поиске по запросу «favicon онлайн». Большинство таких инструментов обладают схожим функционалом: вы загружаете картинку, указываете формат и размер, а сервис выдаёт вам готовую иконку для скачивания. Некоторые генераторы позволяют создавать фавиконы с нуля, выбирая цвета, формы и прочее.
Favicon.by
Сайт
В Favicon.by вы можете нарисовать фавикон или конвертировать загруженное изображение
Позволяет самостоятельно нарисовать фавикон на сайт и отредактировать его. Можно импортировать изображение из файла или с сайта и подкорректировать до нужного вида. Как будет отображаться фавикон, можно посмотреть до скачивания. Результатом генерации становится картинка размером 16×16 пикселей в формате .ico.
Logaster
Сайт
Создание фавикона из логотипа в Logaster
Условно-бесплатный сервис 2 в 1. Здесь можно создать логотип, а потом на его основе сгенерировать фавикон. Можно создать логотип любых размеров в форматах pdf, .svg, .png, .jpeg. Один маленький логотип на белом фоне доступен бесплатно, для скачивания остальных нужно оплатить доступ к сервису.
Perfectoweb
Сайт
Интерфейс генератора фавиконов Perfectoweb
Инструмент для создания фавиконов в популярных размерах: 16х16, 32х32, 48х48, 64х64, 128х128. Процесс создания максимально прост: загрузить картинку, выбрать размер, скачать иконку.
Favicon.io
Сайт
Favicon.io предлагает несколько вариантов создания фавикона
Сервис, позволяющий создать фавикон из картинки, текста или эмодзи. Можно выбрать цвет фавикона и фона. Генерирует иконки в формате .ico и .png нескольких вариантов размера. Можно скачать иконку или скопировать нужный код для вставки фавикона на сайт.
Если по какой-то причине вам не подходят сгенерированные фавиконы, скачайте готовые иконки. Например, на сайте faviconka, а по запросу «скачать фавикон» вы найдёте множество похожих ресурсов. Также можно нарисовать иконку в Photoshop, Illustrator, Figma или заказать у профессионального дизайнера.
Как разместить на сайте
Чтобы добавить фавикон на сайт без CMS, нужно:
- Вставить между тегами
<head>…</head>на главной странице сайта фрагмент кода с адресом значка и типом передаваемых данных. Вам необходимо указать путь к месту хранения иконки — URL. Затем название файла с иконкой и используемый формат — например, favicon.png.
<head>
...
<link rel="icon" href="https://URL сайта/favicon.ico" type="image/x-icon">
...
</head> - Если вы редактировали страницу вне хостинга, загрузите файл редактируемой страницы на хостинг с заменой существующего файла и сохраните. Удобнее редактировать файл прямо на хостинге, подключившись к нему при помощи редактора кода по FTP. Например, через Notepad++.
- В корневую папку сайта («public_html»; «html»; «site»; «www») либо в папку с изображениями загрузите файл иконки. Используйте файловый менеджер в панели управления хостинга или сторонний FTP-клиент.
Пример HTML-страницы с добавленным кодом фавикона
После добавления кода посмотрите, как фавикон выглядит в популярных браузерах. Для этого добавьте к URL сайта адрес сервиса:
- для Яндекс — http://favicon.yandex.net/favicon/mysite.ru
- для Google — http://www.google.com/s2/favicons?domain=mysite.ru
Для сайтов на CMS (WordPress, Drupal, Joomla) фрагмент кода также добавляют между тегами head в файл шаблона шапки сайта header.php.
Для сайтов, созданных на конструкторе, задача упрощается — найдите в настройках раздел «Favicon», загрузите изображение в требуемом формате и размере, разрешите применение и переопубликуйте страницы.
Распространенные ошибки
Существуют разные причины, по которым фавикон не отображается. Например:
Кеширование страниц браузером. Для устранения проблемы очистите кеш браузера и обновите страницу. Комбинация клавиш «CTRL + F5» поможет почистить кеш, оставаясь на странице.
Неверный формат либо размер иконки. Проверьте совместимость формата и наличие всех необходимых атрибутов в коде фавикона.
Ошибка в размещении кода. Убедитесь, что код фавикона расположен в блоке <head>.
Прошло слишком мало времени. Индексация фавикона поисковиками может занимать от двух недель до двух месяцев.
Запрет на индексацию иконки в файле robots.txt. Разрешите индексацию: исправьте Dissalow: favicon.ico на Allow: favicon.ico.
Неуместное изображение. Проверьте, что изображение не содержит элементы, похожие на запрещённые символы (оскорбительные картинки, изображения 18+).
Низкое качество либо неуникальность фавикона. Поисковик иногда игнорирует иконки с низким разрешением либо скопированные с других ресурсов.
Фильтры поисковых систем на сайте. Косвенные признаки фильтров: снижение посещаемости без явных причин, выпадение из поиска значительной доли страниц, сообщение о проблемах на сайте в Google Search Console или Яндекс.Вебмастере.
Если найти причину не удаётся, протестируйте фавикон на отображение и валидность в специализированных сервисах. К примеру, Favicon Checker показывает отображение фавикона в различных браузерах и сообщает о проблемах.
Сервис уведомляет об отсутствии в корневом каталоге значка Touch для iOS Safari
Запомнить
Что такое фавикон? Это значок сайта, расположенный рядом с title страницы.
Фавикон способствует росту узнаваемости сайта и его выделению на фоне иных ресурсов.
Изображения для фавикона чаще всего создают в форматах .ico, .png, .svg.
Размер иконки варьируется от 16х16 px и зависит от места размещения.
Быстро создать фавикон помогают сервисы-генераторы.
Готовую иконку размещают в блоке <head> в корневом каталоге сайта .
Найти ошибки отображения помогают сервисы-чекеры.
ЭКСКЛЮЗИВЫ ⚡️
Читайте только в блоге
Unisender
Поделиться
СВЕЖИЕ СТАТЬИ
Другие материалы из этой рубрики
Не пропускайте новые статьи
Подписывайтесь на соцсети
Делимся новостями и свежими статьями, рассказываем о новинках сервиса
«Честно» — авторская рассылка от редакции Unisender
Искренние письма о работе и жизни. Свежие статьи из блога. Эксклюзивные кейсы
и интервью с экспертами диджитала.
На поиске, по фавиконке, мы можем быстро идентифицировать знакомый нам бренд.
Например, легко найти в выдаче популярные бренды, такие как: Авито, Wildberries, Яндекс.Маркет, Сбер, Тинькофф, Apple, Вконтакте и тд.
Этим, кстати, пользуются мошенники, создающие копии сайтов.
Посмотрите на поисковую выдачу с айфонами, там сайты не брезгуют использовать такой же favicon, как у компании Эппл. При беглом просмотре выдачи, не сразу определишь, где настоящий сайт.
Поэтому, уделите время, созданию хорошей иконки, по которой в дальнейшем, возможно, будут идентифицировать ваш сайт или сайт вашего клиента
И ни в коем случае, не используйте стандартную иконку Tilda Publishing. Потому что, выглядит это крайне плохо и непрофессионально (особенно, если вы занимаетесь разработкой сайтов профессионально)