Помни о расширениях или история одного бага

Предыстория

Пришло однажды нам на почту письмо пользователя недовольного. «Не загружаются у меня на сайт ваш фотографии», говорил пользователь и прикладывал к письму скриншот. На скриншоте был слой с картинкой, а вместо картинки — обрезки от тега <img />.

(слева — у обычных пользователей, справа — у гневного)

В те времена загрузка была сделана просто — через форму, которая сабмитится в iframe и потом оттуда из ответа в plain-text забирает часть имени файла, с помощью которого можно получить ссылку на файл уже на нашем сервере. «Модная» загрузка через XMLHttpRequest и FormData была только в планах.
Поломав некоторое время голову, переделал создание картинки вручную, а атрибутов ее — через setAttribute, вместо создания элемента прямо через plain-html. Как оказалось уже гораздо позже, бестолку, но не суть важно — пользователю надоело с нами общаться, мы сами не смогли воспроизвести (хотя очень старались) и отложили проблему в долгий ящик, благо никто больше не жаловался.

Внезапно

Спустя более чем полгода, когда уже и загрузку картинок переделали на новый способ, с прогресс-баром и модными фишками, меня позвал тестировщик, который решил написать тест загрузки старым способом, через iframe, на браузерах, которые не поддерживают XMLHttpRequest или FormData. Подхожу к нему и вижу то же самое, что когда-то присылал нам на скриншоте гневный пользователь. Прямо здесь, в браузере, можно подебажить, даже воспроизводилось постоянно!
Открываю FireBug, смотрю результат, вернувшийся в iframe и вижу что все ок, смотрю в javascript и вижу, что на самом деле внутри iframe кроме имени файла лежит и какой-то вражеский <div>. Наверное, поздно, но тут меня осенило и я пошел отключать расширения и, один за одним, проверять. Действительно, дело оказалось в одном из расширений, который (понятия не имею зачем) решил вставлять вообще во все возможные документы, свой <div>.

Как-то так (форматирование сохранено, идентификатор — заменен, дабы не идентифицировать расширение):

if(!doc.body)return; if(doc.getElementById('xxx'))         return; var tmp = doc.createElement("div"); tmp.setAttribute("style", "display:none"); tmp.setAttribute("id",'xxx'); (doc.body||doc.head[0]).appendChild(tmp);

Даже не матерился на огромную простыню страшного кода расширения, а просто улыбался — настолько простой оказалась проблема.

Костыль для починки

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

var      $source = $(‘<div />’).html(iframeBodyContent),     filename;    $source.children().remove(); filename = $.trim($source.text());

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

Зачем я вообще это все сюда написал?

Расширений к браузерам, как качественных, так и не очень (таких, увы, большинство), становится все больше и больше. Большинство расширений нагло врезается в ваш код и как-то его модифицирует. И не все они одинаково полезны. Мне очень повезло, что у тестера был тот злосчастный плагин. Будьте бдительны (тут должен быть смайлик, но суровый НЛО предупредил, что вставлять его сюда не стоит).