КДПВ
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/c15/1b6/208/c151b62089f8e4dd0e6bb4f612e98ab6.png)
Мы с товарищем, сделали простенький тест (github) на проверку доступности
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/a2f/271/2dd/a2f2712ddba4feebecd2e6e7c995eef7.png)
В
![](https://habrastorage.org/getpro/habr/post_images/c15/1b6/208/c151b62089f8e4dd0e6bb4f612e98ab6.png)
Вечерело
Мы с товарищем, сделали простенький тест (github) на проверку доступности
data-uri
в браузерах. Выглядит он следующим образом:![](https://habrastorage.org/getpro/habr/post_images/a2f/271/2dd/a2f2712ddba4feebecd2e6e7c995eef7.png)
В
textarea
javascript'ом вставляется navigator.userAgent
. В этот момент я не знаю, что меня стукнуло в голову, но вместо DOMContentLoaded
, я написал . По-быстрому проверив корректную работу в десктопных браузерах и на нескольких мобильных устройствах, подключённых к интернету через wi-fi, мы успокоились и разошлись по домам.
Солнце продиралось сквозь занавески
Утром, в полупустом вагоне метро, я как всегда открыл браузер на своем телефоне, на котором со вчерашнего вечера была открыта тестовая страничка. Сказать, что я удивился, когда я не увидел вывода userAgent
внутри textarea
— ничего не сказать.
Добравшись до компьютера, решил потратить немного времени на поиск проблемы. Запустив страничку на десктопе и в эмуляторе, я ничего не заметил. Открыл на телефоне. Чудеса! Всё работает.
Увидев включённый значок wi-fi
, я начал догадываться о причинах проблемы. Я отключил wi-fi
, подключил телефон к компьютеру и начал дебаг с помощью веб-инспектора десктопного сафари.
Горячий кофе и приятный вкус дебага
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/ce6/4a7/f40/ce64a7f40eb58b78360c671e88c8d9c7.png)
Уоу-уоу, полегче, подумал я. Откуда всё это могло взяться в шести строчках JS'а?
А вот откуда:
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/7bc/5cc/35f/7bc5cc35f7c26c6cb0996c63113f059e.png)
Отличился наш любимый оператор Beeline, с которого я ещё не до конца успел слезть. На небольшую тестовую страничку внезапно прилетело ~133КБ паразитного траффика.
Anchor.js
расположен по адресу toolbar.beeline.ru/ets/scripts/Anchor.js
, который доступен только из сотовой сети Билайна. Для всех желающих посмотреть на стиль кодирования на JS в Билайне, я подготовил ссылку — gist.
Сколько вешать в граммах?
Что же входит в эти 133 КБ:
* 91 КБ jQuery v1.7.2;
* 42 КБ самописного кода.
Видно, что никто не заморачивался даже использованием CDN
для jQuery. Ну ОК. Смотрим дальше на самописный код.
Первые 914 строк — один большой if
:
if (document.getElementById('toolbar') == null)
{
//...много кода
}
Дальше немного хелперов с упором на мобильные устройства от Apple:
function getIOSVersionNumber(){}
function isIt(theDevice){}
function isMobile(){}
function isIPhone(){}
function isIPad(){}
function getBodyZoomLevel () {};
function isNumberPercentageBased(number) {}
function getVisualViewportInfo () {};
We need to go deeper
Испектируем код про тулбар:
(function(jQFrm){
if (window.XDomainRequest) {
// много кода
}
})(jQFrm);
Находим здесь упоминание проприетарного XDomainRequest
, который существовал только в IE8 и IE9. Не понимаю, зачем этот код нужен на мобильных устройствах.
Идём дальше:
var ets_scripts = jQFrm('[name="ets-anchor"]');
jQFrm(window).resize(function()
{
resizeIframe();
});
if (ets_scripts.length == 1)
{
// много кода
}
Встречаем второй большой if
и первое вмешательства в обработку событий на произвольном мобильном сайте.
По этому селектору находится этот самый Anchor.js
, который вставляется в момент перехвата ответа от веб-сервера мобильному браузеру.
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/4eb/a16/804/4eba168047da5c44d603c8bbb8761e23.png)
Продолжаем чтение по диагонали:
(function()
{
var msgHandler = function(e)
{
var ets_frame = document.getElementById('toolBarPcFrame');
if (e.origin == 'http://toolbar.beeline.ru')
{
// 500 строк кода
}
else
{
//alert(e.origin);
throw new Error('Origin domain is not allowed.');
}
}
// listen for the message event
window.addEventListener('message', msgHandler, false);
})();
Находим механизм общения со встроенным iframe
через window.postMessage
.
Опять хелперы и...:
function GetWidth() {}
function GetHeight(){}
function resizeIframe(){}
window.onpageshow = function(evt){};
window.onorientationchange = function(){};
window.onload = function(){
//etsAppMain functions (search application)
if (InitParamForScroll)
{
InitParamForScroll();
}
};
function isLandscape(){}
function orientation_changed(actionId){}
if (isMobile()){}
Oh, wait. Вот и причина изначальной проблемы — подмена window.onload
window.onload = function()
{
//etsAppMain functions (search application)
if (InitParamForScroll)
{
InitParamForScroll();
}
};
Возврвщаясь к нашему первому if'у
.
$(document).ready(function()
$('html').append('<div id="toolbar" tabindex="-1" style="border-width:0px;outline-width:0px;"></div>');
var currentTime = new Date();
/*var pathname = window.location.href;
var screenWidth = screen.width;*/
var ifrm = document.createElement("IFRAME");
ifrm.setAttribute("id", "toolBarPcFrame");
/*ifrm.setAttribute("src", "http://toolbar.beeline.ru/ets/ToolBarPcServlet?screenWidth="+screenWidth+"&url="+pathname);*/
ifrm.setAttribute("src", "http://toolbar.beeline.ru/ets/ToolBarPcServlet");
ifrm.setAttribute("allowtransparency", "true");
ifrm.setAttribute("background-color", "transparent");
ifrm.style.position = "fixed";
ifrm.style.zIndex = 9999999999;
// много кода
В момент инициализции страницы, паразитный скрипт вставляет в конец нашего html
div
, а уже внутри создаёт iframe
на toolbar.beeline.ru/ets/ToolBarPcServlet
. Обратите внимания на CSS-свойства position, zIndex
. Это чтобы наверняка было заметно ;)
Режем по-живому
В качестве быстрого решения, можно использовать примерно такой gist.
document.addEventListener('DOMContentLoaded', function() {
var toolbar = document.getElementById('toolbar'),
iframe = toolbar && toolbar.firstElementChild;
if (iframe && /beeline/.test(iframe.getAttribute('src'))) {
toolbar.parentNode.removeChild(toolbar);
}
});
setTimeout(function() {
var script = document.querySelector('script[name=ets-anchor]');
if (script) {
script.parentNode.removeChild(script);
}
}, 0);
Может я подумаю ещё пару минут чуть позже и придумаю более элегантное решение. Смотрите в gist :)
Минутка морали.
Кроме капитанского "не использовать onload
", могу дать несколько полезных советов:
- если вы разработчик, по возможности, используйте
SSL
на ваших сайтах, чтобы _никто_ не мог перехватить ваш траффик;
- если вы подключили на свою страницу 90КБ jQuery кода, то используйте его, а не пишите потом
document.getElementById
;
- если вы оператор связи, то никогда не включайте такие услуги "Мини-Кабинет"
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/a5a/8a9/de0/a5a8a9de0dec72dd3bffedef63680594.png)
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/2b1/67b/f6b/2b167bf6b9f34b1cbbc41eb2d15cf299.png)
- или такие homenet.beeline.ru/index.php?showtopic=315433 .
P.S. Этот пост ни в коем случае не наезд на компанию Билайн. Я имел положительный опыт решения проблем с помощью их твиттера Beeline_Rus. Надеюсь, что этот пост поможет хорошим людям внутри компании вырезать эту странную услугу на корню и сделать лично меня и миллионы абонентов чуточку счастливей.
![](https://habrastorage.org/getpro/habr/post_images/f03/7c9/306/f037c9306aa0d012d6f278c4a17f9ea6.gif)
update
Купил на свой домен SSL-сертфикат. Теперь никакая зараза не пройдёт. Также продолжаю переписку с Билайном, на тему отключения услуги Toolbar совсем и всем.
update, 6 октября 2014
Ещё 18-го сентября, мне пришло письмо от pomogite@beeline.ru следующего содержания:
Роман, здравствуйте!
Получена информация по Вашему вопросу. Ситуация исправлена. Проверьте, пожалуйста.
При возникновении дополнительных вопросов, будем рады на них ответить.
Я, конечно же, пошёл проверять. На удивление, никаких лишних сетевых запросов/вставок в HTML'е я не обнаружил. Сразу написал об этом в твиттере, а вот про хабр забыл :(
Теперь вот исправляюсь, перепроверив ещё раз. Кто-нибудь проверит у себя? ;)