Как я hiddenkeywords проходил

Продолжаем проходить различные "квесты" и "пазлы" на просторах интернета. На этот раз в руки мне попался https://hiddenkeywords.com/ Это испытание было создано студией Propellernet - студия маркетингового консалтинга из Англии.

Немного о себе

Я уже писал, что никак не связан с SEO или поисковой оптимизацией, а сейчас занимаюсь Машинным обучением. Тем не менее, в детстве мне были интересны вопросы работы сайтов в разных аспектах, так сказать. С того времени осталось немного в голове, помноженное умением беглого гугления. Так что извиняюсь, если кого обидел своим абсолютно ламерским подходом к SEO, к которому я скорее имею отношение только постольку поскольку.

Откуда и зачем я вообще занялся разгадыванием задач? Это все благодаря Левашову Игорю (Ссылка на его страницу), с которым мы познакомились в чате, посвященному Цифровому прорыву. Там меня взяли на слабо, а дальше завертелось. По его же наводке я проходил и technicalseo.expert из предыдущих статей на Хабре. Надеюсь, продолжу и дальше решать задачки, если мне не изменяет память, то у него есть еще подобные.

Предупреждение!

Если кто-то хочет лично пройти этот челендж - дальше читать противопоказано. Будут скрины и тексты.

Если вы не боитесь спойлеров - поехали!

Инструменты

Все уровни были пройдены с открытым Developers tools на Chrome. Там можно и html страницы поглядеть, и на responce полюбоваться. Так же были использовано немного стороннего софта, но о нем чуть позже, пусть это останется интригой.

Встречают по одежке

Нас встречает приятный сайт в темной теме. Достаточно стандартно. Почти сразу нас вводят в курс дела: на сайте спрятано 20 спрятанных фраз. Именно их мы и будем искать!

Теперь заглянем во внутренности! Полную страницу не буду приводить сразу, а медленно будем исследовать содержимое. Тем не менее, покажу пока самое интересное для нас: тут есть подсказки к этим спрятанным словам.

<div class="results">
  <div class="number clue" data-tippy-content="?">1</div>
  <div class="number clue" data-tippy-content="The keyword is here">2</div>
  <div class="number clue" data-tippy-content="?">3</div>
  <div class="number clue" data-tippy-content="🍪">4</div>
  <div class="number clue" data-tippy-content="Inspect this">5</div>
  <div class="number clue" data-tippy-content="📈">6</div>
  <div class="number clue" data-tippy-content="x-🤖">7</div>
  <div class="number clue" data-tippy-content="13th August, 2019">8</div>
  <div class="number clue" data-tippy-content="🐸">9</div>
  <div class="number clue" data-tippy-content="?">10</div>
  <div class="number clue" data-tippy-content="?">11</div>
  <div class="number clue" data-tippy-content="bingo">12</div>
  <div class="number clue" data-tippy-content="?">13</div>
  <div class="number clue" data-tippy-content="ld+json">14</div>
  <div class="number clue" data-tippy-content="🔓">15</div>
  <div class="number clue" data-tippy-content="Try searching">16</div>
  <div class="number clue" data-tippy-content="?">17</div>
  <div class="number clue" data-tippy-content="🗺">18</div>
  <div class="number clue" data-tippy-content="💡🏠">19</div>
  <div class="number clue" data-tippy-content="🎨">20</div>
</div>

Намеки. Какие-то очевидные, какие-то не совсем. Тем не менее, я буду описывать решения не в хронологическом порядке, иногда оставляя ремарки о том как быстро получилось разгадать ту или иную задачу. На все прохождение я потратил астрономически 3 дня, приступив к игре утром 3 мая.

Первые разгадки

Думаю, многие уже догадались минимум о четвертом слове: печенка уж слишком явно намекает. Но дойдем и до cookies, а пока первый шаг для всего SEO - проверка robots.txt

Вводим слово museum и...

Немного картинок

И внезапно решено первое слово. Действительно, любой SEO-забег начинается с robots.txt

Вторая задача кажется сложнее: "The keyword is here", но это только на первый взгляд. Давайте присмотримся получше к надписи по Hello

<div class="description fadeout" id="desc">
  <h1>Hello</h1>
  <p>This is a puzzle for technical SEOs.</p>
  <p>There are twenty hidden keywords.<span class="likethis">One of them is here.</span> Can you find them?</p>
</div>

Так, думаю, стало виднее, а именно странный кусок <span class="likethis">One of them is here.</span>

Перебираем все слова здесь и находим заветное here. Второе ключевое слово с нами.

Третье слово мы найдем гораздо позже, ближе к середине расследования, когда нас кинет на несуществующую страницу с кодом ошибки 404. Для это, например, достаточно добавить index.html к ссылке. За одно покончим с еще одной гипотезой, которая не сыграет...

Ссылка на 404 страницу

Пока ничего сложного. Пришло время проверять cookie. Переходим в Developers Tool в Google Chrome, открываем вкладку Application, выбираем Storage-Cookies и наш сайт. В итоге видим что-то подобное:

Пробуем и радуемся! Это слово, кстати, было найдено первым, даже не смотря на то, что все остальные рядом тоже были найдены достаточно быстро.

Пятое ключевое слово ждет нас в консоле.

Четверть пути уже пройдено.

Узнаем что-то новое...

Шестой вопрос с подсказкой 📈 для меня оказался самым сложным. Именно после того, как поддалось это слово на меня посмотрела с той стороны монитора страница с поздравлениями. Чего только я не пытался сделать ради этого: и смотрел и среди графиков загрузки, думая, что там какой-то особый рисунок будет складываться, например, азбукой морзе, и пробовал даже получить что-то через гуглтренды. Замерял работу сайта и скриптов.

Скажу честно - ушел где-то день, пока я не написал Игорю Левашову. Некоторое время мы обсуждали в чате, что же может означать график. Внезапно Игорь сказал, что возможно это какая-то аналитика. Google Analytics!!!!

Начинаем смотреть вызовы скрипта analytics.js - так как он скачивается с сайта Google, то вероятность его модификации минимальная. Тем не менее, пробуем большинство строк, которые кажутся подозрительными - пусто.

Просматриваем параметры запросов - тоже глухо.

Снова целый час ходим вокруг да около. Просматриваем работу скрипта, который скачивает скрипт Google Analytics. Просматриваем под лупой, каждый чих - брекпоинт. НИЧЕГО!

<script>
  (function(d,r,a,s,t,i,c){d['GoogleAnalyticsObject']=t;d[t]=d[t]||function(){
    (d[t].q=d[t].q||[]).push(arguments)},d[t].l=1*new Date();i=r.createElement(a),
    c=r.getElementsByTagName(a)[0];i.async=1;i.src=s;c.parentNode.insertBefore(i,c)
                          })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
  ga('create', 'UA-145490457-1', 'auto');
  ga('send', 'pageview');
</script>

Около получаса я мидитировал над этим кодом и...

function(d,r,a,s,t,i,c){d['GoogleAnalyticsObject']=t

d,r,a,s,t,i,c...

Пробуем! Бинго!

Седьмой подсказкой пользоваться с одной стороны легко. Во вкладке Network смотрим полученные файлы и в hiddenkeywords находим нужный тег:

Проверяем нашу догадку - все верно. Переходим к следующей загадке. Какие манипуляции с датой. Пробую сначала отправить запрос "из прошлого" - никакого эффекта. Гуглим дату - день левшей. Пробуем lefty - снова мимо. Что-то как-то сложновато...

И тут в голову приходит идея - а что если поискать в веб-архиве?

Не так уж и трудно. Теперь лягуха! Я в замешательстве... Пытаюсь загуглить хоть что-то по теме. Первая ссылка в выдаче: Screaming Frog SEO Spider Website Crawler - звучит как план. Скачиваем, предварительно запустив VPN, так как для моего IP почему-то скачивание закрыто, подозреваю, из-за санкций, запускаем.

Пытаемся ввести two - мимо. Как так?! Пытаюсь понять, что же там лягух нашел.

jericho - и это уже срабатывает!

Дальше подсказок никаких нет. Что же делать? Ну раз пошла тема краулеров и пауканов, то что, если попробовать другие? Хронологически примерно так и случилось. Сначала лягух, а потом 10, а чуть позже и 12, но о нем позже.

Меняем User-Agent (этого окажется достаточно, но я был готов накрутить больше настроек) в Chrome, а для этого переходим на вкладку Network conditions. Путем перебора, находим некоторых роботов, начнем с робота Googlebot.

Тадам!

Тадам! Меня заметили!

<div class="description fadeout" id="desc">
  <h1>I see you</h1>
  <p>Pretending you're Googlebot.</p>
  <p>But you're not. <span class="welldonethough">subterfuge.</span> You're not Googlebot.</p>
</div>

Пробуем найденное слово - так и было задумано.

Половина позади. Осталась еще половина!

Давайте теперь посмотрим на ссылку. Чего-то не хватает. А что, если добавить www? Проверяем догадку и ничего не происходит. Или происходит? Лезем в нашу любимую вкладку Network и видим странные вещи.

Пара редиректов. Подозрительно... И я не ошибся. airbrake - одно из искомых слов.

Теперь подошли к двенадцатому слову. Bingo. И тут есть два пути получить ответ. Первый из них - прикинуться поисковым роботом Bing от Microsoft. Делаем то же самое, что и на десятом шаге в настройках Developer Tools, только уже выставляем User-Agent на Bing. Альтернатива - просмотреть сохраненную в кеше Bing копию страницы.

Отлично. Еще одно слово. И снова на пути неизветсность! А что, если заглянуть в кэш Google?

Осталось еще немного и только один вопрос без подсказок. Переходим к подсказке ld+json. Такой кусок скрипта можно заметить в head страницы.

<script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "Clue"
}
</script>

Пробуем Clue - нет эффекта. Тогда открываем валидатор на schema.org и...

Пробуем interlinked и у нас получается.

Пятнадцатый вопрос же вполне очевидный. Убирает "s" в адресе и получаем незащищенный протокол. В итоге снова во вкладке Network замечаем пару редиректов, один из которых будет искомым словом.

И последний рывок

Шестнадцатый снова отправляет нас к гуглу, как к поисковику. Ищем по сайту с помощью специального запроса в поисковике.

С семнадцатым вопросом я разобрался достаточно быстро, так как ссылка была на видном месте - прямо в head нашего файла.

<link rel="canonical" href="https://hiddenkeyword.com">

Осталось совсем немного! 🗺 - что же это может значить? Карта... Sitemap...

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://hiddenkeywords.com/neutral</loc>
</url>
</urlset>

И вот еще одна ссылка.

Переходим к предпоследнему заданию. 💡🏠 - снова шарады! Свет... Дом... Попробуем сделать страницу домашней и... Ничего! Опять. Если за каждую идею мне надо было платить по рублю - кто-то стал бы уже миллионером. Надо думать дальше. Light... Home... House! Lighthouse! Есть такая вкладка в Developer Tools. Запускаем страницу на этой вкладке и получаем то, что искали.

Остался последний шаг. 🎨 - палитра. Скажу сразу, но мне эта подсказка не помогла, я нашел гораздо раньше. Случайно заглянул в css файлик и все стало ясно.

*! syndicate */
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

Самое первое слово! Бинго!

Послесловие

Не самое сложное испытание, тем не менее график меня заставил попотеть. Надеюсь, у вас получится пройти без этих подсказок, но если нет - всегда добро пожаловать. Если будет интересно, то буду продолжать.

Кстати, кто знает еще какие-либо задачки?