Front-end и блокировщики рекламы (на примере Adblock Plus)
Хочу поделиться небольшим опытом работы с блокировщиками рекламы со стороны front-end разработчика. Все понимают, что наша задача сделать так, чтобы сайт нормально работал и выглядел при любых настройках пользователя, на любых устройствах. Я иногда посматриваю постоянно проверяю как выглядит сайт при отключенном javascript, проверяю работу на touch-устройствах, устройствах с маленьким разрешением итд. итп. После того, как у нас на сайте из-за Adblock Plus (далее по тексту просто Adblock) перестал работать видео-плеер — стало понятно, что наличие блокировщика рекламы также нужно учитывать при верстке сайта…
Однажды к нам в службу поддержки посыпались письма о неработающем видео-плеере. Методом тыка Путем долгих изысканий было установлено, что Adblock блокирует яндекс видео-рекламу, которая показывается у нас перед роликами. Такого хамства исключения в плеере не было предусмотрено — поэтому при включенном блокировщике, вместо ролика, постоянно крутился прелоадер.
Первый вопрос — а сколько вообще таких юзеров. Опрос на хабре показал печальные данные. На нашем сайте яндекс-метрика показала более 8% пользователей с включенным блокировщиком.
Думаю, реальная цифра гораздо выше (например, известные метрики так же могут блокироваться), но и имеющихся данных оказалось достаточно, чтобы установить блокировщик и взглянуть на сайт сняв розовые очки еще раз.
Оказывается, помимо общеизвестных сервисов рекламы (гугл, яндекс) были вырезаны и некоторые наши картинки и блоки, причем не все связанные с рекламными объявлениями.
Пришлось чинить. Выяснилось, блокировщик режет все картинки, в путях которых содержится упоминание о рекламе: /ad/banner/. Кроме путей, Adblock может резать содержимое по атрибуту id (adblock, AdDiv итд), названию классов(Adv итд), самому названию картинок (728×90.png итд), стилям. Названий очень много, но все можно посмотреть в файлах со стандартными фильтрами блокировщика:
Переименовав все, что только можно Заменив привычное мне ad на другое название, я с удовлетворением обнаружил, что все наши рекламные блоки вновь появились на сайте и моя верстка имеет одинаковый вид, с Adblock и без него. Ощущая гордость за проделанную работу, я стал вновь заниматься привычными делами.
Менее, чем рез месяц, я обнаружил, что самая назойливая наиболее важная для нас реклама опять заблокирована. Такую рекламу я расположил отдельно, в папке illumination.
Помимо стандартных фильтров, Adblock имеет подписки — это те же текстовые списки готовых фильтров, которые могут создаваться многими авторами; они встроены в расширение и пользователь может сам выбрать нужные ему. В списке стандартной подписки:
Я обнаружил такую строчку:
Стало понятно, что реклама надоела пользователям и нас добавили уже в список подписки.
Дальше было два пути решения проблемы:
1. Продолжать бороться с Adblock, периодически меняя названия, придумывая другие способы обхода блокировщика
2. Смириться с положением дел и подумать над альтернативным решением.
На примере борьбы Facebook с Adblock, да и на собственном примере, было понятно, что борьба будет длиться бесконечно и в любом случае будет вести блокировщик — он будет заниматься своим прямым делом, а ты, вместо того, чтобы развивать сайт, — бороться с ветряными мельницами.
Но и отказаться от показа рекламы мы не могли — мы не интернет магазин, мы не продаем никакие статьи, работаем честно и показ рекламы на сайте — это наш основной источник дохода. Без нее невозможно наше нормальное существование и развитие. Даже хабр вынужден показывать рекламу, очень хорошо объясняя эту необходимость — habrahabr.ru/adblock
В итоге было решено: попробовать определять наличие блокировщика и показывать таким пользователям грустного котика. При этом котик не должен быть в каком-то адском попапе или постоянно занимать пол-экрана — в противном случае он сам скоро попадет в блокировщик и/или приведет к оттоку посетителей. Достаточно сделать так, чтобы на него обратили внимание, его главной целью было надавить на жалость объяснить пользователю необходимость показа рекламы. В результате наверху сайта появился обычный блок с таким вот содержимым:
Оставалось выяснить, как определить включен или нет блокировщик рекламы. Первое, что приходило на ум — это вставить в разметку элемент который точно подпадает под стандартный фильтр и проверять средствами js его наличие. Если элемента нет — значит адблок включен. На деле оказалось все немного сложнее. Несмотря на то, что рекламы не видно на сайте — рекламный блок есть в DOM-дереве и определять его наличие недостаточно. Необходимо, чтобы у элемента были размеры, он не был бы «выкинут» из потока (то есть без display:none) и если у элемента нулевая ширина — значит он заблочен:
Вполне возможно, что через некоторое время Adblock придумает что-то другое или добавит этот код в фильтр, и данная проверка перестанет работать, но на момент написания статьи котик на сайте исправно появляется.
Существует еще одна возможность оставить рекламные блоки на странице — У Adblock есть так называемый белый список ненавязчивой рекламы, куда небольшие сайты могут попасть бесплатно. Подробнее можно найти на Хабре:
Здесь посоветовать ничего не могу — мы не пробовали попасть в этот список, вполне возможно чуть попозже смогу дописать что-нибудь существенное.
Спасибо, что дочитали до этих строк, если я смог убедить кого-нибудь из front-end разработчиков посматривать на работу сайта с включенным блокировщиком — это будет приятно. Только не забывайте его отключать — а то можете лишить себя зарплаты ). Что касается того, насколько котик помог в показе рекламных блоков — пока не могу сказать, мы поставили его два дня назад. Если кому-то интересно — через месяц, наверное, смогу скинуть цифру.
Делаем свой блокировщик любой рекламы за 3 минуты
Хакерский метод победить рекламодателей.
Что такое расширение
Расширения (их ещё называют плагинами) увеличивают стандартные возможности браузера. Они помогают быстро сохранить видео с YouTube, узнать, что за шрифт используется на странице, или делают что угодно ещё, в зависимости от их возможностей.
Нам понадобится расширение, которое умеет работать с CSS и подставлять нашу команду в нужный стиль элемента. Мы остановились на User CSS, но вы можете выбрать любой другой вариант, который способен работать с пользовательским CSS. Безопаснее всего ставить расширения из официального интернет-магазина Chrome — перед тем, как попасть туда, они проверяются на вирусы.
Сначала заходим на страницу плагина и нажимаем кнопку «Установить». Браузер спросит вас, точно ли вы хотите это сделать — подтверждаем. Когда всё будет готово, в правом углу браузера появятся соответствующий значок и всплывающая подсказка. С этого момента расширение начнёт работать со всеми новыми страницами, которые вы будете открывать.
Как заблокировать рекламу
Мы специально сделали эту страницу со всплывающим окном, чтобы вы могли на ней потренироваться. Теперь добавим в наш блокировщик правило, которое уберёт назойливый контент навсегда.
Для этого открываем страницу, дожидаемся, пока нежелательный баннер закроет весь экран, а затем находим код, который это делает: щёлкаем правой кнопкой мыши на затемнении и выбираем «Посмотреть код». Нас интересует название этого элемента, оно идёт в кавычках после команды >
В нашем случае строка полностью выглядит так:
Видим, что всплывашка, которую мы хотим заблокировать, имеет класс b-popup. Класс — это инструкция в CSS, которая говорит примерно так: «Всё, что имеет такой класс, выводи таким-то образом». Если мы научим браузер скрывать все объекты с классом b-popup, мы добьёмся своей цели.
В CSS название классов начинается с точки, а всё, что нужно применить к этому классу, пишется в фигурных скобках. Поэтому в общем виде наша команда, которая настраивает всплывашку, будет такой:
Осталось в скобках написать команду, которая скрывает элемент с экрана:
И теперь на этой же странице с рекламой нажимаем на значок расширения, ставим переключатель в положение On и вставляем на пустую строку нашу команду:
Теперь это расширение всегда будет следить за этим сайтом. И даже если такая же всплывашка будет на других страницах — она тоже заблокируется.
Всё, ваш собственный блокировщик рекламы готов. Как только на любом сайте встречаете то, что вам мешает — находите название этого блока и добавляете нужный класс в программу.
Реверс-инжиниринг антиблокировщика рекламы BlockAdBlock
Если вы пользуетесь блокировщиками рекламы, то могли встречать BlockAdBlock. Этот скрипт обнаруживает ваш блокировщик и не пускает на сайт, пока вы его не отключите. Но мне стало интересно, как он работает. Как антиблокировщик обнаруживает блокировщики? А как на это реагируют блокировщики и как они блокируют антиблокировщики?
История реверс-инжиниринга
Первым делом я взглянул на их сайт. BlockAdBlock предлагает конфигуратор с настройками: интервал ожидания и как будет выглядеть предупреждение, генерируя разные версии скрипта.
Это натолкнуло меня на мысль о версиях. А что, если мог посмотреть не на одну версию, а на все сразу? Так я и сделал. Я вернулся назад во времени с помощью Wayback Machine. После этого скачал все версии BlockAdBlock и хэшировал их.
Список всех версий BlockAdBlock, с sha1sum
Только шесть версий отличаются друг от друга, а последняя из них относится к 2016 году, хотя некоторые сайты и сейчас используют BlockAdBlock. Это отлично, потому что нам достаточно будет провести реверс-инжиниринг единственной версии, а потом отреверсить диффы. Спойлер: мы увидим развитие идей и даже остатки отладочного кода.
Все версии я выложил на GitHub. Если хотите посмотреть на диффы, то в этом репозитории каждый коммит представляет собой новую версию.
Распаковка
Проделав это для каждой версии, мы можем изучить каждую из них и посмотреть, какие функции туда добавлялись со временем.
Архитектура
В трёх предложениях:
Автор предусмотрел тщательную рандомизацию, чтобы обойти статическую блокировку.
bab_elementid не используется ни в одной версии кода. setTimeout передаётся в виде строки.
У замыкания есть внешние переменные. Две из них служат для сохранения состояния в скрипте:
bab_domain устанавливается здесь в попытке обфусцировать домен BlockAdBlock.
bab: создание баннера-приманки
Основной метод работы BlockAdBlock заключается в создании «приманки» или «наживки» из рекламных элементов, которые выглядят как настоящие баннеры. Затем он проверяет, заблокировал ли их блокировщик.
Создаётся приманка: фальшивый div, который притворяется рекламой, но скрыт из виду.
Видимо, passed_eid предназначен для настройки идентификатора приманки, но он не используется.
После этого проверяется, была ли наживка удалена рекламным блоком.
Если приманка больше не существует, то элемент удалён (и мы запускаем оверлей).
Режим ворчания
В скрипте есть функция под названием «режим ворчания» (nag mode): в этом режиме BlockAdBlock только один раз скажет отключить блокировщик рекламы, но не будет блокировать вас при каждом посещении. Это делается путём установки элемента localStorage при первом посещении.
Если бы мы могли сами установить этот элемент, то могли бы мы отключить блокиратор навсегда? К сожалению, BlockAdBlock заранее проверяет, был ли скрипт настроен на режим nag, поэтому такой способ не сработает, когда он работает в режиме по умолчанию, то есть с блокировкой доступа.
Блокировка BlockAdBlock, версия 1
Блокировщики рекламы используют так называемые фильтры: строки кода, которые могут блокировать сетевые запросы и скрывать элементы на странице. Создавая элементы «наживки», BlockAdBlock специально запускает эти фильтры.
С помощью такой простой защиты BlockAdBlock эффективен против всех основных блокировщиков рекламы, таких как uBlock Origin, AdBlock Plus и Ghostery. Чтобы противостоять этому, мы должны написать собственный фильтр, который активизируется только на сайтах, на которых работает BlockAdBlock.
В итоге получается следующее:
У меня тут localhost для демонстрации, вы можете заменить его своим URL.
Это успешно дезактивирует BlockAdBlock. Решение может показаться простым, но оно уже давно успешно работает в списке фильтров Anti-AdBlock-Killer.
Версия 2 (ноябрь 2015 − январь 2016): несколько улучшений
Создание приманки: меньше багов
Исправлена ошибка пустого div.
Создаётся дочерний div с некоторым содержимым.
Обнаружение блокировщиков через поддельные графические баннеры
randomStr() генерирует строку произвольной длины.
Новый setInterval и проверка на наличие изображения:
Версия 3 (ноябрь 2015 − март 2016): обобщённая приманка
Создание приманки: рандомизированные идентификаторы
Единственное изменение в этой версии, хотя и значительное, — появление рандомизированных идентификаторов для приманки. Новый идентификатор берётся из списка идентификаторов при загрузке страницы и используется для приманки, которая теперь помещается в середине страницы.
Длинный список случайных идентификаторов демонстрирует хорошее знание предметной области.
Случайная генерация идентификаторов
Поскольку это cрабатывает на каждой загрузке, идентификатор будет каждый раз отличаться.
Блокировка BlockAdBlock, версии с третьей до последней
BlockAdBlock эксплуатирует слепое пятно блокировщиков рекламы: если фильтр пропустит все вышеперечисленные идентификаторы, то он также пропустит и настоящую рекламу. Таким образом, BlockAdBlock заставляет блокировщик рекламы сделать себя бесполезным.
В блокировщиках мы можем выполнить произвольные скрипты перед загрузкой страницы. Можно попытаться заранее удалить объект BlockAdBlock. Но для этого нам нужно имя объекта BlockAdBlock, которое рандомизируется при каждом запуске.
Реализация в uBlock Origin (исходный код):
Список подписей: определение шаблонов кода. Функция check проверяет строку после eval на соответствие этим шаблонам.
Поскольку мы теперь используем скриптлет, специальный пользовательский фрагмент кода, выполняемый блокировщиком, фильтр немного меняется:
Он не запускается по умолчанию на всех сайтах из соображений производительности, поэтому его нужно назначить для каждого сайта с помощью скрипта.
Версия 4 (январь 2016 − апрель 2016): экспериментальные функции
Описанный метод блокировки антиблокировщика разработан в январе 2016 года, согласно истории коммитов uBlock Origin, и концептуально не изменился с момента своего создания. BlockAdBlock никогда не пытался обойти этот фильтр, изменив свою архитектуру. Вместо этого он продолжил разработку новых функций. И когда мы переходим на страницу BlockAdBlock, то видим интересную вкладку: «Вам нужна большая мощь антиблокировки?»
Хотя эти защитные методы доступны только через специальную вкладку, они включены во все скрипты и выполняются через переменные с соответствующими названиями. В четвёртой версии реализовано два метода:
Случайные комментарии отладки
Прежде чем попрощаться с вами, должен упомянуть ещё кое-что. В процессе реверс-инжиниринга моё внимание привлекла одна функция:
Отладочный console.log() прямо в коде!
Комментарии отладки доступны только в этой версии. Если бы я не отреверсил все версии, то никогда бы их не заметил. Они дают ценную информацию о том, как работает код.
Продвинутая защита: AdSense
Если на странице активен AdSense, то мы проверяем наличие объявлений. Если они исчезли из-за блокировщика, то активируется BlockAdBlock.
URL-адрес скрипта сравнивается со всеми скриптами на странице. По какой-то причине URL усекается до 15 символов.
Продвинутая защита: специальный элемент
В отличие от первого, этот метод сопровождается оговоркой: «Пожалуйста, протестируйте после установки, чтобы убедиться в совместимости с вашим сайтом».
Эта специальная защита срабатывает только в том случае, если не обнаружен блокировщик и на странице нет скрипта AdSense. Вот соответствующий фрагмент кода check :
Метод предполагает, что владельцы сайтов используют только AdSense: если скрипта AdSense не существует, значит, что-то не так.
Зачем было предупреждение? Этот метод пытается включить скрипт AdSense. Если он не загружается, то, скорее всего, блокировщик заблокировал сетевой запрос, поэтому срабатывает BlockAdBlock. Но это может испортить некоторые сайты, отсюда и предупреждение.
Если AdSense не загрузился, то запускается оверлей.
И действительно, большинство блокировщиков рекламы поддаются на это и блокируют запрос. Но есть один блокировщик, который я ещё не упоминал. Поговорим о браузере Brave.
Ответ браузера Brave
Вместо блокировки запроса ad_status.js он пропускает его, но загружает поддельную рекламу Google Ads размером 0 байт. Этот хитрый трюк дурачит BlockAdBlock, потому что onerror срабатывает только в том случае, если сетевой запрос терпит неудачу.
Версия 5 (март 2016 − ноябрь 2016)
Продвинутая защита: спам фавиконами
Единственное изменение в этой версии заключается в том, что вторую расширенную защиту переписали, хотя она по-прежнему придерживается того же основного принципа: проверка сетевых запросов, которые будут заблокированы блокировщиком. Но теперь вместо AdSense загружаются фавиконы.
Brave уклоняется от этой атаки прежним способом. Он не блокирует запросы, но создаёт поддельные изображения 1×1.
Функция baitImages может вызываться часто, со случайным количеством изображений, чтобы обойти статические блокировщики.
Версия 6 (апрель 2016 − ноябрь 2016): блокировка Brave
Методы BlockAdBlock, хотя и простые на первый взгляд, постепенно становились сложнее и эффективнее. Но остался последний непобеждённый враг: браузер Brave.
Продвинутая защита: определение поддельного фавикона
Почему BlockAdBlock перешёл с попытки загрузить скрипт на загрузку изображений (фавиконов)? Ответ — в коде, который добавлен в защиту через спам фавиконами, и который активируется против защиты Brave.
Проверка ответа на наличие поддельного изображения:
Если размер фавикона меньше 8×8, то это, вероятно, подделка от браузера Brave.
С помощью этого приёма BlockAdBlock обходит маскировку Brave и других блокировщиков, которые запускают этот код (большинство, как uBlock Origin, блокируют его в первую очередь).
После этого обновления, примерно в конце ноября 2016 года, BlockAdBlock исчез из интернета. Хотя их «продвинутые методы защиты» работают, они никогда не были активированы для большинства пользователей. Это было последнее обновление. Последний пост в твиттере и на сайте опубликован где-то в конце 2017 года.
Однако наследие BlockAdBlock живёт. Хотя в наши дни его тривиально заблокировать, этот скрипт по-прежнему используют некоторые современные сайты.
Заключение
Кто победит в гонке вооружений между блокировщиками рекламы и антиблокировщиками, которые блокируют блокировщиков? Только время покажет. По мере развития гонки вооружений антиблокировщикам придётся использовать всё более изощрённые методы и специальный код, как показывает эволюция BlockAdBlock.
С другой стороны, у блокировщиков преимущество стабильных систем и мощных инструментов фильтрации через списки фильтров, а также доступ к JavaScript. С такой системой достаточно, чтобы один человек понял, как победить врага — и обновить список фильтров с новыми сайтами.
Анализируя эволюцию BlockAdBlock, а также различные ответы блокировщиков рекламы, нам удалось нарисовать картину небольшой войны между BlockAdBlock и блокировщиками. В процессе мы узнали, какие методы используются в боевых действиях.
Мой код реверс-инжиниринга опубликован на GitHub. Спасибо вам за чтение.
1. Если хотите получить представление, как это работает, попробуйте вставить приведённый ниже пример в консоль JS, а затем посмотрите на код. Если вас интересует его внутренняя работа, вот исходный код. ︎[вернуться]
2. Не верите? Попробуйте изменить eval на console.log в первой строчке.
[вернуться]
4. Во время исправления этой ошибки были разработаны тесты для v1. ︎[вернуться]
5. Спасибо McStroyer на Reddit, который обратил на это внимание. ︎[вернуться]
6. Компонент блокировщика рекламы Brave открыт, поэтому мы можем посмотреть исходный код, чтобы получить представление о том, как он работает.
Блокировщик рекламы для дома на коленке
Прожорливый Bind9
Пришлось мне пару лет назад покинуть свой родной дом и переехать в другой город. В результате свой самосборный медиа-центр пришлось оставить, а на новом месте купить телеприставку AuraHD Plus. Весьма не плохой девайс за свои деньги, особенно если учесть, что в нем встроены приложения для доступа к сервисам с фильмами и т.п.
Все бы ничего, но реклама там крутится на каждый чих. Пришлось изобретать, как же ее «порезать». Первая мысль была — поднять свой DNS сервер и отправлять все неугодные домены в /dev/null на 127.0.0.1. К этому моменту мой домашний серверок вернулся ко мне и занял свое почетное место на шкафу в качестве NAS сервера.
Сказано — сделано. Поднят Bind9, прописаны конфиги для нескольких доменов, все отлично. Летим.
Спустя пару недель пришла мысль в голову, а почему бы не использовать этот метод для фильтрации рекламы для всех устройств дома? Дело не хитрое же.
Поиск списков с рекламными доменами привел меня к нескольким урлам и я взялся их парсить. Где-то на просторах Хабра была статья, которая помогла мне с парсингом и написанием скриптов для генерации конфигов для Bind9 (спасибо автору, но я не смог найти ссылку, пусть меня простит).
Все сделано и пришло время запускать Bind9. Старт и все отлично. Кроме одного. Этот прожорливый монстр съел всю оперативку и попросил своп. 5 гигабайт памяти на 400 тысяч доменов!
По-мучая таким образом свой бедный сервер на Intel Atom я решил, что это не дело.
Миграция на PowerDNS
Погуглив и поизучав другие варианты, я пришел к выводу, что Bind9 не совсем то, что нужно. Нужен более легкий по ресурсам DNS сервер, который смог бы лопатить такое количество доменов.
PowerDNS подошел как нельзя к стати, т.к. он умеет сам читать конфиги Bind9 и использовать их в работе. Поставил, настроил (собственно в этом нет никакой сложности) backend Bind9 запустил.
Результат превзошел все ожидания — 700 MB потребляемой памяти после 5 гигабайт! Это ли не мечта? Особенно при наличии всего 4 GB в сервере. 🙂
Несколько месяцев так все и проработало, пока я не задумался, что конфиги Bind9 это конечно хорошо, но старт PowerDNS какой-то ну совсем медленный. Время на «всасывание» всех доменов до неприличия большое и стоит как-то оптимизировать этот процесс.
Из оптимизации оставалось влить только все эти домены с рекламой в MySQL. Это дало бы возможность более гибко управлять списком доменов, добавлять, удалять, поддерживать свои внутренние домены.
Закатали рукава и приступили. Оказалось все довольно просто — zone2sql решает все проблемы 🙂 Оставалось завернуть все это в доккер и поднять. Сделал довольно быстро и без особых проблем.
Так оно летит уже с полгода дома и радует. Но сегодня вышла статья на Хабре о блокировщике рекламы для смартфонов Samsung и мне предложили в комментариях выдать мое поделие в открытый доступ.
Зависимости
docker
Поскольку все это крутится внутри контейнеров docker, то эта штука нам 100% понадобится. Все действия относятся к Ubuntu Linux, т.к. именно его я использую дома и в работе.
Устанавливается она согласно документации достаточно просто:
После завершения работы скрипта docker будет готов и им можно пользоваться.
Если вы предпочитаете другой метод установки, то всегда можно обратиться к документации и выбрать то, что вам будет по душе.
docker-compose
Docker Compose предназначен для планирования и организации процессов в контейнерах Docker (запуска, отключения, создания межконтейнерных соединений и томов, и т.п.).
Установка не сложнее самого докера:
Запуск собственного фильтра рекламы
Клонируем репозиторий
Логичное действие и не нуждается, наверное, в пояснениях, зачем это делать. 🙂
Создаем базу данных
Пользователь базы данных
Для доступа к консоли MySQL сервера нужно выполнить:
Пароль по умолчанию для пользователя root — 12345.
Создаем пользователя и базу:
Стартуем DNS сервер
Обновление списков рекламных доменов
Для обновления списков запускаем:
White listing
Список для исключения доменов содержится в начале файла /opt/docker/pdns/powerdns-server/bind/getnewlist.sh.
Пользуйтесь, экспериментируйте и давайте сделаем интернет чище. Хотя бы у себя дома. 😉