Найти в Дзене

Запрет на отображение страницы во фрейме. Или зачем Яндекс.Метрика использует Clickjacking!

Оглавление

Приветствую, коллеги! Работаете с Яндекс.Метрикой? Хотя, да, о чем я... конечно работаете. Так вот, сегодня на оф.канале по метрике в телеге, был задан вопрос:

"Метрика не отображает тепловые карты ссылок и кликов, показывает ошибку: "Установлен запрет на отображение страницы во фрейме".

Проблема обычная и давно известная. Защита от Clickjacking.

Скажу еще об одной вещи, к которой мы вернемся позже:

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

Что такое Clickjacking и как оно работает

Это вид атаки, при которой злоумышленник может получить доступ к информации пользователя, заманив его на внешне безобидную страницу или внедрив вредоносный код на безопасную страницу.

Кстати, так когда-то были взломаны многие сайты, включая Twitter, Facebook, PayPal... Ну и конечно же, во ВКонтактике такая бага тоже когда-то была. Идея довольно простая:

  • Юзер как-то попадает на страницу злоумышленника. Способ не важен. Реклама, спам и т.д.

2. На странице есть обычная ссылка, например, "1000 Free Spins!".

3. Поверх этой ссылки вредоносная страница размещает прозрачный <iframe> с src с сайта, например, facebook таким образом, что кнопка Like находится прямо над этой ссылкой.

4. При попытке клика на эту ссылку посетитель на самом деле нажимает на кнопку Like.

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

Иллюстрация Clickjacking-атаки. Пользователь заманивается на страницу, на которой ему предлагают сыграть в крутую игру. На странице уже наложен полностью прозрачный iframe со ссылкой удаления страницы на Twitter. Координаты и размеры кнопок совпадают. Если у пользователя в cookies браузере есть незакрытая сессия на Twitter, то при клике на кнопку Play, он на самом деле нажмет на «Okay, I want to delete my account»
Иллюстрация Clickjacking-атаки. Пользователь заманивается на страницу, на которой ему предлагают сыграть в крутую игру. На странице уже наложен полностью прозрачный iframe со ссылкой удаления страницы на Twitter. Координаты и размеры кнопок совпадают. Если у пользователя в cookies браузере есть незакрытая сессия на Twitter, то при клике на кнопку Play, он на самом деле нажмет на «Okay, I want to delete my account»

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

Метрика. Карты активности и как они работают

То, что описано ниже, относится только к тепловым картам. Записи посещений работают совсем подругому! Они работают независимо от тепловых карт и по другой технологии.

Что по сути делает Метрика, когда показывает нам карты активности? Она использует Clickjacking. Не со злым умыслом, конечно. Просто использует тот же прием, только клики не ворует. А именно:

Подгружает наш сайт через iframe в себя. Поверх подгружает прозрачный iframe в котором она посредством канвы рисует карту кликов. Это легко проверить через инспектор кода в Google Chrome (F12).

-2

Наш сайт на скриншоте слева. Поверх него расположен полупрозрачный iframe, в котором есть блок <div>, на котором уже выводятся точки касания на тепловой карте.

Если мы удалим из кода этот iframe, то увидим просто сайт, без карты кликов. Полностью работоспособный, но показанный в iframe на сайте веб-визора.

Возвращаемся к проблеме

Но как же быть с нашей проблемой? А никак. Если это не самостоятельный сайт.

Внимательный читатель уже понял, что метрика не может отобразить карту кликов потому, что ресурсы, на которых размещен сайт пользователя, блокируют возможность отображать их сайты через iframe.

Поэтому веб-визор спотыкается на показах. Ему просто не дают показать сайт во фрейме.

И так будет с каждым нормальным конструктором сайтов или сервисом, который заботится о своей безопасности и о безопасности клиентов.

Пользователи сервиса Tilda, например, тоже не могут просмотреть тепловые карты.

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

Все они отдают специальный заголовок:

«X-Frame-Options: SAMEORIGIN» или «X-Frame-Options: DENY»

Первый дает браузеру понять: — «Отображать мои страницы во фреймах можно только в пределах моего домена!».

Второй же, более злой: — «Отображать мои страницы во фреймах нельзя ни при каких условиях!».

Вы можете сами проверить, какие заголовки отдаются определенным сайтом или конструктором. Это можно сделать здесь: https://vk.cc/azT5kc

Как итог, можно сказать, что если ваш сервис-конструтор не дает вам возможности отключить эти заголовки для своих сайтов, то у вас один путь:

Выгружать сайт полностью из сервиса и размещать на сервере или шаред-хостинге, где вы будете иметь доступ к настройкам веб-сервера.

Это все касалось многочисленных конструкторов сайтов. Теперь по CMS.

Что с CMS?

Некоторые CMS имеют свою, встроенную защиту от фреймов, включенную по умолчанию. Таким примером может послужить 1С Bitrix с их защитой от фреймов.

Так что, если ваш сайт работает на Битрикс и веб-визор у вас не работает по вышеописанным причинам, то варианта у вас два:

  • Отключить защиту от фреймов вообще
  • Добавить домены веб-визора в исключения

Оба способа можно применить из админки. Идем в «Настройки» -> «Проактивная защита» -> «Защита от фреймов».

-3

Откроется страница, где будет вкладка «Исключения». Нужно добавить в исключения следующие адреса:

*/metrika.yandex.ru/*

*/webvisor.com/*

*/webvisor.com/inpage/*

http://webvisor.com/*

^https?://([^/]+\.)?yourdomain.ru>|([^/]+\.)?webvisor\.com/

Замените yourdomain.ru на свой домен.

Затем проследуйте в .htaccess (для Apache) и удалите строку (если она есть):

Header always append X-Frame-Options SAMEORIGIN

Или, если у вас nginx, то идем в конфиг nginx.conf и удаляем строку (если она есть):

add_header X-Frame-Options "SAMEORIGIN";

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

В сухом остатке

Да, заголовки можно отключить. Сайты с конструкторов можно перенести на хостинги. Все это понятно.

Выходит так, что вы выбираем из двух зол: безопасность или функционал сервисов, таких как веб-визор Яндекс.Метрики. Что выбирать — это решает каждый для себя.

Интересно еще одно. Если все проекты в сети начнут следовать всем канонам информационной безопасности. Гипотетически, если все проекты закрыть от фреймов, то сервисы трекинга, типа веб-визора, останутся не у дел.

Можно конечно махнуть и сказать: — «Оой, да мне и защищать-то нечего, не парь мне мозги, Гоша!».

Да, если вы мелкий лендинг или очередной homepage — плевать. Но если вы, например, крупнейший интернет-магазин «KOBZON», то вы просто обязаны защищать своих клиентов и себя.