На современных сайтах, можно повсеместно встретить баннерную рекламу. Часто для ее отображения используются iframe — это своего рода контейнер для любой веб-страницы, который можно поместить на сайт. Это удобно тем, что для замены баннера, владельцу сайта не нужно ничего делать, рекламная сеть сама может подгрузить нужный баннер. Также iframe используется для отображения различных виджетов с курсами валют, погоды, счетчиков и т.д. Ну и конечно, reCaptcha также использует iframe и в следующих уроках мы будем ее разгадывать всеми доступными нам методами.

Поиск всех iframe на странице на примере bitcoin-крана

К сожалению, всеми любимый ресурс faucetbox.com с 1000+ кранами закрылся, но появились новые сервисы микрокошельков Bitcoin. Сейчас популярность набирает https://faucethub.io. Там пока в списке 260 кранов, но их число постоянно растет.

Возьмем первый попавшийся bitcoin-кран https://bitlucky.io.

На видимой области я сходу вижу 4 баннера. Скорее всего они вставлены с помощью iframe, хотя это не единственный способ. Давайте попробуем использовать нашу привычную конструкцию для поиска элементов по css-селектору. Здесь мы будем искать по тэгу.

var frames = window.document.querySelectorAll('iframe');
window.console.log("Количество iframe: ", frames.length); // Количество iframe: 11

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

var frames = window.document.querySelectorAll('iframe');

for (var i = 0; i < frames.length; i++) {
	window.console.log(frames[i].src);
}

По ссылкам сразу становится ясно, что на сайте подключены 3 баннерные сети и капча(reCaptcha2). В вашей голове уже должна была появится шальная мысль о скрипте, который автоматом определяет какой тип капчи на сайте и в зависимости от этого запускает тот или иной алгоритм по ее разгадыванию. Это я так, к слову, сложного в этом ничего нет.

Если вы захотите создать свой кран, то сможете написать скрипт, который пройдется по всему списку кранов на faucethub.io и составит статистику самых популярных баннерных сетей, которые используют владельцы bitcoin-кранов. Я подобным занимался одно время, и, возможно, напишу статью о создании своего крана, размещении рекламы и некоторых других особенностях данного процесса. Выдрать url-адрес из полученных данных особого труда не составит, вы можете использовать для этого регулярные выражения.

Политика безопасности браузеров и доступ к содержимому iframe

Очень важно понимать одну вещь. Из iframe нельзя получить или изменить какие-либо данные в родительском окне, только если они находятся на одном домене. Это означает, что любой Javascript из iframe не имеет никакого доступа к документу, в котором этот iframe располагается. Это сделано из-за соображений безопасности. Окно, в котором располагается iframe — может менять размеры, атрибуты, css-свойства ифрейма, но не может поменять его содержимое.

Именно по этой причине, мы не можем при помощи, допустим такой конструкции window.document.querySelectorAll('iframe')[0].querySelector('body'), получить или изменить содержимое ифрейма или заполнить в нем какое-нибудь поле.

Тут нам на помощь придет функционал iMacros, а точнее функция FRAME f=число и FRAME NAME="имя фрейма"

И для работы внутри ифрейма, мы будем вынуждены использовать TAG POS, iimGetExtract() и остальные классические функции iMacros.

Поиск нужного iframe

Система нумерации ифреймов в iMacros очень странная. Логично, было бы нумеровать их по порядку с нуля, как в Javascript-примере выше или хотя бы с единицы. Давайте попробуем написать скрипт, который будет искать ифреймы и выводить значение тега img.

for (var i = 0; i < 60; i++) {

	iimPlayCode(`
		SET !TIMEOUT_STEP 0
		FRAME F=${i}
		TAG POS=1 TYPE=IMG ATTR=* EXTRACT=HTM
	`);

	window.console.log("FRAME №" + i + " data: " + iimGetExtract());

}

На рисунке ниже вы можете увидеть, что удалось вытащить 9 кодов картинок из 11 ифреймов. Остальные два — это рекапча и текстовый баннер. Нумерация ифреймов идет более-менее по порядку, но вы не обольщайтесь, так бывает не всегда, особенно если вы ищете капчу, и лучше использовать перебор, как более надежное решение.

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

Неправильно:

iimPlayCode('SET !TIMEOUT_STEP 0');
iimPlayCode('FRAME F=1');
iimPlayCode('TAG POS=1 TYPE=IMG ATTR=* EXTRACT=HTM');

Такой код выполнится как три разных скрипта по очереди, а значит будет потерян контекст и тег IMG будет искаться в основном документе.

Правильно:

iimPlayCode(`
	SET !TIMEOUT_STEP 0
	FRAME F=1
	TAG POS=1 TYPE=IMG ATTR=* EXTRACT=HTM
`);

Здесь контекст не потеряется, TIMEOUT_STEP 0 (интервал времени между командами) сработает для последующих команд и картинка будет искаться именно внутри iframe. Для понимания работы с iframe в iMacros, пока этого хватит. Далее мы будем разбирать ифреймы в ифреймах и решение капчи, на примере reCaptcha2 и Solvemedia.

Пишите ваши вопросы, замечания и комментарии!