Как я 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 }

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

Послесловие

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

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