Контент выбран изпредстоящий«Python3 Anti-Reptile Principles and Bypassing Actual Combat», предметом этой открытой рукописи является Глава 6 — Text Confusion Anti-Crawler. Эта статья — Глава 6, Раздел 3 SVG Anti-Crawler, Раздел 4«Подумайте, прежде чем использовать его, купель-антирептилия, которая ранит врага на тысячу и самоуничтожается на 800»Размещено, остальные подразделы будутпостепенная доставка.
Антикраулер карты SVG
SVG — это графический формат, используемый для описания двухмерной векторной графики. Он описывает графику на основе XML, и увеличение или уменьшение масштаба не повлияет на качество графики. Эта особенность векторной графики делает ее широко используемой на веб-сайтах.
Метод защиты от сканирования, который нам нужно понять далее, реализуется с использованием SVG.Этот метод защиты от сканирования заменяет определенный текст векторной графикой, что не влияет на нормальное чтение пользователей, но программа-сканер не может получить графику SVG в том же способ чтения текста. Поскольку графика в SVG также представляет собой текст, необходимо сопоставить и заменить реальный текст соответствующей графикой SVG на бэкэнде или во внешнем интерфейсе.Этот метод предотвращения сканирования называется антисканированием сопоставления SVG.
6.3.1 SVG-отображение обхода обхода краулеров в реальном бою
Пример 6: Пример антисканера карты SVG.
URL-адрес:ООО, ООО .porters.vip / путаница / волосы ...
Задача: просканировать контактный номер телефона, адрес магазина и рейтинговые данные страницы веб-сайта оценки пищевого бизнеса, содержимое страницы показано на рис. 6-15.
показано.
Рисунок 6-15 Пример страницы 6
Прежде чем писать код Python, нам нужно определить положение элементов целевых данных. В процессе позиционирования я обнаружил другое явление: некоторые числа не существуют в HTML-коде. Например, данные оценки вкуса, расположение его элементов показаны на рис. 6-16.
Рисунок 6-16 Расположение элементов оценки вкуса в данных оценки
По содержимому страницы HTML-код должен быть 8.7, а по факту мы видим:
<span class="item">口味:<d class="vhkjj4"></d>.7</span>
В HTML-коде есть цифра 7 и десятичная точка, но нет цифры 8, похоже, что место цифры 8 занимает тег d. Отображение у служебного номера телефона еще более странное, нет ни одного номера. HTML-код, соответствующий рабочему телефону, выглядит следующим образом:
<div class="col more">
电话：
<d class="vhkbvu"></d>
<d class="vhk08k"></d>
<d class="vhk08k"></d>
<d class="">-</d>
<d class="vhk84t"></d>
<d class="vhk6zl"></d>
<d class="vhkqsc"></d>
<d class="vhkqsc"></d>
<d class="vhk6zl"></d>
</div>
Содержит много тегов d, использует ли он теги d для размещения заполнителей, а затем покрывает их элементами? Мы можем сравнить количество d-меток с количеством чисел и обнаружить, что это одно и то же число, то есть пара d-меток представляет число.
Каждая пара тегов d имеет атрибут класса, некоторые с одинаковым значением атрибута класса, а некоторые с разными значениями. Давайте сравним значение атрибута класса с числом, чтобы увидеть, сможем ли мы найти шаблон, как показано на рис. 6-17.
Рисунок 6-17 Сравнение значений и чисел атрибутов класса
Как видно из рисунка 6-17, между значением атрибута класса и числом существует однозначное соответствие, например, значение атрибута vhk08k соответствует числу 0. Из этой подсказки мы можем догадаться, что каждое число соответствует значению атрибута, как показано на рис. 6-18.
Рисунок 6-18 Соответствие между числами и значениями атрибутов
Когда браузер отображает страницу, она будет отображаться в соответствии с этим соответствием, поэтому страница отображает число, и то, что мы видим в коде HTML, — это значения атрибутов класса. Браузер сопоставляет теги d и числа в HTML в соответствии с этим отношением при отображении и отображает результат сопоставления на странице. Логика отображения показана на рис. 6-19.
Рисунок 6-19 Логика отображения
Наш код краулера может реализовать функцию сопоставления по той же логике: при разборе HTML-кода значение атрибута класса тега d вынимается, и тогда число, отображаемое на странице, может быть получено путем сопоставления. Как реализовать отношение сопоставления в коде сканера? На самом деле в веб-странице используется структура «имя атрибутаномер», и встроенный в Python словарь как раз может удовлетворить наши потребности. Мы можем протестировать его с помощью кода Python, код выглядит следующим образом:
# 定义映射关系
mappings = {'vhk08k': 0, 'vhk6zl': 1, 'vhk9or': 2,
'vhkfln': 3, 'vhkbvu': 4, 'vhk84t': 5,
'vhkvxd': 6, 'vhkqsc': 7, 'vhkjj4': 8,
'vhk0f1': 9}
# HTML 中得到的属性值
html_d_class = 'vhkvxd'
# 将映射后的结果打印输出
print(mappings.get(html_d_class))
Логика этого кода такова: сначала определите отношение сопоставления между значениями атрибута и числами, затем примите значение атрибута тега d в HTML, а затем распечатайте результат сопоставления этого значения атрибута. Результат после запуска кода:
6
Текущий результат показывает, что этот метод отображения возможен. Тогда давайте попробуем сопоставить контактный номер бизнеса:
# 定义映射关系
mappings = {'vhk08k': 0, 'vhk6zl': 1, 'vhk9or': 2,
'vhkfln': 3, 'vhkbvu': 4, 'vhk84t': 5,
'vhkvxd': 6, 'vhkqsc': 7, 'vhkjj4': 8,
'vhk0f1': 9}
# 商家联系电话 class 属性
html_d_class = ['vhkbvu', 'vhk08k', 'vhk08k',
'', 'vhk84t', 'vhk6zl',
'vhkqsc', 'vhkqsc', 'vhk6zl']
phone = [mappings.get(i) for i in html_d_class]
# 将映射后的结果打印输出
print(phone)
Текущий результат:
[4, 0, 0, None, 5, 1, 7, 7, 1]
Мы использовали метод сопоставления, чтобы получить номер делового контакта, что указывает на то, что антикраулер сопоставления SVG был нами обойден.
6.3.2 Чемодан Дяньпина против рептилий
Этот вид сопоставления используется не только в примерах из этой книги, но и на крупных веб-сайтах. Dianping – это ведущая китайская торговая и информационная платформа о жизни, а также первый в мире независимый сторонний веб-сайт отзывов потребителей. Dianping не только предоставляет пользователям информационные услуги, такие как информация о продавцах, отзывы потребителей и потребительские скидки, но также предоставляет услуги транзакций O2O (онлайн-офлайн), такие как групповые покупки, бронирование ресторанов, еда на вынос и электронные членские карты.
На веб-сайте общественного обсуждения также используется метод предотвращения сканирования карт, откройте браузер и посетитеВу Ву. Review.com/shop/147410…6-20.
Рисунок 6-20 Страница бизнес-информации Дяньпин
Страница деловой информации Dianping в основном используется для отображения различных рейтингов, номеров рабочих телефонов, адресов магазинов и рекомендуемых блюд потребителей в бизнесе. Мы можем взглянуть на HTML-код служебного телефона или рейтинга, как показано на рис. 6-21.
Рис. 6-21 HTML-код рабочего телефона
Не все бизнес-номера в Dianping заменены тегами d, некоторые из них используют цифры. Но если вы присмотритесь, то обнаружите, что количество бизнес-номеров равно количеству тегов d плюс количество чисел, что указывает на то, что значение атрибута класса тега d и числа также могут иметь отношение один к одному. одно отношение отображения. Заинтересованные студенты могут использовать метод из примера 6, чтобы попытаться сопоставить числа в деле Дяньпин.
Если способ обхода этого метода так прост, то он давно устранен, почему его используют даже такие крупные сайты, как Dianping? Давайте продолжим смотреть вниз, и HTML-код части рабочих часов бизнеса Дяньпина показан на рис. 6-22.
Рисунок 6-22 Часы работы продавцов Дяньпин
В дополнение к цифровому отображению только что, Dianping также нанес на карту китайский язык. На этом этапе, если вы искусственно сопоставите значение класса с соответствующим текстом в соответствии с Примером 6, это будет очень проблематично. Только представьте, если весь текст на веб-странице использует этот метод сопоставления антикраулеров, как с этим справятся инженеры краулеров? Вы сопоставляете весь используемый текст?
Это невозможно, а отображение включает в себя 10 цифр, 26 английских букв и тысячи часто используемых китайских иероглифов. И как только целевой веб-сайт меняет соответствие текста, инженеру сканера необходимо переназначить весь текст. Столкнувшись с такой проблемой, мы должны найти правила отображения текста и уметь использовать язык Python для реализации алгоритма отображения. Таким образом, независимо от того, как меняется соответствие между сопоставлением текста целевого веб-сайта, мы можем использовать этот алгоритм сопоставления для получения правильного результата.
Как это отношение отображения реализуется на веб-страницах? Определен ли массив на странице с помощью JavaScript? Или API асинхронного запроса для получения данных JSON? Это возможно, и мы собираемся выяснить.
6.3.3 Принцип защиты от сканирования SVG
Отношения отображения не могут появиться из воздуха, и необходимо использовать некоторые технические возможности. Только JavaScript и CSS имеют отношение к атрибуту класса тега в HTML. Основываясь на этой подсказке, нам нужно продолжить анализ примера 6. Код HTML для рабочего телефона в чехле:
<div class="col more">电话：
<d class="vhkbvu"></d>
<d class="vhk08k"></d>
<d class="vhk08k"></d>
<d class="">-</d>
<d class="vhk84t"></d>
<d class="vhk6zl"></d>
<d class="vhkqsc"></d>
<d class="vhkqsc"></d>
<d class="vhk6zl"></d>
</div>
Мы можем выбрать пару тегов d по желанию, а затем посмотреть, есть ли в соответствующем стиле CSS подсказки, которые можно проанализировать глубже, и, если подсказки нет, посмотреть на JavaScript. Стиль CSS тега d выглядит следующим образом:
d[class^="vhk"] {
width: 14px;
height: 30px;
margin-top: -9px;
background-image: url(../font/food.svg);
background-repeat: no-repeat;
display: inline-block;
vertical-align: middle;
margin-left: -6px;
}
.vhkqsc {
background: -288.0px -141.0px;
}
Стиль тега d не выглядит чем-то особенным, он просто устанавливает координаты свойства фона. Однако фоновое изображение задается в общедоступном стиле тега d выше. Мы можем скопировать адрес фонового изображения и открыть его в новой вкладке браузера. Фоновое изображение тега d показано на рисунке 6-. 23.
Рисунок 6-23 Фоновое изображение этикетки
Фоновое изображение метки d заполнено числами, и эти неупорядоченные числа имеют в общей сложности 4 строки. Но это не кажется большой картинкой, смотрим исходный код страницы с картинкой, содержимое показано на рис. 6-24.
Рисунок 6-24 Исходный код страницы изображения
Первые две строки в исходном коде указывают, что это файл SVG, в котором текстовый тег используется для определения текста, тег стиля используется для задания стиля текста, а текст, определенный текстовым тегом, является именно номер, отображаемый на странице изображения. Являются ли эти неупорядоченные номера телефонными номерами и рейтинговыми номерами, которые мы видим на странице?
За исключением тега d, значением атрибута класса которого является vhkbvu, другие теги также используют этот стиль CSS, но координатное позиционирование каждой пары тегов d отличается. Их координаты расположены следующим образом:
.vhkbvu {
background: -386px -97px;
}
.vhk08k {
background: -274px -141px;
}
.vhk84t {
background: -176px -141px;
}
Координаты — это ключ к нахождению чисел.Чтобы знать, как рассчитываются координаты, вы должны кое-что знать о SVG.
В начале этого раздела мы вкратце поняли концепцию SVG, зная, что SVG основан на XML. По сути, он описывает содержимое изображения на описательном языке в текстовом формате, поэтому SVG — это формат векторной графики, не зависящий от разрешения изображения. Откройте текстовый редактор и напишите во вновь созданном файле следующее:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/
DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/
1999/xlink" width="250px" height="250.0px">
<text x='10' y='30'>hello,world</text>
</svg>
Сохраните файл как test.svg, а затем используйте браузер, чтобы открыть файл test.svg, как показано на рис. 6-25.
Рис. 6-25 Отображение содержимого test.svg
Первые 3 строки кода объявляют тип файла, строки с 4-й по 5-ю определяют блок содержимого SVG, а также ширину и высоту холста, а 6-я строка использует тег text для определения фрагмента текста и указания координат текст. Этот текст мы видим в браузере, а в кодеxкоординаты иyКоординаты используются для определения положения текста в холсте. Правила координат следующие.
- В качестве точки нулевой координаты возьмите левый верхний угол страницы, то есть значение координаты равно (0, 0).
- Координаты в пикселях.
- xПоложительное направление оси слева направо,yПоложительное направление оси сверху вниз.
- nперсонажи могут иметьnпараметр положения.
Если количество символов превышает номер значения символов параметров, то никакая позиция не будет последним параметром параметра параметра точки координаты положения равна нулю, в соответствии с исходным порядком.
Это кажется не очень понятным Мы можем понять определение оси координат, изменив код. прежде всегоxось, в текстовой меткеxПредставляет символы списка на страницеxположение оси, в test.svgxЗначение равно 10. Теперь установим его равным 0. После сохранения обновите веб-страницу.Содержимое страницы показано на рисунке 6-26.
Рисунок 6-26xtest.svg отображает содержимое, когда оно равно 0
xКогда значение равно 0, текст размещается напротив левой стороны браузера. а такжеxЗначение 10 помещает текст на некоторое расстояние от левой стороны браузера, указывая, чтоxЗначение может определять положение текста. Теперь вставляем кодxСоответствующее значение изменяется на «10 50 30 40 20 60» (обратите внимание, что положение второго числа 20 и пятого числа здесь преднамеренно заменено местами), чтобы установить координатное положение первых 6 символов.
В это время позиционный параметр первого символа равен 10, позиционный параметр второго символа равен 50, позиционный параметр третьего символа равен 30 и т. д., нормальный порядок отображения текста на странице должен быть следующим:
holle,world
А поскольку мы меняем позиционные параметры второго символа и пятого символа, то есть позиции буквы е и буквы о меняются местами, как показано на рис. 6-27.
показано.
Рисунок 6-27 Установка несколькихxзначение svg
Порядок символов на рис. 6-27 такой же, как мы догадались, а это значит, что каждый символ в SVG может иметь свой собственныйxзначение координат оси.yа такжеxТочно так же у каждого персонажа может быть свой собственныйyзначение координат оси. Хотя мы установили только 6 позиционных параметров, в svg 11 символов, но символы без позиционных параметров все равно можно отсортировать в исходном порядке. Поняв базовые знания SVG, давайте вернемся к настройке параметров координат в файле SVG, используемом в данном случае Символы на рисунке 6-23 соответствуют символам в исходном коде страницы изображения на рисунке 6- 24, и каждый символ установленxПараметр положения оси иyОсь имеет только 1 значение.
После понимания позиционных параметров нам также необходимо решить проблему позиционирования символов. Браузер определяет соответствующий номер в SVG по заданным в стиле CSS координатам, а также по ширине и высоте элемента.xПоложительное направление оси слева направо,yПоложительное направление оси — сверху вниз, как показано на рис. 6-28.
Рисунок 6-28 SVGxось иyСвязь между осями и параметрами положения
И в стиле CSSxось сyОси перевернуты, то есть в стилях CSSxОсь отрицательная вправо,yОсь направлена вниз отрицательно, как показано на рис. 6-29.
Рисунок 6-29 CSSxось иyСвязь между осями и параметрами положения
Поэтому, когда нам нужно найти позицию символа в SVG в CSS, нам нужно использовать отрицательные числа. Мы можем понять их взаимосвязь на примере, теперь нам нужно найти центральную точку символа 1 в строке 1 на рис. 6-30 в CSS.
Рисунок 6-30 SVG
Предполагая размер символа 14 пикселей, SVG рассчитывается следующим образом.
- характер вxПравило расчета центральной точки оси: размер символа делится на 2 плюс размер символа.xПараметр начальной позиции оси, т.е. 14÷2+0 равен 7.
- характер вyПравило расчета для центральной точки оси:yвысота оси минус символyНачальная точка оси минус размер символа, разделенный на 2, а затем плюс символyПараметр начальной позиции оси и, наконец, добавить половину значения размера символа, то есть (38−0−14)÷2+0+7 равно 19.
Наконец, координаты SVG:
x='7' y='19'
CSS стильxось иyОсь противоположна SVG, поэтому позиционирование этого символа в стилях CSS:
-7px -19px
Таким образом, центральная точка указанного символа может быть позиционирована. Но если вы хотите полностью отобразить символ на HTML-странице, вам также необходимо установить стили ширины и высоты для соответствующих тегов в HTML, например:
width: 14px;
height: 30px;
Поняв взаимосвязь между стилями SVG и CSS, мы можем сопоставить соответствующие символы в SVG в соответствии со стилями CSS.
В реальных сценариях нам нужно разрешить программе автоматически обрабатывать отношения сопоставления между стилями CSS и SVG, а не выполнять их вручную.
Работа. Взяв в качестве примера стили SVG и CSS из примера 6, если нам нужно реализовать функцию автоматического сопоставления с кодом Python, сначала я
Нам нужно получить URL-адреса этих двух файлов, например:
url_css = 'http://www.porters.vip/confusion/css/food.css'
url_svg = 'http://www.porters.vip/confusion/font/food.svg'
Существуют также значения атрибутов класса HTML-тегов, которые необходимо сопоставить, например:
css_class_name = 'vhkbvu'
Затем используйте библиотеку запросов, чтобы сделать запрос к URL-адресу и получить текстовое содержимое. Соответствующий код выглядит следующим образом:
import requests
css_resp = requests.get(url_css).text
svg_resp = requests.get(url_svg).text
Извлеките значение координаты, соответствующее атрибуту метки в файле стиля CSS, и используйте здесь обычное сопоставление. Соответствующий код выглядит следующим образом:
import re
pile = '.%s{background:-(\d+)px-(\d+)px;}' % css_class_name
pattern = re.compile(pile)
css = css_resp.replace('\n', '').replace(' ', '')
coord = pattern.findall(css)
if coord:
x, y = coord[0]
x, y = int(x), int(y)
Значение координаты, полученное в это время, является положительным числом, которое можно напрямую использовать для позиционирования символов SVG. Перед позиционированием нам нужно получить объекты Element всех текстовых тегов в SVG:
from parsel import Selector
svg_data = Selector(svg_resp)
texts = svg_data.xpath('//text')
Затем получаем значения y во всех текстовых тегах, а затем зацикливаем объекты Element, полученные на предыдущем шаге, чтобы получить значения:
axis_y = [i.attrib.get('y') for i in texts if y <= int(i.attrib.get('y'))][0]
получатьyПосле значения вы можете начать позиционирование символов. Следует отметить, что текстовый тег в SVG имеетyЗначение получено из стиля CSSyЗначения не обязательно должны быть точно равными, потому что стили можно настраивать по желанию.Например, в стилях CSS -90 и -92 нет разницы в позиционировании SVG, поэтому нам нужно только знать, какой текст Это.
Так как же определить, что это за текст?
Мы можем использовать метод исключения, чтобы определить, является ли текущий стиль CSS вyЗначение равно -97, тогда в SVG текстyЗначение не может быть меньше 97, нам просто нужно получить ближайший текстовый тег больше 97.yстоимость. Например, все текстовые теги в текущем SVGyЗначение:
[38, 83, 120, 164]
Тогда ближайшая вещь больше 97 это 120. Превратите эту логику в код:
axis_y = [i.attrib.get('y') for i in texts if y <= int(i.attrib.get('y'))][0]
Получив значение y, вы можете определить, какая это текстовая метка. Соответствующий код выглядит следующим образом:
svg_text = svg_data.xpath('//text[@y="%s"]/text()' % axis_y).extract_first()
Далее нужно подтвердить размер текста в SVG, то есть нужно найти значение атрибута font-size. Соответствующий код выглядит следующим образом:
font_size = re.search('font-size:(\d+)px', svg_resp).group(1)
Получив значение размера шрифта, мы можем найти определенные символы.xСколько символов имеет ось? мы только что получили
svg_text — это символ в указанном текстовом теге:
'671260781104096663000892328440489239185923'
Нужно ли вычислять длину строки? Нет, мы знаем, что размер каждого символа составляет 14 пикселей, просто нужно изменить стиль CSS.xРазделите значение на размер символа, чтобы получить позицию символа в строке. Результатом деления может быть целое число или нецелое число. Когда результат является целым числом, это означает, что позиционирование полностью точное, и мы можем использовать функцию нарезки для получения символов. Если результат не является целым числом, это означает, что позиционирование не совсем точное.Поскольку половина символов не может появиться, мы используем деление пола (обычное деление вниз в языках программирования, которое возвращает целую часть частного .) Чтобы получить целое число:
position = x // int(font_size) # 结果为 27
То есть стиль CSS vhkbvu отображает значение 27-й позиции 4-й строки текста в SVG. Результат сопоставления показан на рисунке 6-31.
Рисунок 6-31 Результат сопоставления
Затем используйте функцию среза, чтобы получить символы. Соответствующий код выглядит следующим образом:
number = svg_text[position]
print(number)
Результат выполнения кода равен 4. Мы также можем попробовать другие значения атрибута класса, и окончательный результат будет таким же, как символы, отображаемые на странице, что указывает на правильность этого алгоритма сопоставления. На данный момент мы завершили обход картированных антикраулеров.
6.3.4 Резюме
Как и в разделах 6.1 и 6.2, методы защиты от сканирования, используемые в примерах в этом разделе, не могут получить «просматриваемый» контент даже с помощью инструментов рендеринга. Антикраулеры сопоставления SVG используют преимущества различий в рендеринге браузеров и языков программирования, а также знания внешнего интерфейса, такие как позиционирование SVG и CSS. Если инженеры краулеров не знакомы с принципами рендеринга и интерфейсом, этот метод антикраулера принесет большие неприятности.
Преимущества новой книги
Действительно с нетерпением жду этого! Книга "Python3 Anti-Reptile Principles and Bypassing Actual Combat" наконец-то встретится с вами! Чтобы поблагодарить всех за их ожидания и поддержку Wei Shidong и этой книги, после выпуска новой книги будет проведен ряд мероприятий по раздаче книг и ограниченных по времени мероприятий со скидками.
Друзья, которые хотят пообщаться с автором Вэй Шидонгом или принять участие в издании новых книг, могут отсканировать QR-код и войти в группу, чтобы взаимодействовать со мной!
Перепечатайте инструкции
Содержание этой статьи взято из опубликованной книги «Python3 Anti-Reptile Principles and Bypassing Actual Combat», друзья и коллеги могут перепечатать!
Не забудьте предоставить соответствующую информацию об авторских правах 😊.