Русский
Русский
English
Статистика
Реклама

Headless chrome

Перевод Обход капч с помощью Headless Chrome

26.06.2020 10:22:09 | Автор: admin

Использование 2Captcha and Puppeteer для автоматического прохождения капч



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


image

Amazons CAPTCHA fallback


КАПЧА (от CAPTCHA англ. полностью автоматизированный и общедоступный тест Тьюринга для различения компьютеров и людей) задумана как врата, которые пропускают людей и отсеивают роботов (программ). Волнистые линии и слова сейчас уже не так распространены их заменила вторая версия реКАПЧИ от Google. Эта капча выдает вам зеленую галочку, если ваш коэффициент человечности оценивается как достаточно высокий.


image

Если же вы не дотянули до заданного порога человечности, то реКАПЧА прибегает к использованию подобной паззлу картинки, которая на удивление эффективна скорее в том, чтобы еще сильнее действовать на нервы, по сравнению с расшифровкой пары слов.


image

При том, что людей КАПЧИ раздражают, их можно было бы и потерпеть, если бы они хотя бы выполняли свою работу, однако, зачастую гораздо проще автоматизировать их распознавание, чем постоянно доказывать, что вы человек.


Как работает 2Captcha


2Captcha решает много разных типов капчи. Для взаимодействия с 2Captcha используются два адреса: на in.php присылается задача и в ответ Вы получаете captcha_id, на res.php вы по captcha_id получаете ответ, когда он будет готов.


2Captcha решает капчи в нескольких различных стилях с помощью двух, по большей части одних и тех же, конечных точек обработки запросов. Первый запрос передает данные, необходимые для решения капчи, и возвращает ID запроса. В случае капчи на основе изображения, данные будут изображением самой капчи, закодированным в 64base.


image

После получения ID запроса, вам нужно будет повторно отправлять его на сервер 2капчи, пока решение не будет готово.


image

С Recaptcha V2 история немного другая. Вы по-прежнему имеете дело с двухступенчатым процессом, что и представленный выше, но отправляете другие данные. Теперь вам нужно отправлять публичный ключ рекапчи (reCAPTCHA sitekey), который можно найти среди атрибутов элемента-контейнера капчи, независимо от того, был ли загружен
image

Получаемый ответ это токен, который нужно отправить вместе с формой и ввести в скрытое текстовое поле с идентификатором g-recaptcha-response. Скриншот ниже показывает, где оно находится, и я специально отключил CSS-свойство display: none, чтобы показать его на странице. Имея возможность редактировать это поле, вам будет проще вручную протестировать ответ 2Captcha, чтобы сократить количество переменных при тестовой интеграции.


image

Для капч, основанных на изображениях, результат доступен почти мгновенно. Для реКАПЧ версии 2 может потребоваться от 15 до 30 секунд.


Автоматизация через Puppeteer


Прежде чем беспокоиться о капче, нужно разобраться со всем прочим, но прежде чем мы сможем это сделать, нужно определиться с нашими инструментами. 3 причины, по которым в данном посте мы будем использовать Googles Chrome:


  1. В нем все очень легко автоматизируется через Puppeteer API.
  2. На нем можно работать как в headless-режиме, так и с графическим интерфейсом, что очень удобно и практично.
  3. Это самый распространенный в мире браузер, поэтому все имеющиеся на сайтах приемы анти-автоматизации имеют меньший шанс срабатывания (например, блокировка Selenium или PhantomJS)

Использование Puppeteer


Необязательно устанавливать хром, если не хочется, в Puppeteer есть все необходимое, в том числе Chromium. Но можете использовать и локально установленный Chrome, решать вам.


$ npm install puppeteer

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


const puppeteer = require('puppeteer');const chromeOptions = {  headless:false,  defaultViewport: null};(async function main() {  const browser = await puppeteer.launch(chromeOptions);  const page = await browser.newPage();  await page.goto('https://old.reddit.com/login');})()

В этом коде мы указываем два свойства конфигурации при запуске: headless: false, чтобы видеть то, что мы делаем, и defaultViewport: null, чтобы учесть неприятный визуальный глитч, при котором область просмотра не заполняет окно. Ни тот, ни другой не важны для работы браузера в headless-режиме, просто с ними удобней видеть и, что самое важное, делать скриншоты. Например, такой:


image

Это было просто! Теперь мы готовы перейти к следующему шагу автоматизировать регистрацию так, будто капчи никогда и не было. Вот где возможность включать/ выключать headless-режим будет полезна, ведь мы можем управлять браузером от лица человека, когда нужно. Сначала следует понять, как получить доступ к элементам на странице, которые нужно поменять. Запустите браузер и просмотрите открытую страницу через инструменты разработчика Google Chrome (горячая клавиша F12). Далее, найдите текстовые поля, которые нужно будет изменить. (горячие клавиши: +Shift+C на Mac и Ctrl+Shift+C на Windows) В случае с Reddit, нам нужно получить прямой доступ к полю ввода логина, двум полям ввода пароля и кнопке. Электронная почта необязательна, так что можем ее проигнорировать. Печать в текстовых полях через API библиотеки Puppeteer почти до смешного проста: вы просто передаете селектор, который идентифицирует элемент, и желаемую строку с помощью метода .type().


await page.type('#user_reg', 'some_username');await page.type('#passwd_reg', 'SuperStrongP@ssw0rd');await page.type('#passwd2_reg', 'SuperStrongP@ssw0rd');

Производить операции с кнопкой так же удобно, разве что у кнопки на странице Reddit нет связанного с ней идентификатора, так что нам нужен более сложный селектор. Если вы не знакомы с селекторами CSS, то для краткого ознакомления посмотрите Mozilla Developer Network.


await page.click('#register-form button[type=submit]');

Вот и всё! Протестируйте скрипт, чтобы удостовериться, что отправка логина работает. Из-за КАПЧИ, конечно, ничего не получится, но зато мы можем протестировать работу хуков.


image

Подождите-ка! Мы ведь даже не видим капчу, и консоль JavaScript жалуется на ошибки. Что здесь происходит? Во время автоматизации веб-страниц, помимо капч, есть множество других препятствий, которые могут встать у вас на пути. И одна из них настолько высокая скорость выполнения операций, что страница ломается. Когда браузеры автоматизированы, они работают во много-много раз быстрее, чем на то способен обычный человек, и зачастую это приводит к выполнению кода в таком порядке, в каком разработчики его не тестировали (это называется состоянием гонки или неопределённость параллелизма).


Страница Reddit страдает от состояния гонки, тогда как Google выводит реКАПЧУ после фокусировки на втором поле ввода пароля. То есть наш скрипт выполняется c такой скоростью, что смена фокуса происходит до того, как готов скрипт реКАПЧИ. Есть много решений этой проблемы, но самое простое добавить минимальную задержку, необходимую, чтобы миновать это состояние гонки. Мы могли бы добавить хуки и обработчики событий, чтобы убедиться, что мы действуем только после того, как рекапча загрузилась, но, похоже, самих разработчиков Reddit состояние гонки устраивает, так что нам нет необходимости умничать. Есть много способов организовать задержку, но в опциях Puppeteer, связанных с запуском браузера, есть параметр slowMo, который глобально задерживает все действия на заданное значение. Это очень грубый подход, так как замедляются вообще все действия Puppeteer, но начать с этого можно.


const chromeOptions = {  headless:false,  defaultViewport: null,  slowMo:10,};

После добавления этой опции мы видим, что капча снова работает. Ради забавного эксперимента, можно попробовать пройти капчу прямо сейчас и посмотреть что будет. Поскольку мы используем вариант Chromium с настройками по умолчанию, который запускается библиотекой Puppeteer, и мы управляем им через средства автоматизации, то реКАПЧА будет изо всех сил пытаться доказать, что мы не человек. Вам, вероятно, придется пройти несколько уровней проверки, даже если вы разберетесь со всеми картинками. Когда я тестировал это, мне пришлось пройти через 10 различных повторений, прежде чем я получил зеленую галочку.


К счастью, все это можно сделать намного легче.


Настройка 2Captcha


2Captcha требует API ключ, который выдается при регистрации. Вам также потребуется какое-то количество средств, потому что, не всё в жизни бесплатно. И просто ради смеха, конечно же, вам понадобиться пройти КАПЧУ.


`http://2captcha.com/res.php?key=${apiKey}&action=get&id=${reqId}`;

2Captchas API работает через двухступенчатый процесс, где вы отправляете данные КАПЧИ и получаете результат после возврата ID запроса. Поскольку мы имеем дело с reCaptcha v2, нам нужно будет отправить публичный ключ Reddit, о котором говорилось ранее. Нам также нужно убедиться, что мы выбрали метод userrecaptcha и отправляем URL страницы, на которой расположена реКАПЧА.


const formData = {  method: 'userrecaptcha',  key: apiKey, // your 2Captcha API Key  googlekey: '6LeTnxkTAAAAAN9QEuDZRpn90WwKk_R1TRW_g-JC',  pageurl: 'https://old.reddit.com/login',  json: 1};const response = await request.post('http://2captcha.com/in.php', {form: formData});const requestId = JSON.parse(response).request;

После того как вы сделали этот запрос и получили обратно идентификатор запроса, вам нужно запросить URL res.php, используя ваши ключ API и идентификатор запроса, чтобы получить ответ.


<a href="`http://2captcha.com/res.php?key=${apiKey}&action=get&id=${reqId}`;"></a>

Если ваша капча не готова, вы получите ответ CAPTCHA_NOT_READY, что указывает на то, что нужно попробовать ещё раз через секунду или две. Когда капча готова, ответом будут данные, соответствующие выбранному методу отправки. Для капчи, основанной на изображении это будет решение. Для reCaptcha V2 данные, которые нужно отправить в полях формы.


Для reCaptcha V2 время нахождения решения может различаться минимум 15 секунд, максимум 45. Ниже показан пример механизма опроса, но в этот раз простого запроса по URL, который может быть интегрирован в ваше приложение так, как вам будет удобно.


async function pollForRequestResults(  key,   id,   retries = 30,   interval = 1500,   delay = 15000) {  await timeout(delay);  return poll({    taskFn: requestCaptchaResults(key, id),    interval,    retries  });}function requestCaptchaResults(apiKey, requestId) {  const url = `http://2captcha.com/res.php?key=${apiKey}&action=get&id=${requestId}&json=1`;  return async function() {    return new Promise(async function(resolve, reject){      const rawResponse = await request.get(url);      const resp = JSON.parse(rawResponse);      if (resp.status === 0) return reject(resp.request);      resolve(resp.request);    });  }}const timeout = millis => new Promise(resolve => setTimeout(resolve, millis))

Как только у вас есть данные ответа, вам нужно вставить результат в скрытое текстовое поле g-recaptcha-response в форме регистрации Reddit. Это не так просто, как использование метода .type() библиотеки Puppeteer, так как элемент невидим и не может получить фокус ввода. Можно сделать его видимым и затем использовать .type(), или же использовать JavaScript, чтобы внедрить значение на страницу. Для добавления JavaScript на страницу, при использовании Puppeteer, у нас есть метод .evaluate(), который принимает либо функцию, либо строку (при передаче функции она просто преобразуется в строку с помощью метода .toString()), и запускает ее в контексте страницы.


const response = await pollForRequestResults(apiKey, requestId);const js = `document.getElementById("g-recaptcha-response").innerHTML="${response}";`await page.evaluate(js);

После внедрения этого значения у нас все готово для завершения регистрации. Это действительно так просто.


Полный скрипт доступен ниже, если вам захочется поэкспериментировать с Puppeteer и/или 2Captcha.


Что вы теперь можете сделать?


Этот пост был написан ради двух вещей:


  1. Показать вам, насколько капчи нехорошая вещь

и


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

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

Подробнее..

Перевод Как обойти запрет доступа к страницам с помощью Chrome в headless-режиме

03.07.2020 10:08:54 | Автор: admin

Некоторые сайты блокируют Chrome в headless-режиме, и мы рассмотрим, как обойти эту блокировку.


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


При возникновении проблем с headless-режимом, не забывайте делать скриншот через page.screenshot(), чтобы видеть, что происходит. Это, как минимум, позволит узнать, имеете ли вы дело с тем же видимым контентом, который отображается в обычном (управляемом) режиме браузера, а также узнать, не застряли ли вы на месте из-за сломанного скрипта, ничего не понимая.


image


В данном примере сам сервер даже не отправил соответствующую веб-страницу.


Первоначальный ответ страница Доступ запрещен, и это все, что можно получить при работе Chrome в headless-режиме. Чего вовсе не происходит в управляемом режиме.


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


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


Сравнение заголовков HTTP-запроса


Поскольку есть (должна быть) небольшая разница между Chrome, запущенном в headless-режиме, и Chrome, запущенном в обычном режиме, логично предположить, что основной сетевой стек один и тот же, и нет никакой разницы, как браузер передает запросы на уровне пакетов. Это говорит о том, что нужно заострить внимание только на содержимом запроса. Можно воспользоваться сервисом, который возвращает нам же наши HTTP-запросы (эхо-сервисом), чтобы найти отличия между запросом, сделанным в headless-режиме, и запросом, сделанным в обычном режиме. Скрипт ниже использует http://scooterlabs.com/echo.json для получения JSON-ответа, который представляет запрос, полученный сервером.


const puppeteer = require('puppeteer');(async() => {  const browser = await puppeteer.launch({  });  const page = (await browser.pages())[0];  const response = await page.goto('http://scooterlabs.com/echo.json');  console.log(await response.json());  await browser.close();})()

Запуская его как в headless-режиме (по умолчанию), так и в обычном режиме (с помощью добавления headless:false в параметры запуска), можно сравнить вывод в консоли, чтобы найти отличия, если таковые присутствуют.


image


time_utc это время, в которое мы сделали запрос. Оно различается, но маловероятно, что это единственный источник блокировки, если только сайт не блокирует все запросы в определенное время суток.


Заголовок Accept-Language отсутствует в случае headless-режима. На самом деле это хороший сигнал того, что кто-то использует нестандартный браузер (или режим браузера), и что браузер мог бы использовать отсутствие этого заголовка для того, чтобы блокировать нас. Это могло бы быть моей первой догадкой, если бы у нас также не было последнего отличающегося заголовка User-Agent.


User-Agent явно выделяется. Это отличие выявляет важную деталь, при этом с помощью этого заголовка headless-режим выдает себя:


image


Заголовок для управляемого человеком Chrome по большей части такой же, если убрать Headless. User-Agent долгое время был основным, бесхитростным способом блокировки нежелательного трафика. Это хорошее отправная точка для получения ответа на вопрос, получаем ли мы то, что нам нужно.


Блокировка по User-Agent в наше время считается простой и редко используемой мерой противодействия из-за простоты ее обхода. В действительности для сайта было бы полезнее использовать ее не для блокировки, а для распознавания нежелательного трафика, поскольку визуальная доступность лучше отсутствия таковой.


Решение (много текста, не читал)


Решить проблему блокировки так же просто, как и поменять заголовок User-Agent. Его можно переопределить на постраничном уровне методом page.setUserAgent(). Вы можете установить пользовательский агент на агент для Chrome в обычном режиме, который, на момент написания этой статьи, выглядит так: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.75 Safari/537.36.


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

Подробнее..

Используем DevTools в headless Chrome

20.04.2021 12:16:22 | Автор: admin


Если вы когда-нибудь использовали Puppeteer, то наверняка сталкивались с неудобной отладкой скриптов на удалённых нодах headless Chrome. Часто так не хватает консоли, а лучше полноценной панели инструментов для изучения запросов и логов хотя постойте. Puppeteer сам по себе построен поверх Chrome DevTools Protocol, значит, наверняка есть куча решений для проброса данных в локальные DevTools? А вот и нет. Есть только два более-менее рабочих инструмента: отладчик для browserless.io и pptrconsole. Второй по функционалу и стабильности уже далеко впереди, поэтому поговорим про него.

Функционал


Сайт pptrconsole это по сути демка частично опенсорсного проекта ViewFinder, так что можно без проблем развернуть свою ноду и не зависеть от чужого облака. Цель ViewFinder развернуть полноценный доступ к удалённому headless-браузеру прямо во вкладке обычного браузера (здесь и дальше речь в силу очевидных причин пойдёт только про Chrome) внутри песочницы, сохранив доступ к максимальному количеству браузерных событий и взаимодействий, и, конечно, к DevTools. Чтобы максимально обезопасить конечный браузер от уязвимостей и прочих криптомайнеров, сервер не использует API браузера, вместо этого он просто стримит картинку (отображение и полученные данные живут в виртуальной среде). При этом разработчик делает упор на низкую задержку, так что картинка из самого браузера передаётся в минимальном приемлемом качестве, а панель DevTools отображает только запрошенные данные, что позволяет сократить нагрузку от одной вкладки до считаных килобит.

Fun fact: так как страница с панелькой выглядит и ведёт себя в точности как локальные DevTools (ещё бы, ведь обе исполняют код Chromium), можно из интереса сравнить версии



Помимо инструментов разработчика ViewFinder предлагает много фич, усложняющих обнаружение headless браузера и упрощающих использование:

  • Поддержка браузерных диалогов многие детекторы ориентируются на возможность и скорость прокликивания всплывающих окон
  • Работа с расширениями
  • Корректный юзер-агент
  • Не определяется использование DevTools Protocol
  • Корректный захват мыши и скролл на любых устройствах
  • Нормально работающие копирование и вставка
  • Заполнение форм (текстовые инпуты, чекбоксы, загрузка файлов)
  • История (отсутствует в привычном виде, но доступна для навигации по кнопкам и из консоли)
  • Можно работать в нескольких вкладках, и в том числе создавать вкладки инкогнито
  • Динамическое изменение качества картинки в зависимости от пропускной способности сети
  • Счетчик трафика на сервере и для вкладки
  • Доступность с любого девайса на всех популярных ОС


Как и сам Puppeteer, приложение построено на Node.js, причём весь браузер ViewFinder легко встраивается в другое приложение. Например, можно завернуть его в Electron и использовать как нативное приложение, или прикрепить DevTools к основной странице.

В интерфейсе можно писать, запускать и отлаживать скрипты Puppeteer:



Установка


Ставить будем на чистый VPS:

  sudo apt update && sudo apt -y upgrade  sudo apt install -y curl git wget certbot  curl -sL https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh -o install_nvm.sh  bash ./install_nvm  source $HOME/.profile  source $HOME/.nvm/nvm.sh  nvm install --lts  npm i -g serve nodemon pm2 npm npx


Склонируем и запустим ViewFinder:

  git clone https://github.com/c9fe/ViewFinder  cd ViewFinder  npm i  npm start


Скрипт start.sh поддерживает следующие аргументы:

  ./start.sh <chrome_port> <app_port> <cookie_name> <username> token2


Также доступен докер-образ (установка для Ubuntu ниже):

  sudo apt-get update  sudo apt-get install \    apt-transport-https \    ca-certificates \    curl \    gnupg \    lsb-release  curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg  echo \  "deb [arch=amd64 signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu \  $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null  sudo apt-get update  sudo apt-get install docker-ce docker-ce-cli containerd.io


Скачаем и запустим образ:

  docker pull dosyago/browsergapce:2.6  curl -o chrome.json https://raw.githubusercontent.com/c9fe/ViewFinder/master/chrome.json  sudo su -c "echo 'kernel.unprivileged_userns_clone=1' > /etc/sysctl.d/00-local-userns.conf"  sudo su -c "echo 'net.ipv4.ip_forward=1' > /etc/sysctl.d/01-network-ipv4.conf"  sudo sysctl -p  sudo docker run -d -p 8002:8002 --security-opt seccomp=$(pwd)/chrome.json dosyago/browsergapce:2.6


Или можно собрать образ самостоятельно:

  git clone https://github.com/c9fe/ViewFinder  cd BrowserGap  git fetch --all  git branch nexe-build  ./buld_docker.sh  ./run_docker.sh


Заключение


Как и у любого продукта, у ViewFinder есть свои слабые стороны: плохонькие юзабилити и дизайн не слишком мешают, а вот желание разработчика загнать полноценное пользование сервисом в SaaS модель напрягают. К счастью, он принципиально держит фронтенд и вообще большую часть проекта открытыми, да и для частного использования это сейчас практически безальтернативный инструмент. Судя по его комментариям, из-за большого спроса на качество картинки, в следующих релизах появится его регулировка, чтобы пользователи могли сами выбирать между экономией трафика и визуальной составляющей. Кроме того, вместо передачи отдельных фреймов в webp будет реализован h264-стрим (через конвертацию в ffmpeg). В любом случае проект интересный и закрывает целую нишу, так что своих пользователей он уже нашёл.



На правах рекламы


Эпично! Мощные серверы на базе новейших процессоров AMD EPYC для размещения проектов любой сложности, от корпоративных сетей и игровых проектов до лендингов и VPN.

Подробнее..

Категории

Последние комментарии

  • Имя: Макс
    24.08.2022 | 11:28
    Я разраб в IT компании, работаю на арбитражную команду. Мы работаем с приламы и сайтами, при работе замечаются постоянные баны и лаги. Пацаны посоветовали сервис по анализу исходного кода,https://app Подробнее..
  • Имя: 9055410337
    20.08.2022 | 17:41
    поможем пишите в телеграм Подробнее..
  • Имя: sabbat
    17.08.2022 | 20:42
    Охренеть.. это просто шикарная статья, феноменально круто. Большое спасибо за разбор! Надеюсь как-нибудь с тобой связаться для обсуждений чего-либо) Подробнее..
  • Имя: Мария
    09.08.2022 | 14:44
    Добрый день. Если обладаете такой информацией, то подскажите, пожалуйста, где можно найти много-много материала по Yggdrasil и его уязвимостях для написания диплома? Благодарю. Подробнее..
© 2006-2024, personeltest.ru