Author Archives: Pashaster

About Pashaster

Создатель и основной автор данного проекта. Профессиональный разработчик с 4-летним стажем.

Что такое SSL, HTTPS и TLS

chto-takoe-httpsВсем доброго времени суток ! :-)

Те, кто подписан на обновления проекта и следят за выходом новых статей, заметили, что в последнее время я увлёкся вопросами кибербезопасности. В результате свет увидел статьи о капче, как одного из механизмов защиты сайта от роботов, и публикацию о безопасности WordPress.

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

Однако, в рамках работы в последнее время всё чаще появляется необходимость установки SSL сертификатов на сайт, да и в саму тему HTTPS протокола я давно хотел углубиться, но всё как-то руки не доходили. В итоге, я решил наконец разобраться в данных вопросах досконально с помощью данного блога, попутно делясь своими знаниями с вами.

Поэтому сегодняшняя статья будет посвящена ответам на вопрос, что такое HTTPS, SSL и TLS: какая связь существует между этими терминами, как их подключить к сайту, сколько это будет стоить и возможно ли получить бесплатный SSL сертификат.

Чтобы вас немного замотивировать на чтение статьи, сразу скажу, что использование протокола HTTPS является не только средством безопасной коммерческой деятельности через сайт, но и практически обязательным условием для продвижения в Google и, как следствие, улучшения конверсии.

Так что HTTPS даёт не только защищённость данных ресурса, но и является средством SEO оптимизации сайта.

А также мы поговорим о том, зачем нужен SSL сертификат на сайт, который сейчас рекомендую купить и стремятся продать в Интернете на каждом шагу.

Как вы уже поняли, темы сегодня будут подниматься очень важные и непростые. Поэтому советую всем запастись попкорном и устроиться поудобнее — впереди вас ждёт много информации :-)

Поехали!

Что такое HTTPS?

Начнём с истории :-)

Несколько лет назад основным протоколом передачи данных в среде Web был HTTP (Hypertext Transfer Protocol). Алгоритм его работы прост и основан на установке соединения типа «клиент-сервер». При этом обмен информацией производится в текстовом формате, следовательно, возникает риск отслеживания сообщений между клиентами.

В связи с этим в последние годы в Интернете стало популяризироваться использование расширения протокола HTTP под названием HTTPS (HyperText Transfer Protocol Secure).

Браузеры Chrome и Firefox уже отмечают сайты на HTTP как «небезопасные», Google понижает сайты на старом протоколе в выдаче — всё это делается с целью стимуляции вебмастеров перехода с HTTP на HTTPS.

Поэтому возникло даже целое понятие «миграция на HTTPS», поскольку в Рунете и Буржунете ресурсы массово начали осуществлять перевод с HTTP на HTTPS.

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

Кроме вопросов безопасности наличие SSL-сертификата с августа 2014 года положительно влияет на позиции сайта в поисковой выдаче Google, который является главным пропагандистом данного протокола.

Почему же поисковики вдруг взъелись на HTTP и стали заставлять всех переходить на HTTPS?

HTTPS, несмотря на обильное внимание в последнее время, является достаточно древним протоколом, созданным в далёком 1994 году компанией Netscape Communications для своего браузера Netscape Navigator.https-dlya-seo

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

Ещё одним отличием от HTTP является сетевой TCP порт, используемый для передачи данных. Вместо 80 для HTTPS используется 443. Зачем нужен HTTPS для сайта становится понятно после ознакомления со статистикой взломов интернет магазинов, платежных систем и социальных сетей.

Уникальный алгоритм с механизмом самообучения проанализировал взломы 313 190 реальных сайтов, на которых производилось более 760 000 взломов. Больше трети взломов связаны были именно с подменой пакетов при передаче данных.

Что такое TLS и SSL?

Пытаясь разобраться с тем, что такое HTTPS и для чего он нужен, я немного запутался, т.к. при упоминании о данном протоколе постоянно мелькали ссылки на другие протоколы – SSL и TLS.

И то протокол, и то протоколы… Какая между ними связь вообще?

Но, как это часто и бывает, я слишком поспешно изучал новый материал и не заметил маленькую деталь: HTTPS – это протокол передачи данных, а SSL и TLS – это криптографические протоколы. Т.е. это разные типы протоколов и у них, следовательно, разные назначения, что не мешает использовать их все вместе в рамках одного процесса – передачи данных.

Главное отличие HTTP от HTTPS в том, что в последнем данные передаются поверх протоколов SSL и TLS, т.е. сначала шифруются в соответствии с криптографическими протоколами, а потом уже передаются стандартным способом при помощи транспортных протоколов (например, TCP/IP, как и при использовании HTTP).

Если интересно, что такое криптографический протокол, то, согласно Википедии, это – набор криптографических алгоритмов (способов шифрования), который определяет порядок их применения и способы использования.

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

SSL (Secure Sockets Layer — уровень защищённых сокетов) появился достаточно давно, в 1995 году, практически одновременно с изобретением самого HTTPS.

А в 1999 году SSL, находясь в версии 3.0, плавно перешёл в другой криптографический протокол TLS (Transport Layer Security — Протокол защиты транспортного уровня), который активно используется по сей день наряду с SSL.

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

В связи с этим, TLS сейчас имеет версию 1.2, которая была выпущена в 2008 году, а SSL и вовсе прекратил своё развитие, оставшись вечно молодым с 1996 года, когда был выпущен SSL 3.0.

Несмотря на то, что эти протоколы родственные и даже используются вместе, из-за чего в литературе можно встретить их упоминание в связке TLS/SSL, работают они всё-таки по-разному.

В связи с этим разработчикам на практике часто приходится совершать дополнительные действия, чтобы информация, защищаемая с помощью TLS/SSL передавалась и распознавалась корректно.

Но я не буду сейчас вдаваться в эти детали, т.к. они могут быть интересны весьма узким специалистам. Если вы к таковым относитесь и хотите прочитать об особенностях SSL и TLS, а также об их сходствах и различиях более детально, то рекомендую вам следующую статью о TLS/LLS.

Хорошо, с тем, как взаимодействуют HTTPS, SSL и TLS более-менее разобрались. А что такое SSL сертификат и каким он боком к HTTPS?

Что такое SSL сертификат?

SSL сертификат – это, как раз, и есть один из защитных механизмов, который используется для шифрования данных при передаче их с применением криптографического протокола TLS/SSL. Именно благодаря наличию сертификата безопасности, можно использовать протокол HTTPS, который и был разработан для создания зашифрованных каналов передачи данных.

doverennyj-ssl-sertifikatПо сути, SSL сертификат является уникальным шифром, с помощью которого кодируется информация, что делает возможным её чтение только тем, кому этот ключ известен.

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

Помимо способа шифрования, SSL сертификат содержит также следующую информацию:

  • наименование владельца сертификата (должно быть уникальным);
  • дата регистрации и срок окончания действия сертификата;
  • полный и уникальный идентификатор регистрационного центра, который выдал сертификат;
  • цифровая подпись регистратора;
  • открытый ключ владельца.

SSL сертификаты выпускаются центрами сертификации (CA — Certification Authority). Также для передачи данных по протоколу SSL возможно использовать «пустой» сертификат (содержит фиктивную информацию о домене и владельце, нужен лишь в тестовых целях для настройки HTTPS соединения) и самоподписанный, более подробно о котором мы поговорим далее.

Окей, для чего нужен SSL сертификат на сайт — понятно, но как он работает?

Как работает SSL сертификат?

Существует два основных пути шифрования информации: симметричным ключ (общий секретный ключ) и асимметричный (открытый ключ). Протокол SSL/TLS поддерживает оба.

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

Данный тип шифрования использует следующие алгоритмы: DES, 3-DES, RC2, RC4 и AES.

SSL сертификат является частным случаем сертификата открытого ключа, область применения которого не ограничивается только лишь Вебом, на самом деле.

Асимметричный SSL ключ состоит из двух ключей. Один из них является открытым, который, как правило, публикуется в самом сертификате, а другой – секретным, который никому не сообщается.

Эти ключи работают в паре и выполняют противоположные функции. Если данные шифруются открытым ключом, то расшифровываются они секретным. Если информация кодируется с использованием секретного ключа, то декодируются они открытым. Правда, в случае современных SSL сертификатов работает только вторая схема.

Таким образом, SSL сертификат используется для подтверждения подлинности сервера клиентом и наоборот.

Если клиент с помощью своего веб браузера хочет установить защищённое соединение с ресурсом по HTTPS, то он запрашивает у сервера открытый ключ сертификата ресурса. Сервер предоставляет его в ответ, проводя дополнительные проверки аутентификации.

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

Это и создаёт защищённый туннель передачи информации, который защищает её от хищения и изменений.

Перед тем, как установить защищенное соединение проверяется также DNS и IP-адрес сервера веб-сайта, прописанные в сертификате, что дополнительно позволяет повысить безопасность передачи данных.

Схематично принцип работы HTTPS можно представить следующим образом:

princip-raboty-https

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

Поэтому, если вы пользуетесь SSL сертификатом, то не забывайте вовремя его продлевать, иначе он принесёт вам больше вреда, чем пользы.

Когда после прохождения всех проверок подлинности соединение между клиентом и сервером по протоколу HTTPS всё-таки установлено, в браузере напротив URL загорается красивый зелёный значок, свидетельствующий о защищённости соединения. В разных браузерах его вид может отличаться:

kak-vyglyadit-https-v-raznykh-brauzerakh

Самым распространённым алгоритмом асимметричного SSL шифрования является RSA.

При шифрования с применением SSL сертификата он используется ещё и для определения ключа сессии, который необходим симметричным алгоритмам. Данное обстоятельство позволяет объединить асимметричное и симметричное кодирование, с помощью чего становится возможна передача большого объёма зашифрованной информации, не требующая при этом больших вычислительных ресурсов и времени.

Ох уж эта безопасность… Вечно в ней всё запутано :-)

Мало того, что куча всяких алгоритмов, способов шифрования, так ещё и SSL сертификаты бывают разных видов. Но, тем не менее, при покупке и выборе SSL сертификата для сайта без этой информации не обойтись, поэтому поговорим об этом детальнее.

Виды SSL сертификатов и их группы

Я бы не стал вас загружать информацией о типах SSL сертификатов просто так, если бы не один существенный нюанс: данные знания помогут вам сэкономить ваши деньги, если вы решите купить SSL сертификат для своего сайта.

Каким образом? Всё просто: стоимость SSL сертификатов различается от их предназначения и области применения.

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

Итак, какие же виды SSL сертификатов существуют и когда какой лучше использовать?

Типы SSL сертификатов по типу валидации

При заказе SSL сертификатов в сертификационных центрах можно встретить три основных вида, из которых предлагается выбор. Это основные виды SSL сертификатов, различающиеся по информации, которая будет проверяться при выдаче данного документа.

Считается, что чем больше данных лица, подающего заявку на оформление SSL сертификата (CSR — Certificate Signing Request), проверяется, тем сложнее его будет подделать и тем большую защиту он будет предоставлять.

От этого также зависит стоимость сертификатов и срок их оформления.

Самоподписанный SSL сертификат (SSC — Self Signed Certificate)

Я решил начать с данного типа, т.к. получить его проще всего и он является единственным абсолютно бесплатным SSL сертификатом среди всех существующих. Самозаверенный, самоизданный, самосозданный — как только данный SSL сертификат не называют :-)

Но у всех этих слов корень «сам», который говорит о том, что содержащаяся в самоподписанном SSL сертификате информация проверена самим создателем. Другими словами, создатель сертификата в данном случае является одновременно и центром сертификации (CA).

Главным плюсом такого SSL сертификата является то, что он является абсолютно бесплатным, создать его можно самостоятельно и в неограниченном количестве. Однако, самоподписанный SSL сертификат обладает одним весьма жирным минусом — он не обеспечивает защиту передаваемым по HTTPS и шифруемым с его помощью данным.

Он делает возможной Main-In-The-Middle атаку на сайт, в ходе которой злоумышленник может перехватить сертификат инициатора зашифрованного соединения и использовать его для дешифровки закодированных данных, передаваемых по HTTPS.

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

Из-за данного обстоятельства все современные веб-браузеры при попытке подключения к ресурсам с установленным самоподписанным SSL сертификатом выдают пользователю сообщение о ненадёжности соединения, благодаря люди могут подумать, что сайт заражён вирусом или их данные будут подвержены опасности.

samopodpisannyj-ssl-sertifikat-ustanovit

Как итог — человек уходит с такого сайта, даже не посмотрев на него, а вы, как владелец, теряете всю свою клиентуру и смысл создания сайта пропадает в целом. А всё — из-за банальной экономии :-)

Поэтому самоподписанный SSL сертификат для основного сайта не годится. Его можно использовать для тестирования HTTPS настроек сервера и сайта, а также для внутренних целей (например, когда на основном ресурсе соединение производится по HTTPS и поэтому его нужно настроить на DEV и STAGE окружениях).

Если хотите, чтобы SSL сертификат увеличивал ваши позиции в поисковой выдаче и повышал доверие пользователей — закажите другой тип сертификата.

SSL сертификат, подтверждающий доменное имя (Essential, DV — Domain Validation)

На этот вид приходится более 70 % всех сайтов на HTTPS в Рунете, т.к. данные SSL сертификаты самые дешёвые и порядок их оформления практически моментальный. Регистрация SSL сертификатов с проверкой прав на владение доменом доступна как физическим, так и юридическим лицам.

Определить сайты с установленным DV SSL сертификатом легко – в адресной строке браузера возле доменного имени светится закрытый зелёный замок.

doverennyj-ssl-sertifikat-v-brauzere

При выдаче такого сертификата в CA (сертификационный центр) отправляется письмо с запросом, который будет удовлетворён лишь когда выяснится, что у вас есть права на владение доменом.

Для этого email, с которого вы отправляете заявку на получение SSL сертификата, должен быть прописан либо в доменной информации WHOIS либо иметь в качестве почтового домена доменное имя сайта, т.е. быть в формате mail@sitename.zone.

Кстати, последний тип email должен иметь в качестве имени только определённые названия, т.е. если вы захотите заказать SSL сертификат для сайта site.ru, то запрос на его получение вы сможете послать в сертификационный центр лишь со следующих email:

  • admin@site.ru
  • administrator@site.ru
  • hostmaster@site.ru
  • postmaster@mail.ru
  • webmaster@mail.ru

Могу предположить, что данное ограничение сделано с целью пресечения атак злоумышленников на сертификационные центры путём автоматизированного отправления заявок на оформление SSL сертификатов и получения к ним доступа.

Также, в качестве альтернативных оправке email средств подтверждения регистрации SSL сертификата компании-регистраторы могут использовать размещение на сайте текстового пустого файла с хэш-названием либо просьбу изменить DNS запись домена сайта, чтобы вы могли подтвердить свои права на обладание доступа к ней.

При рассмотрении заявки на получение DV сертификата, как уже было сказано, проверяются только права на владение доменом, на остальную информацию внимание не обращается. Равно как никакая другая информация, публикуемая в SSL сертификатах других типов, в самом сертификате не указывается.

Этот тип SSL сертификата подходит для большинства сайтов, которым HTTPS соединение нужно только лишь для удовлетворения критерий Google и повышения позиций в поисковой выдаче.

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

SSL сертификаты, подтверждающие организацию (Instant, OV — Organization Validation)

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

Физическое лицо OV сертификат получить не может, регистрация SSL сертификата данной вида доступна только юридическим лицам.

После получения центром сертификации заявки на регистрацию проверяется существование указанной организации и её права на домен. Процесс этот не быстрый, вследствие чего сертификат будет выпускаться в течении 3-10 дней после подачи заявки.

Говоря по правде, на практике Instant SSL сертификат ничем не отличается от Essential, т.к. в браузере сайты с данными сертификатами отображаются одинаково — в адресной строке возле доменного имени каждого будет присутствовать зелёный закрытый замок.

informaciya-ob-ssl-sertifikata

Но при этом процедура оформления его сложнее и дольше, чем у предыдущего. Также цена SSL сертификата данного вида будет выше, чем у DV.

Всё это лишь для того, чтобы ваша организация была указана в сертификате, который обычные пользователи редко просматривают. Единственная польза этого шага в том, что если вы закажете OV сертификат для своего сайта, а затем злоумышленники получат доступ к вашему email, указанному в WHOIS информации о домене, то они не смогут подделать ваш сертификат, т.к. не смогут подтвердить права на владение организацией, указанной в оригинальном сертификате.

Таким образом, OV SSL сертификат более безопасный, чем DV, и если у вас есть официально зарегистрированная компания, то лучше остановиться всё-таки на данном варианте.

Если вы хотите оформить именно данный тип SSL сертификата, то заранее приведите в порядок информацию (и для ускорения процедуры переведите её на английский язык), которая будет проверяться CA при выдаче данного SSL сертификата:

  1. Наличие компании в «жёлтых страницах», т.е. в телефонных справочниках организаций. Для регистрации в таком справочнике можете воспользоваться сайтом yp.ru.
  2. Указание организации в WHOIS данных домена, что подтверждает права владения доменным именем.
  3. Документы о регистрации компании.
  4. Также будьте готовы к телефонному звонку из CA на номер, указанный в форме заказа SSL сертификата, или на номер, прописанный в WHOIS данных домена. Будьте готовы, что диалог может вестись на английском языке.

Не факт, что все эти данные будут проверяться, но лучше быть подготовленным :-)

SSL сертификаты с расширенной проверкой (EV — Extended Validation)

Процедура оформления данного вида SSL сертификата самая сложная из всех перечисленных. Зато, в качестве вознаграждения, вы получите указание вашей организации в адресной строке браузера возле доменного имени сайта.

chto-takoe-https-greenline

За эту особенность данный тип SSL сертификатов часто называют «зелёной строкой (Green Line)». Такое новшество увеличивает уровень доверия пользователей к сайту.

Стоит сказать, что порядок выпуска Extended SSL сертификатов не только долгий (порядка 10-14 дней), но ещё и соответствует определённым стандартам, которые были озвучены на специализированном форуме CA/Browser Forum в 2007 году. Он состоит из следующих этапов, выполняемых центром сертификации перед выпуском EV сертификата:

  1. Проверка физической, правовой и операционной деятельности субъекта (компании, получающей сертификат).
  2. Соответствие информации об организации официальным документам.
  3. Проверка организации на обладание исключительными правами на использование домена.
  4. Проверка правомочности выпуска организации Entended Validation SSL-сертификата.

При проверке организации центром сертификации обращают внимание на ту же информацию, что и для OV SSL сертификатов. Следовательно, и сама регистрация доступна только юридическим лицам.

Также следует отметить, что не всякий CA имеет право на выдачу такого сертификата. Для того, чтобы центр сертификации мог выдавать EV SSL сертификаты, он сам должен соответствовать указанным выше требованиям и ежегодно подтверждать это соответствие.

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

Именно поэтому данный тип SSL сертификатов можно встретить на сайтах различных коммерческих структур (банки, платёжные системы и др., через сайты которых производятся различные финансовые операции и проходят другие секретные данные пользователей).

Стоимость SSL сертификата повышенной надёжности также самая высокая из всех перечисленных ранее.

Виды SSL сертификатов, учитывающих прочие особенности

Основные типы SSL сертификатов по проверяемой при их регистрации информации мы рассмотрели. Но сертификаты различаются не только по указанному признаку.

poluchit-besplatnyj-ssl-sertifikatДа, тип валидации — основное различие, определяющее основные пункты меню выбора сертификата при заказе его у регистраторов через сайты. Однако, если выбрать какой-то конкретный, то можно обнаружить множество опций, оформленных в виде полей для проставления галочки, которые соответствуют дополнительным особенностям SSL сертификатов.

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

SSL сертификаты с поддержкой повышения уровня шифрования (SGC)

Данный вид SSL сертификатов является устаревшим и был актуален только во времена повсеместного использования старых браузеров, поддерживающих только 40 или 56 битное шифрование.

При использовании данного сертификата уровень шифрования принудительно повышался до 128 бит.

Сейчас смысл такие SSL сертификаты приобретать отсутствует. Тем более, что стоят они достаточно недёшево.

Разве что для внутренних нужд компаний, использующих устаревшие компьютеры и ПО. Но, как правило, внутренние ресурсы закрыты от доступа по внешним IP адресам, так что смысла использования SGC сертификата также мало.

Групповые SSL сертификаты (WildCard)

Данный вид SSL сертификатов можно использовать не только для основного сайта, но и для его поддоменов.

Мало кто знает, но имя сайта в формате site.ru и www.site.ru — это два разных доменных имени, поэтому если вам нужно, чтобы HTTPS соединение было доступно с сайтом в обоих случаях, то WildCard сертификат — это то, что вам нужно (данная особенность может быть оформлена в виде отдельной опции).

При покупке данного типа SSL сертификата стоит учитывать, что они стоят дороже обычных и смысл их покупать есть только если у вас много поддоменов.

Мультидоменные SSL сертификаты (SAN — Subject Alternative Name, MDC — Multi-Domain Certificate, UCC — Unified Communications Certificate)

Также, как и предыдущий вид SSL сертификата, может использоваться одновременно для нескольких сайтов. Но, в отличие от WildCard, с помощью одного SAN сертификата возможно организовывать HTTPS подключение к ресурсам с различными доменными именами, расположенным на одном сервере.

При этом у ресурсов, использующих единый SAN SSL сертификат, может быть как один, так и разные IP адреса.

Кстати, данный тип SSL сертификата можно использовать в ситуациях, когда вам необходимо настроить HTTPS подключение как к различным ресурсам, так и к их поддоменам.zachem-nuzhen-https-dlya-sajta

Т.е. SAN сертификаты будут идеальным вариантом для вебстудий и фрилансеров, т.к. позволят вам немного сэкономить при массовом подключении HTTPS своим клиентам. только при условии большого числа заказов, естественно, т.к. мультидоменный SSL сертификат — удовольствие не из дешёвых.

Количество доменов, использующих один такой сертификат ограничено и зависит от цены SSL сертификата. «Зелёную строку» данный тип сертификата не позволяет сделать ни на одном из подключаемых доменов.

Однако, есть и ещё одна «ложка дёгтя»: поскольку Green Line данные сертификаты не предоставляют, то подделать их проще, чем стандартные одиночные EV SSL сертификаты. А если взломают один сайт, то автоматически злоумышленники получат доступ ко всем остальным и их поддоменам, использующий общий сертификат.

SSL сертификаты с поддержкой IDN

Этот тип SSL сертификатов необходим для кириллических доменов (содержащих кириллические символы), т.к. они имеют свою специфику. К сожалению, не все регистраторы SSL сертификатов предоставляют данную возможность.

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

Поэтому если у вашего сайта или какого-либо его поддомена, для которых вы хотите осуществлять HTTPS передачу данных, есть кириллические символы в доменном имени — обязательно уточняйте у тех. поддержки сервиса подойдёт ли выбранный вами сертификат. Если нет — вам помогут выбрать другой.

SSL-cертификаты для ПО (CodeSigning SSL)

Напоследок я решил оставить самый специфичный тип SSL сертификата, который пригодится достаточно ограниченному кругу лиц.

Данный класс SSL сертификатов используется для подписи ПО и скриптов с целью подтверждения автора программы. Также его наличие гарантирует, что код не подвергался изменениям после того, как была наложена цифровая подпись.

CodeSigning SSL сертификат еще называют сертификатом разработчика.

Как вы поняли из описания, основное предназначение такого продукта в защите авторских прав и целостности самих программных продуктов, распространяемых в сети. Поэтому данный вид SSL сертификата пригодится владельцем сайтов, продающих ПО или размещающих их в свободном доступе для скачивания.

Сколько стоит SSL сертификат?

С классами SSL сертификатов мы разобрались. При их перечислении я неоднократно упоминал, что стоимость у них различна от их особенностей.

skolko-stoit-ssl-sertifikatТеперь, когда мы все их изучили, пришло время разобраться со стоимостью SSL сертификатов, т.к. многих от положительного решения вопроса о том, нужен ли SSL сертификат сайту останавливает порой именно эта информация.

Точнее, не сама информация, а преувеличенные слухи от знакомых, которые устанавливали себе на ресурсы самые защищённые SSL сертификаты, а следовательно, и дорогие.

Но, как мы выяснили, такие покупки нужны далеко не всегда и на практике зачастую хватает генерации SSL сертификата из самого низкого ценового диапазона.

Итак:

  • Самоподписанный SSL сертификат — абсолютно бесплатный, но подходит только для тестовых целей;
  • DV – от 10-20$ в год, бесплатный SSL сертификат можно получить только для некоммерческого использования (например, персональных блогов без монетизации);
  • OV — от 50-60$ до нескольких сотен в год;
  • EV – от 150-300$ в год;
  • Wildcard — от 100 $ в год, т.е. смысл его есть приобретать, если у вас есть более 5 поддоменов;
  • SAN – от 60 $, в зависимости от количества доменов;
  • SGC — от 300$ в год, так что при наличии лишних денег лучше вместо этой опции купить мультидоменный SAN;
  • IDN — за данную опцию, как правило, дополнительно доплачивать не придётся;
  • CodeSigning SSL — от 90$ в год.

От себя могу сказать, что цены далеко не заоблачные. Не настолько, чтобы рисковать безопасностью ради получения бесплатного SSL сертификата для сайта, к которой стремятся многие отечественные бизнесмены вслед за бесплатной Windows, фильмами и крякнутыми играми.

Где купить SSL сертификат?

Приобрести SSL сертификат вы можете либо у официальных сертификационных центров, либо обратиться к хостинг-провайдерам, которые выступают посредниками.
Плюсы и минусы есть у каждой группы продавцов: у первых стоимость зачастую выше, чем чем у хостинг провайдеров, зато вторые при недобросовестном подходе могут подсунуть вам «левый», который скорее не поможет сайту, а навредит ему.
Среди официальных CA бессменными лидерами являются следующие:

  1. Comodo
  2. Twawte
  3. Geotrust
  4. GoDaddy
  5. GlobalSign
  6. Symantec

Статистика выпуска SSL сертификатов данными компаниями выглядит так:

zachem-nuzhen-ssl-sertifikat

Если говорить о хостинг-провайдерах, то могу порекомендовать те, услугами которых пользуюсь лично уже на протяжении более 2 лет — TheHost, у которого можно купить дешёвые SSL сертификаты можно, начиная от 7,5$ в год, и AvaHost, которые вообще выдают SSL сертификаты бесплатно своим клиентам. Если не верите — убедитесь сами :-)

Если захотите воспользоваться услугами второго хостера, то у меня для вас приятная новость — это эксклюзивный промокод на скидку в 20% на услуги AvaHost исключительно для читателей и друзей проекта cccp-blog.com. Используйте его при регистрации и экономьте ещё больше — AVA-CCCPBLOG

При покупке SSL сертификатов помимо перечисленных ранее особенностей следует учитывать ещё и следующие:

  • У SSL разная скорость выпуска. Одни станут доступными для вас уже через 10 минут, а другие придется ждать несколько недель.
  • Некоторые сертификаты даются лишь на 1 год, без возможности перевыпуска по старой цене.
  • Центры сертификации предоставляют гарантию пользователям, как дополнительный актив и подтверждение репутации. Например, если ваш сайт взломают через подделку SSL сертификата, вы сможете получить компенсацию от 10000$ до нескольких миллионов.
  • Некоторые регистраторы предоставляют тестовый период, в течении которого пользоваться SSL сертификатом можно бесплатно.
  • Часто у регистраторов встречаются всякого рода акции, в рамках которых SSL сертификат можно получить бесплатно при заказе доменного имени либо с громадными скидками в 50% и выше.
  • Возврат средств (манибэк, moneyback) в течении 30 дней после покупки, если качество товара вас по каким-то причинам не устраивает.

У каждого регистратора SSL сертификатов условия разные и поэтому их всегда нужно уточнять перед тем, как купить SSL сертификат.

Поэтому я и перечислил все возможные «подводные камни», на которые следует обращать внимание. Если вы столкнётесь с ещё какими-то, то дайте мне об этом знать в комментариях :-)

Нужен ли HTTPS сайту?

nuzno-li-perekhodit-na-httpsПереход на HTTPS – это важный шаг для любого вебмастера. Пользователи привыкли видеть надежный замок рядом с адресной строкой и очень пугаются, когда браузеры говорят о небезопасности перехода. Для владельца сайта переход на https – это новый уровень безопасности и новые возможности для продвижения в поисковой выдаче.

Но так ли всё однозначно? Нужен ли HTTPS сайту вообще?

Для того, чтобы определиться с тем, стоит ли переходить на HTTPS, давайте ещё раз проанализируем все особенности данного протокола, а также достоинства и недостатки установки SSL сертификатов.

Плюсы HTTPS протокола следующие:

  1. Пользователь однозначно идентифицируется посредством SSL сертификата. Вы точно знаете, с кем соединены в момент передачи данных на сайте. Просто нажмите на замочек в адресной строке, и вы получите информацию о компании, которой был выдан данный сертификат. Это предотвращает случаи мошенничества и позволяет быстро выявлять правонарушителей.
  2. Данные защищаются от изменения в процессе передачи. Еще одной причиной, зачем нужен HTTPS, стало резкое увеличение количества взломов сайтов путем перехвата сообщений. Хакеры могли просматривать передаваемые между сервером и клиентом пакеты данных и инкапсулировать в них вредоносную информацию. Простыми словами, они видели, что запрашивает сервер, глушили ответ от клиента и направляли свои пакеты данных. Применение HTTPS полностью исключило подмену данных, поскольку в зашифрованном канале передается и контрольная сумма. Любая попытка изменить данные приведет к изменению целостности, которая будет замечена сервером.
  3. Относительно низкая стоимость SSL сертификатов, необходимых для подключения HTTPS. Цены стартуют с 10$ за год использования. К тому же постоянно проводятся различные акции, благодаря которым можно получить SSL сертификат бесплатно либо с огромной скидкой.
  4. Простота подключения HTTPS благодаря автоматизированным инструментам в панелях управления большинства современных хостингов. Благодаря ним в большинстве случаев установку SSL сертификата на сайт можно выполнить самостоятельно и нет необходимости в платных услугах профессионалов. Кроме того, по большинству моментов, возникающих в процессе инсталяции, вас смогут проконсультировать сотрудники хостингов и CA.
  5. Польза HTTPS для SEO. При одинаковых условиях, сайты на устаревшем HTTP будут ранжироваться хуже в поисковиках, чем с HTTPS, поскольку они вызывают меньше доверия. Официально использование HTTPS было включено в перечень факторов ранжирования еще в 2015 году. Представители Google настойчиво рекомендуют сайтам перейти на HTTPS как можно скорее, поскольку роль этого протокола в ранжировании будет только расти.
  6. Более точная аналитика. Мало кто знает, что HTTPS даёт возможность получать более точное количество переходов на сайт через различные сервисы аналитики, чем при использовании HTTP. Это связано с потерей информации о переходе при переключении с HTTPS на HTTP. Например, если подключение к вашему сайту происходит по стандартному HTTP протоколу, а к вам на сайт зашёл пользователь с HTTPS сайта, то переход будет засчитан как прямой, а не с другого ресурса.

Однако, за все эти преимущества HTTPS нужно рано или поздно платить. Поэтому при установке SSL сертификата на сайт нужно быть в курсе минусов HTTPS, которые могут привести к достаточно серьёзным проблемам:

  1. HTTPS использует SSL сертификаты, которые в большинстве случаев платные. Бесплатные варианты для основных сайтов и коммерческого использования не годятся.
  2. Неправильная установка SSL сертификата может полностью сделать сайт недоступным для поисковых роботов и пользователей, что чревато падением посещаемости и ухудшением позиций в ПС.
  3. Из-за ошибок конфигурирования HTTPS на сайте может возникнуть большое количество дублей страниц, либо некоторые могут остаться на HTTP, что также может стать поводом к снижению позиций в поисковой выдаче и появлением сообщения о небезопасности соединения в браузерах. Если ссылки внутри сайта были прописаны вручную, то после перехода на HTTPS без настройки редиректа они перестанут работать.
  4. Несмотря на простоту подключения SSL сертификата на сайт, которое можно выполнить самостоятельно, необходимы будут специальные настройки сайта, с которыми вы вряд ли справитесь самостоятельно без особых знаний (речь идёт о 301 редиректах и добавлении правил маршрутизации для HTTPS адресов).
  5. Компания, выдавшая SSL сертификат, может отозвать его в любой момент без объяснения причин, что также может обернуться снижением посещаемости ресурса в целом.
  6. Незначительно, но замедляется скорость подключения к сайту, поскольку для обработки запросов требуется расшифровка и шифрование ответов.

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

kupit-ssl-sertifikat-deshevoПри переводе существующего сайта на HTTPS существует большая вероятность ошибки, вследствие чего вы можете потерять из выдачи как некоторые страницы, так и весь сайт. Именно по этой причине я и не спешу переводить данный сайт на HTTPS. Тем более, что в сети сейчас полно ресурсов с высокой посещаемостью, которые по-старинке используют HTTP.

К тому же, HTTPS — это не панацея в вопросах безопасности. В 2011 году иранские хакеры в рамках централизованной атаки в ответ на санкции США взломали CA компаний Comodo и DigiNotar и похитили сотни тысяч сертификатов, которые можно использовать для подмены пакетов.

Не менее обескураживающим известием в этом году стало то, что среди похищенных сертификатов были принадлежащие ЦРУ, Моссаду, Британской разведке MI-6. Таким образом, защищенные ресурсы стали попросту бесполезными для этих известных организаций и стали угрожать комплексной безопасности, ведь хакеры стали рассылать по фальшивым сертификатам трафик, получая ответы от банков, почтовых и грузовых компаний, и других стратегически важных объектов.

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

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

nuzhen-li-https-sajtuТак что описанную выше информацию принимайте просто как известный факт :-) Также целью размещения списка проблем, к которым может привести неправильная настройка и установка SSL сертификатов, было замотивировать вас обращаться за помощью к профессионалам. Причём не только в области программирования, но и SEO, которые позволят вам сделать необходимые настройки с минимальным ущербом.

Но есть и ещё один выход — это подписаться на обновления данного проекта с помощью ссылки в начале статьи, чтобы быть в курсе выхода статьи с полным перечнем инструкций и наглядных примеров по самостоятельной установке SSL сертификата на сайт, которую я планирую.

В случае же старта нового проекта я бы однозначно использовал HTTPS для передачи данных на самом старте, пока страницы не попали в индекс поисковиков и риск что-то поломать был бы минимален. Тем более, что цена SSL сертификатов сегодня достаточно смешная.

Особенно это касается сайтов банков, платёжных систем и распространённых Интернет магазинов, которые оперируют секретными данными пользователей.

Ну, а в целом, осуществлять ли вам перевод сайта на HTTPS или нет — дело сугубо ваше личное. Моей целью было лишь призвать вас ответственно подходить к данному шагу, а не делать всё с бухты-барахты :-)

На этом у меня всё. Надеюсь, что статья помогла вам ответить на вопросы о том, что такое HTTPS, SSL, TLS, а также зачем нужен SSL сертификат, какими они бывают, где и как их можно купить.

Пишите свои отзывы в комментариях под статьёй, буду рад любым вашим замечаниям и пожеланиям.

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

Всем удачи и до новых встреч :-)

Делаем слайдер на JavaScript своими руками

js-slajderВсем привет! :-)

Поскольку я работаю Fullstack PHP разработчиком, то иногда приходится решать задачи, связанные с фронтэндом, несмотря на то, что я его недолюбливаю :-)

О моём отношению к всему, что связано с «прекрасным» вы, собственно говоря, могли оценить по дизайну данного сайта, который разрабатывался мною единолично :-)

Однако, сравнительно недавно я столкнулся с необходимостью реализации слайдера на JavaScript, причём сделать это нужно было без каких-либо готовых библиотек и даже без всеми любимого jQuery.

Вызвана данная необходимость была тем, что в результате должен был получиться JS скрипт, который через сторонний сервис подключался бы на сайт. Следовательно, готовые карусели на JavaScript сразу отпадали, т.к. для их интеграции нужно было в HTML код сайта добавлять подключение библиотеки через тэг script и копировать сами файлы либы на сервер или тянуть их по cdn, но для этого снова потребовалось бы править код ресурса.

Поскольку мои возможности были ограничены, я остановился на разработке слайдера для сайта на HTML, CSS JS с нуля без каких-либо сторонних библиотек, чем и решил поделиться с вами в сегодняшней статье.

Как сделать JavaScript слайдер: начало

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

Заказчикам всегда наплевать на то, как код написан, какая у него архитектура, главное — видеть результат!

В итоге, как вы поняли, перед тем, как написать слайдер на JavaScript без jQuery, я решил подыскать готовый и доработать его под свои нужды. Почему без jQuery? Да потому что на целевом ресурсе, куда я планировал подключать свой слайдер через сервис, вызов jQuery в коде был расположен позже скрипта, подключаемого сервисом. Поэтому jQuery конструкции в моём коде просто не воспринимались.

В качестве основы я взял этот JavaScript слайдер изображений — https://codepen.io/gabrieleromanato/pen/pIfoD.

Остановиться я решил именно на нём, т.к. его JS код был написан с применением принципов ООП и классы в нём основываются на прототипах, а не на банальных функциях.

Честно говоря, я глубоко не понимаю и не признаю сегодняшнюю шумиху вокруг JavaScript с использование ООП, фреймворков и прочих архитектурных штук в языке, который изначально задумывался как простенький язык динамических сценариев. Равно как и сам JS я откровенно недолюбливаю с его синтаксическим винегретом, позволяющим одни и те же конструкции писать несколькими способами.

Но, к сожалению, в современном мире мои позиции мало кто разделяет, т.к. данный язык развивается сумасшедшими темпами и предпринимает даже попытки завоевать умы бэкенд разработчиков с помощью Node.js как альтернативы Java, PHP, C#, Ruby и других монстров.

В итоге, чтобы банально не остаться без работы, приходится по-тихоньку с JavaScript разбираться. А в выбранной мною реализации слайдера на чистом JavaScript я встретил то, что, как вы поняли, презираю в данном языке. Поэтому я её и выбрал, чтобы был хоть какой-то повод поработать и разобраться с JavaScript ООП и прототипными классами — иначе я бы к ним добровольно никогда в жизни не прикоснулся бы :-)

На базе найденного мною кода мне необходимо было разработать слайдер на чистом JS во всплывающем окне (такую штуку ещё называют popup, попап и т.д.), который имел бы кнопки переключения слайдов и кликабельные индикаторы текущего слайда. Также нужно было сделать кнопку для закрытия данного окна.

Вот, что у меня получилось в итоге.

Делаем библиотеку JS слайдера

Сперва я решил всё реализовать по уму и сделать JavaScript слайдер для сайта в виде библиотеки, подключаемой на сайт одним-единственным скриптом, в котором будут вызываться компоненты слайдера, разбитые по подкаталогам. Назвать её я решил popupSlider.js в честь её изначального предназначения.

Её код можно найти на GitHub по этому адресу — https://github.com/Pashaster12/popupSlider.js

Структура библиотеки вышла следующая:

kak-sdelat-javascript-slajder-svoimi-rukami

Папка slides предназначена для картинок слайдов. В controls размещены картинки элементов управления JS каруселью (кнопки закрытия слайдера и переключения слайдов). А в assets — статические элементы JS слайдера: HTML разметка и файл с CSS стилями.

Ну, а файл popupSlider.js — это и есть сердце самой библиотеки, в котором прописаны действия JavaScript карусели и устанавливается связь с остальными файлами. Именно его мы и будем подключать на сайте, а он уже будет вызывать остальные.

Я решил начать с HTML разметки нашей JS карусели картинок, которая в моём случае выглядит так:

<div id="cq-popup-bg"></div>
<div id="cq-popup">
    <a id="cq-popup-btclose" href="#"></a>
    <div id="slider">
        <div id="slider-wrapper">
            <div class="slide">
                <img src="slides/1.jpg" alt="" />
                <div class="caption">
                    <div class="caption-container">
                        Text 1
                    </div>
                </div>
            </div>
            <div class="slide">
                <img src="slides/2.jpg" alt="" />
                <div class="caption">
                    <div class="caption-container">
                        Text 2
                    </div>
                </div>
            </div>
            <div class="slide">
                <img src="slides/3.jpg" alt="" />
                <div class="caption">
                    <div class="caption-container">
                        Text 3
                    </div>
                </div>
            </div>
        </div>
        <div id="slider-nav">
            <a href="#" data-slide="0" class="current"></a>
            <a href="#" data-slide="1"></a>
            <a href="#" data-slide="2"></a>
        </div>
        <a href="#" class="horizontal-controls" id="prev"></a>
        <a href="#" class="horizontal-controls" id="next"></a>
    </div>
</div>

Для оформления слайдера на JavaScript в виде попапа я использовал следующие стили:

#slider {
    margin: auto;
    width: 600px !important;
    overflow: hidden;
}
#slider-wrapper {
    width: 9999px;
    height: 343px;
    position: relative;
    transition: left 400ms linear;
}
.slide {
    float: left;
    width: 600px;
    position: relative;
    overflow: hidden;
}
.caption {
    width: 600px;
    height: 110px;
    line-height: 1.5;
    font-size: 15px;
    font-weight: 300;
    text-align: center;
    color: #000;
    display:table;
}
.caption-container {
    display: table-cell;
    vertical-align: middle;
    padding: 0 20px;
}
#slider-nav {
    position: absolute;
    bottom: -36px;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
}
#slider-nav a {
    width: 8px;
    height: 8px;
    text-decoration: none;
    color: #000;
    display: inline-block;
    border-radius: 50%;
    margin: 0 5px;
    background-color: #fafafa;
}
#slider-nav a.current {
    background-color: #337ab7;
}
.horizontal-controls {
    position: absolute;
    display: inline-block;
    width: 12px;
    height: 20px;
    top: 50%;
    margin-top: -10px;
}
#prev {
    background: url(../controls/arrow_left_inactive.png);
    left: -40px;
}
#prev:hover {
    background: url(../controls/arrow_left_active.png);
}
#next {
    background: url(../controls/arrow_right_inactive.png);
    right: -40px;
}
#next:hover {
    background: url(../controls/arrow_right_active.png);
}
#cq-popup {
    width: 600px;
    z-index: 23;
    left: calc(50%);
    top: calc(50%);
    position: fixed !important;
    background-repeat: no-repeat;  
    background-position: right;
    background-color: #fff;
    font-family: "Roboto","Segoe UI","Helvetica","Georgia","Calibri","Verdana";
    transform: translate(-50%, -50%) scale(1);
}
#cq-popup .header {
    display: inline-block;
    font-size: 17px;
    font-weight: 500;
}
#cq-popup > div {
    width: 500px;
    font-size: 22px;
    line-height: 36px;
}
#cq-popup-btclose {
    text-decoration: none;
    position: absolute;
    right: -40px;
    top: 0;
    background: url(../controls/btn_delete_inactive.png);
    height: 16px;
    width: 16px;
}
#cq-popup-btclose:hover {
    background: url(../controls/btn_delete_active.png);
}
#cq-popup-bg {
    position: fixed;
    top:0; 
    width: 100%; 
    height: 100%;
    background: rgba(51,51,51,0.8);
    z-index: 22;
}

В результате применения данных стилей JS карусель выглядит следующим образом:

kak-napisat-js-slajder-svoimi-rukami-struktura

И HTML разметку, и CSS стили я вынес в отдельные файлы popupSlider.html и popupSlider.css, которые расположены в директории assets библиотеки слайдера на JavaScript. Я сделал это специально, чтобы пользователи при использовании данного кода могли без проблем корректировать разметку и оформление, не лазя в JS коде, где вынесенное нужно было бы прописать напрямую.

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

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

function Slider(element) {
    this.loadStatic();
    this.el = document.querySelector(element);
    this.init();
}

Slider.prototype = {
    init: function () {
        this.links = this.el.querySelectorAll("#slider-nav a");
        this.wrapper = this.el.querySelector("#slider-wrapper");
        this.nextBtn = this.el.querySelector("#next");
        this.prevBtn = this.el.querySelector("#prev");
        this.navigate();
    },
    navigate: function () {

        var self = this;

        for (var i = 0; i < this.links.length; ++i) {
            var link = this.links[i];
            link.addEventListener("click", function (e) {
                self.slide(this);
            });
        }

        self.prevBtn.style.display = 'none';

        self.nextBtn.addEventListener('click', function (e) {
            var currentSlideNumber = document.querySelector('#slider-nav a.current').getAttribute("data-slide");
            var nextSlide = document.querySelector('[data-slide="' + (parseInt(currentSlideNumber, 10) + 1) + '"]');

            nextSlide.click();
        }, false);

        self.prevBtn.addEventListener('click', function (e) {
            var currentSlideNumber = document.querySelector('#slider-nav a.current').getAttribute("data-slide");
            var prevSlide = document.querySelector('[data-slide="' + (parseInt(currentSlideNumber, 10) - 1) + '"]');

            prevSlide.click();
        }, false);

        self.close();
    },

    slide: function (element) {
        this.setCurrentLink(element);

        var index = parseInt(element.getAttribute("data-slide"), 10) + 1;
        var currentSlide = this.el.querySelector(".slide:nth-child(" + index + ")");

        this.wrapper.style.left = "-" + currentSlide.offsetLeft + "px";

        if (index < this.links.length)
            this.nextBtn.style.display = 'block';
        else if (index == this.links.length)
            this.nextBtn.style.display = 'none';

        if (index > 1)
            this.prevBtn.style.display = 'block';
        else if (index == 1)
            this.prevBtn.style.display = 'none';
    },

    setCurrentLink: function (link) {
        var parent = link.parentNode;
        var a = parent.querySelectorAll("a");

        link.className = "current";
        this.currentElement = link;

        for (var j = 0; j < a.length; ++j) {
            var cur = a[j];
            if (cur !== link) {
                cur.className = "";
            }
        }
    },

    loadStatic: function () {

        var self = this;

        var link = document.createElement('link');
        link.rel = 'stylesheet';
        link.href = 'assets/popupSlider.css';
        document.head.appendChild(link);

        var sliderHTML = '';

        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'assets/popupSlider.html', false);
        xhr.send();
        if (xhr.status != 200) {
            alert('Can not load the popupSlider.html. Got the error ' + xhr.status + ': ' + xhr.statusText);
        } else {
            sliderHTML = xhr.responseText;
        }

        var div = document.createElement('div');
        div.innerHTML = sliderHTML;
        document.body.appendChild(div);
    },

    close: function () {
        document.getElementById('cq-popup-btclose').onclick = function () {
            document.getElementById('cq-popup-bg').remove();
            document.getElementById('cq-popup').remove();
        }
    }
};

Немного комментариев по поводу приведённого кода. Содержимое файла popupSlider.js является одним JavaScript классом Slider, который, как и в PHP, содержит конструктор и методы класса. Только в JS определение конструктора, в отличие от PHP, является обязательным.

Конструктор определяется с помощью следующей конструкции:

function Slider(element) {
    //код конструктора
}

Внутри конструктора должны быть прописаны действия, которые будут выполняться при создании объекта класса.

Сами методы класса будут находиться внутри прототипа и будут доступны для всех экземпляров данного JavaScript класса. JS прототип в моём случае описывается следующей конструкцией:

Slider.prototype = {
    //методы
}

Вызываться за пределами тела класса они будут следующим образом:

var slider = new Slider();
slider.class_method();

А внутри самого кода класса доступен следующий способ:

this.class_method();

Главное только не забывать, что в JavaScript значение this зависит от контекста вызова, поэтому в телах некоторых методов, в которых нужно было вызывать методы и свойства класса, присутствует такая конструкция:

var self = this;
self.class_method(); //чтобы обратиться к методу, находящемся на уровень выше кода описываемого метода

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

loadStatic()

Самый первый метод, вызывающийся при создании экземпляра класса в конструкторе. Отвечает за добавление в HTML кода страницы сайта HTML разметки слайдера и файла со стилями.

Сначала в памяти создаётся новый тэг link с помощью JavaScript функции document.createElement() и ему присваиваются значения всех необходимых атрибутов, в том числе и путь к CSS файлу со стилями JS слайдера. И, в конце-концов, он добавляется в HTML страницы с помощью JavaScript метода appendChild() в конец секции head, где и должны подключаться CSS файлы стилей.

Далее мы делаем то же самое для файла с HTML разметкой нашего слайдера на чистом JavaScript. Вот только здесь есть маленький нюанс: просто так HTML файл внутри такого же подключить нельзя, как мы сделали это с CSS файлом. Для этого есть специальные библиотеки, например, для того, чтобы подключить HTML в HTML, отлично подходит либа от w3.org — https://www.w3schools.com/howto/howto_html_include.asp

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

В итоге, я решил получать содержимое HTML файла внутри JavaScript кода и загружать его в новый div элемент, создаваемый в памяти, как я делал это ранее для подключения CSS файла в JavaScript. Сгенерированный элемент подключается в самый конец секции body HTML кода страницы сайта.

Если хотите вставить div с разметкой слайдера не просто в конец body, а в какой-то конкретный контейнер, то можете вместо следующего кода:

var div = document.createElement('div');
div.innerHTML = sliderHTML;
document.body.appendChild(div);

Прописать следующее, указав нужный идентификатор целевого контейнера (в моём случае HTML JS слайдера будет расположен в элементе с id popupSlider):

var target = document.querySelector( "#popupSlider" );
target.innerHTML = sliderHTML;

init()

Метод, который вызывается в конструкторе после loadStatic(), и нужен для инициализации свойств класса, соответствующих основным HTML элементам, к которым мы будем обращаться в следующем коде.

В конце вызывается метод navigate().

navigate()
В данном методе происходит указание действий, происходящих при клике на кнопки переключения слайдов и элементы навигации, расположенные под самим слайдером, в виде кружочков.

Сам JavaScript код смены слайдов для удобства я вынес в отдельный метод slide(), а в данном я только навешиваю его на событие click для каждой круглой кнопки в цикле.

При клике на кнопки «предыдущий слайд»/»следующий слайд» я, как видите, решил всего лишь эмулировать нажатие на соответствующий кружочек, определяя нужный относительно текущего, у которого имеется CSS класс current.

slide(element)

Метод, «отвечающий за магию» самой JavaScript карусели, в котором содержится код, меняющий слайды местами. В самом начале вызывается метод setCurrentLink(), о котором мы поговорим чуточку позже.

В качестве входного параметра в него передаётся объект кнопки навигации JS слайдера в виде кружочка.

Само переключение слайдов работает следующим образом:

  1. Все слайды у нас оформлены в виде блоков одинаковых размеров, идущих друг за другом. Окно слайдера — это лишь видимая часть элемента, содержащего все слайды.
  2. Мы определяем смещение левого края текущего слайда от левого края родительского элемента с помощью свойства offsetLeft.
  3. И сдвигаем родительский элемент на это значение, чтобы в окне слайдера у нас отображался необходимый элемент.

В конце метода описано поведение для кнопок «предыдущий слайд»/»следующий слайд», оформленных в виде стрелок влево/вправо соответственно. Если текущий слайд — первый из всего списка, то кнопка перехода к предыдущему слайду скрывается. Если последний, то убираем кнопку перехода к следующему слайду.

setCurrentLink(link)

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

В качестве входного параметра в функцию передаётся объект кнопки, которая должна быть выделена как текущая.

Логика выделения текущего элемента проста:

  1. Получаем объект родительского элемента, которым в нашем случае выступает контейнер с идентификатором slider-nav.
  2. Получаем все навигационные элементы в виде массива ссылок.
  3. Выделяем элемент, полученный на входе, путём добавления ему классу current.
  4. В цикле перебираем все навигационные элементы и у всех, кроме текущего, очищаем значение класса. Это нужно для того, чтобы снять выделение с элемента, которым был текущим до данного вызова функции.

close()

Самый последний метод класса, в котором определяется действие при нажатии на кнопку закрытия слайдера в виде крестика. Здесь, собственно говоря, код самый понятный из всего, содержащегося в классе JS слайдера.

При нажатии на кнопку закрытия, доступ к которой получается по её идентификатору, происходит удаление со страницы элемента слайдера и элемента, задающего полупрозрачный фон. Они также, в свою очередь, получаются по уникальным идентификаторам.

Сам метод вызывается внутри описанного ранее navigate(), который содержит в себе все сценарии действий, происходящих на нашем JavaScript слайдере.

Кстати, если вы захотите сделать закрытие слайдера при клике за его пределами, то достаточно в данный метод добавить следующий код:

document.getElementById('cq-popup-bg').onclick = function () {
document.getElementById('cq-popup-bg').remove();
document.getElementById('cq-popup').remove();

JavaScript слайд шоу на базе разработанной библиотеки

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

На самом деле, реализация JavaScript слайд шоу отличается от обычного слайдера совсем незначительно. Разница заключается лишь в том, что в слайд шоу слайды переключаются автоматически с заданным временным интервалом, а в случае обычной JS карусели они меняются вручную с помощь элементов навигации.

Для автоматической прокрутки слайдов я добавил в самый конец своего класса следующий метод:

slideShow: function (timeout) {
    var sliderCount = this.links.length;
    var self = this;

    this.slideCycle = setInterval(function () {
        var currentSlideNumber = document.querySelector('#slider-nav a.current').getAttribute("data-slide");
        var slideId = parseInt(currentSlideNumber, 10) + 1;
        self.slide(document.querySelector('[data-slide="' + (sliderCount == slideId ? 0 : slideId) + '"]'));
    }, timeout);
}

Что здесь происходит — думаю, понятно. Для создания данного метода я скопировал код из события клика на кнопки ручного переключения слайдов и разместил его внутри вызова JavaScript функции setInterval(), которая выполняет указанное действие через заданный промежуток времени.

Сценарий действия передаётся первым аргументом в виде анонимной функции, а временной интервал — вторым, который я решил сделать в виде переменной, значение которой передаётся при вызове slideShow().

Единственная модификация кода внутри setInterval(), которая потребовалась, — это определение количества слайдов и сравнение с ним индекса текущего слайда для зацикленности автоматического переключения.

Ну, и для того, чтобы данный код заработал, сам метод необходимо вызвать. Я решил сделать это всё в том же navigate(), который как раз и является сборником всяких сценариев. Вызов я разместил в самом конце, передав в качестве аргумента значение временного интервала для автоматической смены слайдов в нашем JS слайд шоу (я выбрал 2000 милисекунд или 2 секунды, вы можете по необходимости изменять это число):

self.slideShow(2000);

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

По идее, всё должно работать. Если нет — изучайте ошибки в консоли браузера и делитесь ими в комментариях.

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

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

Для прерывания автоматического показа слайдов JavaScript карусели я решил воспользоваться стандартной JS функцией clearInterval(), которой в качестве аргумента передаю идентификатор временного интервала, возвращаемого функцией setInterval() при его установке.

В итоге, получился следующий код, который я решил не оформлять отдельным методом:

clearInterval(self.slideCycle);

И разместил его в местах описания действий при кликах на различные элементы навигации, т.е. в следующих:

link.addEventListener("click", function (e) {...});

self.prevBtn.addEventListener('click', function (e) {...});

self.nextBtn.addEventListener('click', function (e) {...});

Вызов clearInterval() лучше делать поближе к самому событию клика, главное, чтобы перед ним, а не после.

Интеграция JavaScript слайдера на сайт

Итак, наш слайдер на чистом JS готов. Осталось теперь только подключить его на сайт.

Для этого необходимо выполнить последовательно следующие шаги, которые являются стандартными действиями при интеграции каких-либо сторонних JavaScript библиотек вообще.

Шаг 1. Копируем файлы библиотеки к себе на сайт в отдельный каталог.
Шаг 2. Добавляем следующий код в HTML страниц, на которых необходимо будет отображение слайдера, разместив его перед закрывающимся тэгом body:

<script type="text/javascript" src="/каталог_слайдера/popupSlider.js"></script>

Шаг 3. Размещаем следующий код вызова JS карусели в каком-либо существующем JavaScript файле, который подключается на странице после подключения самого слайдера:

var aSlider = new Slider("#slider");

Как видите, данный код, — это, по сути, создание объекта класса Slider, который содержится в popupSlider.js. Именно поэтому его вызов должен быть только после подключения самого файла класса на страницу.

Добавление новых слайдов в JavaScript карусель

Здесь всё очень просто. Поскольку слайды у нас берутся из отдельной директории библиотеки slides, то при добавлении новых картинок нужно будет просто закинуть в неё нужные файлы, задав им предварительно такой же размер, как и у других.

А затем в коде файла assets/popupSlider.html добавить новый блок в контейнер с id slider-wrapper:

<div class="slide">
    <img src="slides/new_slide.jpg" alt="" />
    <div class="caption">
        <div class="caption-container">
           Text
        </div>
    </div>
</div>

В принципе, можете просто скопировать аналогичный существующий и изменить в нём путь к файлу изображения и текст подписи (если она вообще будет нужна).

Также необходимо будет добавить новый элемент навигации в виде кружочка, т.к. на данный момент автоматическое его добавление пока не реализовано. Для этого нужно будет добавить следующий код в контейнер с id slider-nav, прописав его в самом конце:

<a href="#" data-slide="id"></a>

Значение атрибута data-slide должно быть больше самого большого у остальных элементов. Достаточно всего лишь увеличить максимальное текущее на единицу.

Упаковка JS карусели в единый скрипт

Всё, слайдер на JavaScript готов и подключен. Я лично рекомендую использовать данный вариант на практике, если он вам вообще пригодится :-)

Для ускорения работы его, кстати, можете ещё дополнительно сжать статические компоненты: CSS, HTML и JavaScript файлы. Я не стал этого делать и предлагать вам минифицированный код, потому что систем сборок фронтэнда сейчас очень много: Gulp, Grunt, Webpack и другие. И у каждой из них свои алгоритмы сжатия и подключения файлов.

К тому же, минифицированные результаты на разных ОС могут работать по-разному. В общем, причин много.

Да и сами исходники у меня вышли, я считаю, не такие уж тяжеловесные, что нуждаются в данной процедуре. Но если же вам они будут необходимы, то настройте минификацию самостоятельно с учётом вашей ОС и сборщика.

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

Так вот, в завершение своего сегодняшнего повествования я решил поделиться с вами финальной версией своей JavaScript карусели, которую я использовал на практике. Возможно, кому-то данный способ будет полезен. Он также пригодится тем, кто будет подключать предоставленную мною библиотеку через системы сборки Webpack, Gulp, Grunt и при этом столкнётся с проблемой правильности файловых путей.

Тогда вариант единого скрипта JavaScript карусели вам придётся как нельзя кстати, т.к. весь контент будет содержаться прямо в нём, в том числе и HTML/CSS код, который в случае библиотеки хранится в отдельных файлах.

Скрипт в моём случае состоит из двух частей. В первой части располагалось содержимое файла popupSlider.js, которое я второй раз не буду приводить. Вставьте его самостоятельно, убрав из кода класса описание метода loadStatic() и его вызов, т.к. они нам не понадобятся.

Вторая же часть единого скрипта JavaScript слайдера для сайта представляет собой обработчик события DOMContentLoaded, которое наступает при загрузке содержимого страницы.

Там у нас будет происходить добавление на страницу HTML/CSS кода JS карусели и создание объекта класса Slider, что равносильно активации самого слайдера.

Схематично код выглядит следующим образом:

/* содержимое popupSlider.js без описания метода loadStatic() и его вызова */

document.addEventListener('DOMContentLoaded', function(){
    var str = '\
         <style>\
             /*css код*/
         </style>\
         /* html код */
         ';

    var div = document.createElement('div');
    div.innerHTML = str;
    document.body.appendChild(div);

    var aSlider = new Slider("#slider");

Поскольку в моём случае вариант загрузки файлов на сервер был вообще закрыт, мне пришлось загрузить файлы картинок элементов управления JavaScript каруселью на облако и вместо путей к ним в HTML и CSS коде прописать ссылки, сгенерированные при сохранении.

Если у вас таких сложностей нет, то можете ничего не менять, но не забыть скопировать каталоги slides и controls библиотеки на сервер и указать правильные пути к ним.

Самописный JS слайдер — перспективы развития

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

Мне же начинать весь этот путь с нуля в одиночку и создавать ещё один велосипед как-то не интересно, да и времени на это толком нет. Но, зато данный JavaScript слайдер является отличной возможностью попрактиковаться в разработке путём рефакторинга его кода и реализации новых интересных функций, которых, возможно, на данный момент ещё нет.

Так что если вам, как и мне, нужна будет кодовая база для экспериментов и вы располагаете хоть каким-то лишним свободным временем — копируйте себе код описанного мною JavaScript слайдера или присоединяйтесь к контрибьюторам на GitHub. Репозиторий открытый, а ссылку на него я предоставил в начале статьи.

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

  1. сделать внешний конфиг, чтобы можно было удобно настраивать слайдер;
  2. сделать возможность встраивания слайдера внутрь страницы (сейчас оформлен только в виде попапа);
  3. асинхронная загрузка HTML кода (сейчас сделана синхронная, которая многими браузерами помечается как устаревший вариант);
  4. оформить библиотеку в виде пакета, NPM, Bower или другого пакета, чтобы его можно было устанавливать и оперировать зависимостями с помощью пакетных менеджеров;
  5. сделать вёрстку адаптивной для использования JS карусели на различных устройствах;
  6. сделать переключение слайдов по событию Swipe для мобильных пользователей.

Приведённый мною список правок, естественно, не конечный и может быть дополнен. Пишите о своих предложениях, мыслях и пожеланиях в комментариях под статьёй и делитесь со своими друзьями через социальные сети, чтобы их также привлечь к разработке.

Прошу мой код строго не судить, т.к., я как я уже говорил, Frontend спецом я себя не считаю и не являюсь. Также я открыт для всех ваших замечаний по стилю кодирования и надеюсь, что смогу что-то у вас перенять, а вы — у меня, т.е. выполнить основное предназначение разработки и поддержки OpenSource продукции.

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

У меня всё! Всем добра! :-)

Блокировка ВК в Украине: 3 совета вебмастерам

blokirovka-vk-v-ukraineВсем привет!

С 2014 года, когда начался конфликт между Россией и Украиной, я всячески стараюсь избегать тем политики. Но, тем не менее, как бы мы от политики не ограждались, но сделать это на 100% всё равно никогда не получится, т.к. вся наша жизнь подчинена её законам.

Особенно правоту данного высказывания испытали на себе все украинские пользователи Интернет 16 мая 2017 года, когда президент Украины Пётр Порошенко подписал указ о блокировке сайтов Вконтакте, Одноклассники, Яндекс, Mail.ru и прочих российских ресурсов на территории Украины.

Казалось бы: ничего страшного не произошло, подумаешь — нельзя будет несколькими сайтами пользоваться. Тем более, что у всех них есть разрешённые альтернативы да и VPN клиенты никто не отменял, с помощью которых можно обходить блокировки по IP адресам.

Но сегодня речь пойдёт не о том, как обойти блокировку ВК, Одноклассников, Яндекса и прочих ресурсов пользователям Украины, чтобы продолжать пользоваться их контентом.

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

Думаю, Интернет пользователи из Украины заметили, что после введения блокировок российских ресурсов они не только не могут войти на сами запрещённые сайты, но и большинство других ресурсов стали грузиться наполовину, а то и не загружаться в браузере совсем.

Всему виной всевозможные виджеты Вконтакте: сообществ, комментариев, лайков и т.д., а также используемые вебмастерами скрипты сбора статистики Яндекс.Метрика и Mail.ru. И ладно бы они просто не загружались, а то и контент сайта делают недоступным.

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

Последняя особенность позволяет их косвенно отнести к средствам SEO оптимизации сайтов, т.к. на скорость загрузки ресурса поисковики обращают пристальное внимание при его ранжировании.

Но перед тем, как мы начнём, я хотел бы уделить внимание техническим моментам возникающего явления.

Технические причины проблем сайтов из-за блокировки ВК в Украине

Установка виджетов социальных сетей на сайте — это отличное средство, позволяющее достигнуть вебмастерам сразу нескольких целей:

  1. Удобство использования ресурса пользователями — достигается с помощью виджетов комментариев и авторизации, благодаря которым ваши посетители, имеющие аккаунты в социальных сетях, могут оставлять отзывы без необходимости заполнения контактной информации и внутренней регистрации на вашем сайте.
  2. Социальная активность — с помощью виджетов сообществ можно делиться с вашими подписчиками самой разнообразной информацией, не публикуемой на сайте, в том числе организовывать в сообществах опросы и обсуждения, делясь их результатами через виджеты.
  3. Увеличение аудитории сайта — благодаря виджетам, позволяющим поделиться страницами Вашего сайта в социальных сетях с другими пользователями.

И, чем больше социальная сеть, тем в большей степени перечисленные функции виджетов выполняются. К примеру, Вконтакте, как самая популярная отечественная социальная сеть в день её запрета на территории Украины имела посещаемость 18 миллионов украинских пользователей в день.

К слову, всё население Украины на данный момент составляет 42 миллиона.

Но, все перечисленные преимущества утратили свою значимость в мае 2017, когда вступил в силу запрет ВК в Украине и ряда других ресурсов. И самое страшное, что помимо утраты функций социальных виджетов сайты стали терять ещё и посетителей, т.к. мало кто будет ждать полной загрузки сайта.pochemu-ne-zagruzhaetsya-sajt-iz-za-vidjetov-soobschestv

Самое обидное, что из-за санкций пострадали не только украинские пользователи Интернет, но и вебмастера, сайты которых эти люди посещали.

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

Всему виной адрес API ВК, которое содержит в своём URL доменное имя самого заблокированного ресурса — vk.com/js/api/openapi.js?150. Поэтому виджеты и не могут загрузиться.

А, поскольку, виджеты Вконтакте загружаются по меру загрузки страницы сайта, то всё время, которое браузер ожидает ответа от заблокированного vk.com, содержимое сайта остаётся недоступным.

Так что виноват во всех перечисленных проблемах не кто иной как команда разработчиков Вконтакте, которая при разработке API не учла сложившуюся ситуацию.

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

Но не время горевать по общей доступности заблокированных ресурсов, а нужно учитывать реалии и учиться существовать в современных условиях. Поэтому я приведу вам несколько способов, как можно сохранить работоспособность ресурсов и даже увеличить её, несмотря на блокировку ВК в Украине.

Оптимизация сайтов вследствие запрета ВК в Украине

Сразу скажу, что при перечислении мер оптимизации среди них вы не встретите самую радикальную — отказ от подобных сервисов вообще. Выход есть всегда :-)

Тем более, являясь вебмастером, я сам прекрасно понимаю, что вследствие отказа вы можете потерять своих пользователей, деньги и контроль над ресурсом (при отказе от Яндекс.Метрики, например).

Так что будем обходиться малой кровью. Тем более, что это возможно.

Асинхронная загрузка кода

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

Здесь, как ни удивительно, виноватыми снова выступают разработчики Вконтакте, которые реализовали исключительно синхронную загрузку JavaScript кода.

Синхронная загрузка, для тех, кто не в курсе — это выполнение JavaScript сценария по мере загрузки всего сайта. Если синхронный скрипт расположен в шапке сайта между тэгами head, то остальной код не обработается браузером до тех пор, пока он не выполнится.

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

Это на некоторое время позволяет пользователям задержаться на сайте и не уйти с него, посчитав, что они попали на «битую» страницу. Но всё же весь контент они всё равно не увидят, что не есть хорошо.

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

Для сообщения браузеру о том, что определённый элемент нужно загружать асинхронно, в конце его открывающего HTML тэга нужно поставить атрибут async или defer, если хотите, чтобы элемент загрузился после завершения загрузки остальных.

Данный метод хорошо работает в случаях подключения на страницу готовых элементов (например, у Facebook при размещении виджета в виде iframe), однако, в случае с виджетами Вконтакте этот номер не проходит, т.к. на момент загрузки виджета браузером он ещё не загрузился по API ВК, которое недоступно.

alternativy-vidjeta-gruppy-vkontakte-na-sajtПоэтому нужно программно определить момент, когда придёт ответ от API VK, и только тогда уже загружать его в элемент виджета. Для этих целей существует масса готовых скриптов, поэтому я не посчитал нужным писать его заново.

Для асинхронной загрузки виджетов Вконтакте на данном сайте лично я пользовался следующим кодом — http://xpro.su/php/async_widgets-1. Скрипт рабочий, поэтому рекомендую :-)

Автор, как я понял, за основу взял код асинхронной загрузки VK OpenAPI, с которым вы можете познакомиться по данной ссылке — https://vk.com/dev/openapi

Ну, и ещё автор дописал код для работы в Internet Explorer старых версий, которым я решил пренебречь ввиду древности данной технологии.

В итоге, мой слегка дополненный вариант асинхронного виджета Вконтакте выглядел так:

<div id="vk_groups"></div>
<script type="text/javascript">
    var VK_loader = function () {
        var oHead = document.getElementsByTagName("head")[0];
        var oScript = document.createElement("script");
        oScript.type = "text/javascript";
        oScript.async = true;
        oScript.src = "http://vk.com/js/api/openapi.js?150";
        oHead.appendChild(oScript);
        oScript.onload = function () {
            VK.Widgets.Group(
                    "vk_groups",
                    {
                        mode: 0,
                        width: "286",
                        height: "320",
                        color1: 'FFFFFF',
                        color2: '444444',
                        color3: '00a1e0'
                    },
                    номер_группы
                    );
        }
    };
    if (document.addEventListener) {
        document.addEventListener("DOMContentLoaded", function () {
            document.removeEventListener("DOMContentLoaded", arguments.callee, false);
            VK_loader();
        }, false);
    }
</script>

При реализации кода из приведённой статьи на своём сайте я ещё заметил, что он прекрасно работает без указанного в оригинале кода:

oScript.onload = function() {
         VK.init({apiId: ID_сайта_ВКонтакте, onlyWidgets: true});//лишний код
         VK.Widgets.Group("vk_groups", {mode: 0, width: 200, height: 250}, номер_группы);
       }

Поначалу я никак не мог понять, что это за ID_сайта_Вконтакте, т.к. автор не указал, где его брать. В итоге я отыскал, где взять данный ключ. Им оказался ID приложения Вконтакте, которое создаётся для доступа к сайтам через OpenAPI.

Создать приложение ВК для получения необходимого ключа можно здесь — https://vk.com/editapp?act=create
А получить ключ существующего приложения Вконтакте можно вот здесь — https://vk.com/apps?act=manage

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

Кстати, итоговый код загрузки виджета группы Вконтакте для сайта можете использовать для асинхронной загрузки любых виджетов и компонентов, использующих JavaScript код. Для этого прочитайте комментарии под статьёй, из которой я его изначально позаимствовал, где автор рассказывает, как добавить в данный блок Яндекс.Метрику и другие скрипты.

Вот и всё, теперь наши виджеты грузятся параллельно с остальным контентом, не замедляя её и ускоряя скорость загрузки страницы сайта в целом.

Но у асинхронной загрузки есть и минус — несмотря на то, что сайт загрузится без проблем, вместо виджета ВК в конечном итоге будет пустое место, т.к. его API в принципе недоступно.

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

Поиск альтернатив заблокированным ресурсам

Полный отказ от соцсетей и прочих сервисов по той причине, что некоторые из них заблокированы, как я уже и говорил, — шаг слишком радикальный. А вот заменить их альтернативными — почему бы и нет?

В современном цифровом мире существует такая же жёсткая конкуренция между различными проектами, как и везде. Поэтому слабому звену всегда можно найти замену.

Вместо того же ВК можно пользоваться разрешённым в Украине и не менее крупным Facebook, у которого есть аналогичные виджеты сообществ и комментариев. Или даже Одноклассниками, которые, несмотря на аналогичный с ВК запрет, смогли организовать своё АПИ так, что виджеты грузятся без проблем благодаря URL API, отличному от основного сайта — https://connect.ok.ru/connect.js

Ещё и сам код виджета у одноклассников загружается асинхронно, за что честь и хвала их администрации и разработчикам. Не знаю, когда именно были добавлены эти новшества — то ли как средство обхода блокировки вконтакте в Украине, то ли существовали с самого начала, но на выходе мы имеет одно — Одноклассники здесь обошли ВК, и это факт :-)

Жаль только, что аудитория Одноклассников несколько иная, чем у ВК, да и не такая многочисленная — накануне запрета посещаемость украинских пользователей была 5 миллионов в день.

Или ещё можно воспользоваться новым детищем Павла Дурова Telegram, который, кстати, неплохо набрал обороты после майских событий.

Ну, а Яндекс.Метрику и счётчики Mail.ru можно заменить на Google Analytics, LiveInternet и Рамблер ТОП100.

Хотя, правды ради, нужно сказать, что данные компании переработали свои инструменты с вводом запрета ВК в Украине и если поначалу продукты Mail.ru тормозили загрузку сайта, то, буквально вчера я рискнул снова установить себе счётчик и проверить состояние сайта при этом — никаких проблем с загрузкой не произошло.

С Яндекс.Метрикой у меня же изначально никаких проблем не наблюдалось, несмотря на жалобы других вебмастеров. Ну, и сейчас они также не возникли. Правда, показатели посещаемости по Яндекс.Метрике примерно на 30 посетителей в день меньше, чем у LiveInternet. Не знаю, с чем это связано — то ли из-за санкций трафик стал учитываться по-другому, то ли так было всегда, просто я этого не замечал :-)

Но, в любом случае, какими бы ни были привлекательными альтернативы, но они всё же неспособны затмить оригинал. Ярким доказательством данной идеи стало прекращение работы инновационной украинской социальной сети Ukrainians, ставящей своей задачей стать заменителем ОК и ВК для жителей Украины.

В итоге, она просуществовала около 3 месяцев, и её организаторы заявили, что вынуждены признать тот факт, что «Facebook, Instagram, VK и Однокласники (доступ через специальные каналы) не оставляют на рынке ниши для ещё одной социальной сети».

Да, что бы кто не говорил, но люди не способны так быстро отказаться от своих привычек…

У большинства вебмастеров до ввода блокировки Вконтакте в Украине паблик ВК был основным инструментом социальной активности и имел множество подписчиков.

И теперь вдруг он стал недоступен для половины подписчиков. Что же теперь — отказываться от него насовсем и начинать развивать сообщества в Facebook или Telegram? Некоторые так и сделали, но их не большинство.

Лично я не был готов распрощаться со своим пабликом ВК и его аудиторией, формировавшейся не один год, поэтому нашёл ещё одно средство решения проблемы, вызванной запретом Контакта, Одноклассников и прочих российских ресурсов в Украине.

Загрузка необходимого виджета

Конечным средством оптимизации данного сайта в связи с суровыми политическими реалиями стало внедрение стратегии «И нашим, и вашим» :-)

Согласно ей я решил показывать украинским пользователям виджет сообщества в Facebook, а всем остальным, у кого ВК не заблокирован — виджет Вконтакте. Как определить, откуда к вам зашёл пользователь? Просто — по его сетевому IP адресу.

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

Необходимый код на языке PHP я уже публиковал в предыдущей статье, где рассказывал как получить город по IP. Осталось только слегка его дополнить для добавления виджетов социальных сетей на сайт.

Поскольку сайт у меня разработан на WordPress, то код из статьи по ссылке я оформил отдельной функцией, которую вынес в functions.php моей темы:

function checkCountryByIp()
{
    $client  = @$_SERVER['HTTP_CLIENT_IP'];
    $forward = @$_SERVER['HTTP_X_FORWARDED_FOR'];
    $remote  = @$_SERVER['REMOTE_ADDR'];
    $result  = array('country'=>'', 'city'=>'');

    if(filter_var($client, FILTER_VALIDATE_IP)) $ip = $client;
    elseif(filter_var($forward, FILTER_VALIDATE_IP)) $ip = $forward;
    else $ip = $remote;

    $ip_data = @json_decode(file_get_contents("http://www.geoplugin.net/json.gp?ip=".$ip));
    if($ip_data && $ip_data->geoplugin_countryName != null)
    {
        $result = $ip_data->geoplugin_countryCode;
    }

    return $result;
}

Как вы видите, я получаю код страны по IP адресу пользователя. Теперь мне нужно, используя его, загружать на страницу нужный виджет.

Для этого я в сайдбаре, где у меня располагается виджет сообществ для внешних сайтов, прописал следующую конструкцию:

<div class="vk-widget" <?php if(checkCountryByIp() == 'UA'){ ?> style="height: 178px;" <?php } ?>>
    <?php if(checkCountryByIp() != 'UA'){ ?>
        <script type="text/javascript" src="//vk.com/js/api/openapi.js?146"></script>
        <!-- VK Widget -->
        <div id="vk_groups"></div>
        <script type="text/javascript">
            VK.Widgets.Group("vk_groups", {
                    mode: 0,
                    width: "286",
                    height: "320",
                    color1: 'FFFFFF',
                    color2: '444444',
                    color3: '00a1e0'
                }, 105617374);
        </script>
    <? }else{ ?>
        <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fcccpblog
                &tabs&width=286&height=170&small_header=true&adapt_container_width=true&hide_cover=false
                &show_facepile=true&appId" width="286" height="170"
                style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" async>
        </iframe>
    <?php } ?>
</div>

Как видите, я проверяю код страны, возвращённый функцией checkCountryByIp(). Если он не равен ‘UA’, то добавляю виджет группы ВК. В противном случае отображается виджет Facebook.

Обратите внимание, что я указал атрибут async, чтобы он загружался асинхронно, т.к. в данном случае элемент у нас есть уже на момент загрузки страницы — и это сработает. Но разницы я, если честно, не заметил по сравнению с вариантом, когда async не был прописан. Возможно, асинхронная загрузка кода у Facebook базовая.

Не забудьте только вместо моих виджетов сообществ для внешних сайтов установить свои. Если вы вдруг не знаете, где взять код, чтобы добавить виджет группы на сайт, то перейдите по этой ссылке и создайте его, указав id своей группы — https://vk.com/dev/Community

Виджет группы Facebook (который теперь стал называться виджетом страницы) можно взять здесь — https://developers.facebook.com/docs/plugins/page-plugin/

Я уже думал, что с установкой приведённого кода мои искания поисков обхода блокировки ВК в Украине подошли к концу, но, поскольку у меня на сайте установлен плагин серверного кэширования, из-за которого вместо виджета Facebook иногда всё-таки пытался загрузиться ВК и контент сайта снова не догружался, мне пришлось слегка подкорректировать скрипт.

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

<div class="vk-widget" <?php if(checkCountryByIp() == 'UA'){ ?> style="height: 178px;" <?php } ?>>
    <?php if(checkCountryByIp() != 'UA'){ ?>
        <div id="vk_groups"></div>
    <? }else{ ?>
        <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fcccpblog
                &tabs&width=286&height=170&small_header=true&adapt_container_width=true&hide_cover=false
                &show_facepile=true&appId" width="286" height="170"
                style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" async>
        </iframe>
    <?php } ?>
</div>

Таким «куцым» он вышел потому, что весь JavaScript код асинхронной загрузки виджета ВК на сайт я решил вынести в отдельный скрипт, который подключал на сайт в футере:

if (document.getElementById("vk_groups")) {
    var VK_loader = function () {
        var oHead = document.getElementsByTagName("head")[0];
        var oScript = document.createElement("script");
        oScript.type = "text/javascript";
        oScript.async = true;
        oScript.src = "http://vk.com/js/api/openapi.js?150";
        oHead.appendChild(oScript);
        oScript.onload = function () {
            VK.Widgets.Group(
                    "vk_groups",
                    {
                        mode: 0,
                        width: "286",
                        height: "320",
                        color1: 'FFFFFF',
                        color2: '444444',
                        color3: '00a1e0'
                    },
                    105617374
                    );
        }
    };
    if (document.addEventListener) {
        document.addEventListener("DOMContentLoaded", function () {
            document.removeEventListener("DOMContentLoaded", arguments.callee, false);
            VK_loader();
        }, false);
    }
}

Сюда, помимо описанного ранее кода, я решил добавить проверку на существование контейнера, в который загружается виджет ВК по АПИ, т.к. скрипт загружается даже в случае загрузки виджета Фейсбук, когда контейнера на странице нет физически, в результате чего браузер выдаёт ошибку в консоли.

Несмотря на то, что приведённый выше скрипт я использовал для установки виджетов соцсетей на своём WordPress сайте, он подойдёт для любого ресурса, разработанного на языке PHP, т.к. никаких специальных конструкций WordPress API я при его разработке не использовал.kak-dobavit-vidjet-vkontakte-i-fejsbuk-na-sajt-po-ip

Если же вы не хотите морочиться установкой кода на сайт, то можете воспользоваться готовыми решениями в виде плагинов для CMS. Например для определения страны и города по IP на WordPress можете воспользоваться WT GeoTargeting — https://ru.wordpress.org/plugins/wt-geotargeting/

Правда, в этом случае вам всё равно понадобится вторая часть моего кода по добавлению виджетов социальных сетей Вконтакте и Facebook на сайт, т.к. плагин способен только определять страну по IP пользователя.

Думаю, что по ходу чтения материала вы догадались, почему в теме статьи делается акцент именно на блокировку ВК в Украине, хотя под санкции попал и ряд других популярных ресурсов? Всё просто: в отличие от своих собратьев по санкциям на данный момент (а это уже спустя полгода) только Вконтакте палец о палец не ударил, чтобы сделать свои виджеты доступными для заблокированных пользователей.

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

Но разработчики ВК почему-то до сих пор ничего этого не сделали, несмотря на то, что, регулярно выпускают новые версии API.

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

На этом у меня всё. Пишите свои отзывы о статье в комментариях и делитесь ей со своими друзьями в социальных сетях с помощью кнопочек под публикацией. Надеюсь, что материал был вам полезен :-)

До новых встреч!

Определение города по IP в PHP: 3 способа

opredelenie-goroda-po-ip-v-phpВсем привет!

Не скажу, что часто, но время от времени у разработчиков появляется необходимость определения города по IP в PHP скрипте.

Например, вы решили облегчить работу пользователю по вводу контактной информации при оформлении заказа в Интернет магазине. Или хотите устанавливать язык интерфейса сайта в зависимости от страны, из которой к вам на сайт зашёл посетитель.

Ну, а чаще всего определение города по IP в PHP с помощью GeoIP, наверное, нужно разработчикам различных рекламных сетей, чтобы предлагать пользователям таргетированную рекламу в зависимости от географического местоположения.

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

А пока поговорим о том, сколько способов определения города и страны по IP в PHP существует и какие варианты их реализаций существуют.

PHP GeoIP — стандартный функционал стороннего производства

Я специально так озаглавил описание первого способа. Дело в том, что в самом PHP определить город и страну по IP адресу нельзя — язык не обладает для этого необходимыми инструментами.
Зато в официальной документации есть подсказка, как это сделать.

PHP GeoIP — это сторонняя библиотека, которую необходимо подключать дополнительно, несмотря на то, что описание функций, входящих в неё, является частью официальной документации PHP — http://php.net/manual/ru/ref.geoip.php

В принципе, мотивы разработчиков PHP вполне понятны.

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

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

Ну, и в-третьих, определение города по IP в PHP — возможность достаточно редко используемая на практике.

В итоге, из-за этих факторов PHP GeoIP является сторонним расширением, поддержкой которого и созданием API для интеграции на существующих сайтах занимается компания MaxMind, ссылка на которую присутствует в описании данной библиотеки.

Я не буду заниматься описанием процесса её установки на сервер, т.к. я сам на практике этим не занимался, и в Интернете на данный момент полно мануалов по установке PHP GeoIP как на Linux, так и на Windows сервера.

Могу только сказать, что у данного способа определения города, страны и прочей гео информации по IP в PHP есть два существенных минуса:

  1. Доступ к базе полной информации по IP адресам, предоставляемой компанией MaxMind, платный. Причём, сумма в долларах, как ни странно :-) Бесплатно доступны лишь существенно урезанные варианты — http://dev.maxmind.com/geoip/geoip2/geolite2/
  2. Учитывая, что PHP GeoIP — стороннее расширение, его необходимо будет отдельно устанавливать на сервер, что при условии использования shared хостинга может стать затруднительным мероприятием. Можно конечно, обратиться в техподдержку, но не факт, что вам помогут. Мне, например, при просьбе установить Sphinx отказали.

Определение города по IP в PHP с помощью альтернативных библиотек

Ещё один способ узнать город по IP в PHP скрипте — это использование альтернативных серверных библиотек и баз информации для IP адресов, отличных от MaxMind.

Но они обладают теми же минусами, что и предыдущий вариант, т.к. являются всего лишь конкурентами MaxMind. Доступы к базам и возможность использования их API также платная. Бесплатно можно получить только список стран и городов по IP, в то время как при платном тарифе можно получать более широкий перечень данных.

Единственное преимущество над PHP GeoIP заключается в том, что данные библиотеки интегрируются в PHP коде, а не на уровне сервера, т.е. их можно использовать даже на shared хостингах.

Примером такой библиотеки является предоставляемая сервисом db-ip.com.

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

Кстати, указанный мною сервис предоставляет не только свою PHP библиотеку для получения гео данных по IP клиентов, но и доступ к базам информации по адресам. Так что, в принципе, никто вам не мешает использовать их в PHP GeoIP, чтобы использовать его API, но информацию брать из других источников.

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

Как определить город по IP в PHP online

Ну, и вот я подошёл к финальному способу как узнать страну по IP в PHP и прочую гео информацию, который использовал сам на практике.

Он заключается в использовании API онлайн сервисов, которые позволяют получать данные по IP адресу в режиме онлайн.

Определять город по IP в PHP я решил именно данным способом, т.к. он лишён главного недостатка предыдущих. А именно, он самый простой в реализации — не нужно ничего устанавливать и настраивать на сервере, а, тем более, просить об этом техподдержку shared хостингов.

Для того, чтобы получить необходимую информацию по IP, достаточно всего лишь отправить запрос на определённый URL и обработать ответ.

Что касается стоимости их использования — в большинстве своём они так же платные, т.к. работают, как правило, на основе существующих коммерческих баз IP. Но есть и бесплатные сервисы, которые предоставляют, возможно, на такую полную информацию, как коммерческие, но зато её можно получать в неограниченном объёме.

Правда, они очень быстро прекращают своё существование, как ни странно, т.к. выжить предоставлением подобных услуг очень сложно. Это показал мой анализ бесплатных online сервисов определения городов и стран по IP, который я проводил в личных целях. Они мелькали на многих сайтах, но при попытке воспользоваться ими было понятно, что они прекратили своё существование.

В итоге, я отыскал то, что мне было необходимо, чем и хочу с вами определиться — http://www.geoplugin.com/

Данный сервис позволяет как определять город и другую информацию по IP на сайте сервиса, так и производить это из кода. Далее я приведу пример определения страны по IP в PHP скрипте с помощью geoplugin.com. Определение IP в PHP коде осуществляется с помощью кода, описанного в статье по ссылке.

<?php

$client  = @$_SERVER['HTTP_CLIENT_IP'];
$forward = @$_SERVER['HTTP_X_FORWARDED_FOR'];
$remote  = @$_SERVER['REMOTE_ADDR'];
$result  = array('country'=>'', 'city'=>'');

if(filter_var($client, FILTER_VALIDATE_IP)) $ip = $client;
elseif(filter_var($forward, FILTER_VALIDATE_IP)) $ip = $forward;
else $ip = $remote;

$ip_data = @json_decode(file_get_contents("http://www.geoplugin.net/json.gp?ip=".$ip));    
if($ip_data && $ip_data->geoplugin_countryName != null)
{
    $result = $ip_data->geoplugin_countryCode;
}

echo $result;

?>

Как видите, суть приведённого кода заключается в определении IP адреса клиента, причём учитывается возможность его подключения через прокси, и отправке запроса по API GeoPlugin с дальнейшим декодированием и анализом результатов.

В моём примере, как я уже и говорил, результатом работы данного скрипта будет являться код страны клиента сайта. Вообще, полный список возвращаемых параметров выглядит так (для примера решил взять IP Новосибирской области РФ):

{
  "geoplugin_request":"195.208.128.3",
  "geoplugin_status":200,
  "geoplugin_credit":"Some of the returned data includes GeoLite data created by MaxMind, available from <a href='http:\/\/www.maxmind.com'>http:\/\/www.maxmind.com<\/a>.",
  "geoplugin_city":"Novosibirsk",
  "geoplugin_region":"Novosibirsk",
  "geoplugin_areaCode":"0",
  "geoplugin_dmaCode":"0",
  "geoplugin_countryCode":"RU",
  "geoplugin_countryName":"Russian Federation",
  "geoplugin_continentCode":"EU",
  "geoplugin_latitude":"55.09",
  "geoplugin_longitude":"82.6519",
  "geoplugin_regionCode":"53",
  "geoplugin_regionName":"Novosibirsk",
  "geoplugin_currencyCode":"RUB",
  "geoplugin_currencySymbol":"&#1088;&#1091;&#1073;",
  "geoplugin_currencySymbol_UTF8":"\u0440\u0443\u0431",
  "geoplugin_currencyConverter":58.9289
}

Как видите, данный сервис использует упоминаемый ранее MaxMind (параметр geoplugin_credit), но платную информацию или нет — сложно предположить. С одной стороны, ссылка на источник говорит о том, что используется бесплатный доступ к БД IP, но, с другой, мы видим не только страну и город, но и ещё много всякой информации, включая город, географические координаты координаты (langitude, latitude), текущую валюту и даже её курс.

Так что данный сервис можно назвать PHP GeoIP онлайн. Единственное его отличие от серверного аналога — то, что он получает информацию по IP немного медленнее за счёт отсутствия серверного кэширования. Но это ещё не значит, что его нет на самом сервере GeoPlugin 😉 Так что недостаток этот, скорее, символический.

В любом случае, разработчики GeoPlugin заслуживают на аплодисменты, а, в особенности, ещё и за то, что они даже не захламили своё сайт контекстной рекламой. Т.е. как они вообще выживают — непонятно. Единственный способ сказать им «спасибо» — это пожертвования на PayPal счёт.

Кстати, приведённый мною PHP код для определения города по IP является универсальным. Можете его использовать для получения гео данных и с помощью других сервисов. Единственное, что вам нужно будет в нём изменить — это URL API сервиса и имя необходимых параметров, которые вам нужно будет получить.

На этом у меня всё. Пишите ваши отзывы о статье в комментариях ниже и не забывайте делиться записью со своими друзьями в социальных сетях.

Если у вас есть какие-то замечания или вы хотите поделиться другими способами определения города по IP в PHP, то оставляйте их также в комментариях.

Пока :-)

Как получить IP через PHP для сервера и пользователя

php-uznat-ip-adresДоброго времени суток :-)

На практике часто возникает необходимость узнать IP в PHP скрипте сайта. Причём, это может быть как IP адрес сервера, так и посетителя, производящего действия на вашем ресурсе.

Причём, последний иногда может пользоваться сайтом не напрямую, а по каким-то причинам подключаясь к нему через прокси сервер. Этот случай усложняет жизнь тем, что для подключения используется изменённый IP адрес.

Но, к счастью, в PHP получить IP адрес как клиента, так и самого сайта в этом случае более, чем реально. Причём, для этого не потребуются никакие специальные библиотеки и средства движков сайтов. Всё необходимое уже есть в самом PHP «на борту».

Нам осталось только пользоваться :-)

Как в PHP узнать IP сервера

Вся необходимая информация об IP сервера, да и пользователя тоже, в PHP доступна через суперглобальный массив $_SERVER. Однако, помимо перечисленных данных он содержит ещё много различной информации.

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

В частности, для того, чтобы в PHP определить IP адрес сервера, в коде нужно прописать следующую конструкцию:

<?php
    echo $_SERVER['SERVER_ADDR'];
?>

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

Как в PHP получить IP посетителя

Для определения в PHP IP пользователя, с которого он подключается к вашему сайту, мы воспользуемся тем же массивом $_SERVER. В данном случае нас будет интересовать переменная REMOTE_ADDR, содержимое которой можно вывести на экран привычным способом:

<?php
    echo $_SERVER['REMOTE_ADDR'];
?>

Однако, в случаях использования клиентом прокси соединений, т.е. когда при подключении трафик идёт через сторонний прокси сервер, данная переменная будет содержать IP адрес не посетителя, а прокси сервера.

Чтобы узнать в PHP IP адрес посетителя в данном случае, нужно воспользоваться другим способом.

Как в PHP определить IP пользователя, использующего прокси

Первым делом, в PHP IP посетителя при использовании прокси можно попробовать получить следующим способом:

<?php
    echo $_SERVER['HTTP_CLIENT_IP'];
?>

Данный код можно найти практически во всех PHP скриптах, определяющих реальный IP посетителя. Однако, мало кто может объяснить, что хранится в данной переменной.

Если прописать данный код у себя в сайте на локальном сервере, то вы вообще получите пустое значение, т.е. данной переменной в массиве $_SERVER у вас не окажется. И это не удивительно, т.к. в HTTP_CLIENT_IP хранится глобальный IP пользователя, т.е. его адрес в сети Интернет.

И, самое главное, что на это значение не влияет прокси соединение, т.е. здесь вы найдёте реальный IP пользователя, а не его прокси сервера.

Если по каким-то причинам данная переменная будет отсутствовать в PHP $_SERVER, то можете попробовать узнать IP адрес клиента ещё и таким способом:

<?php
    echo $_SERVER['HTTP_X_FORWARDED_FOR'];
?>

В данную переменную прокси сервера сами помещают реальный IP посетителя.

Таким образом, для того, чтобы в PHP узнать IP клиента гарантированно, можно использовать следующую конструкцию:

<?php

$client  = @$_SERVER['HTTP_CLIENT_IP'];
$forward = @$_SERVER['HTTP_X_FORWARDED_FOR'];
$remote  = @$_SERVER['REMOTE_ADDR'];

if(filter_var($client, FILTER_VALIDATE_IP)) $ip = $client;
elseif(filter_var($forward, FILTER_VALIDATE_IP)) $ip = $forward;
else $ip = $remote;

echo $ip;

?>

Данный скрипт выведет на экран значение переменной $ip, в которую при использовании прокси соединения будет записан глобальный IP посетителя. Если же его не будет найдено в PHP $_SERVER, то скрипт попытается узнать IP пользователя, записанный самим прокси сервером.

Если же ни одной переменной не будет присвоено значение, то с большой вероятностью можно предположить, что посетитель не использует прокси либо прокси сервер не предоставляет реальный IP посетителя. В этом случае, чтобы получить хоть какое-то значение IP, мы берём его из REMOTE_ADDR. Но, с высокой долей вероятности, это значение будет IP адресом прокси сервера (благо, что ими не пользуется абсолютно каждый клиент сайтов).

Для проверки существования значений переменных я, как видите, решил воспользоваться PHP функцией filter_var, которая фильтрует переменные с применением определённого фильтра (шаблона), которым в данном случае является FILTER_VALIDATE_IP.

В завершение хочу подытожить, что описанным выше способом, несмотря на все тщательные проверки всех возможных серверных переменных PHP, определить IP пользователя с использованием прокси всё равно не получится на 100%.

Дело в том, что IP адрес клиента предоставляют только определённый тип прокси серверов, которые называют «прозрачными». Как правило, это открытые службы.

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

Оставляйте свои отзывы в комментариях — что понравилось, что нет, может быть, о чём-то следовало бы рассказать поподробнее… Мне интересно любое ваше мнение.

До новых встреч :-)

WordPress капча: мой опыт использования

wordpress-kapchaВсем привет! :-)

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

Сейчас вы, наверное, удивитесь, но всё это было вступление к сегодняшней статье :-)

Изначально я планировал написать именно об установке капчи для WordPress и поделиться своим скромным опытом, приобретённым в процессе трёх переустановок различных решений. Но при продумывании темы пришёл к выводу, что информации, которой я хочу с вами поделиться, слишком много.

В результате появились предыдущие 4 статьи. Вот так иногда бывает :-)

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

О чём речь пойдёт в статье, думаю, вам понятно. Следовательно, она будет полезна всем, кто заботится о безопасности WordPress сайтов: как разработчикам, так и владельцам ресурсов, кто хочет установить капчу для WordPress самостоятельно.

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

Так что установка капчи на WordPress сайт — обязательная и первостепенная мера, для произведения которой нужно от силы минут 10: 5 на чтение данной статьи, 3 на выбор нужного решения и 2 на его установку :-)

Не буду тянуть кота за хвост и переходим непосредственно к тому, какие реализации капчи испробовал я на своём опыте, от каких отказался и к чему пришёл в итоге.

Летс гоу :-)

Зачем мне понадобилась WP капча

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

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

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

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

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

Во второй раз о необходимости установки WordPress CAPTCHA я задумался, когда меня стали заваливать спамом в комментариях. Полностью закрывать комментарии для всех пользователей выглядит совсем дико и попахивает тоталитарным режимом :-) Поэтому я решил искать альтернативы.

Первой стала установка стороннего модуля комментариев с помощью виджета ВКонтакте. Думаю, многие видели его на сайтах и ту чушь, которая подчас там содержится.

Всё из-за того, что, в отличие от стандартных комментариев WordPress, при установке сторонних виджетов нет никакой возможности модерирования: что клиент написал, то на твоём сайте и появится.

Такое положение дел меня тоже не устраивало, поэтому я и решил вернуться к использованию механизма WordPress для добавления комментариев, защитив его от спамеров с помощью CAPTCHA, как самого простого и эффективного средства в данной ситуации.

Однако, если с простотой использования мало кто поспорит благодаря массе готовых плагинов WordPress капчи, то с эффективностью, как показала практика, имеются проблемы, о которых я далее и поведаю.

Установка графической капчи для WordPress

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

Я тоже не раз с ней сталкивался, поэтому и решил не отдаляться от коллектива и установить её себе на сайт. Заморачиваться тогда с изучением принципов её работы и реализацией с нуля я не захотел, поэтому решил обойтись установкой готового плагина.

Мой выбор пал на WordPress Captcha Code, который можно скачать в официальном каталоге плагинов ВордПресс по следующему адресу — https://wordpress.org/plugins/captcha-code-authentication/

Я обратил своё внимание на данное решение, т.к. оно было максимально простым и имело по-минимуму разнообразных настроек.

nastrojki-plagina-graficheskoj-kapchi-dlya-wordpress

Как видите, среди них только выбор типа символов (буквы и/или числа), их количество, место размещения на сайте и возможность отображения её зарегистрированным пользователям или нет. Как говорится, ничего лишнего :-)

Выглядит данная графическая WordPress капча на сайте следующим образом:

graficheckaya-wordpress-captcha-v-forme-kommentariev

Однако, как выяснилось позже, лаконичность настроек — это как плюс, так и минус, т.к. маленькие баги в вёрстке самого элемента капчи в HTML форм сайта пришлось править вручную. Например, красную звёздочку обязательности ввода значения поля WP CAPTCHA пришлось руками перемещать на одну строку с надписью «Код безопасности» в коде плагина.

Но, самый главный минус данного решения проявился немного позже.

Спустя всего неделю после установки WordPress CAPTCHA Code на свой сайт я обнаружил, что данный плагин не справляется со своими задачами. Поток спама, правда, превратился в ручеёк, но он всё же был.

Видимо, за время, пока ресурс не был защищён с помощью капчи от спама, он уже успел попасть в базы спам ботов, которые продолжали его атаковать и после установки WordPress CAPTCHA. Но в этом был и положительный момент, т.к. данный факт показал несостоятельность плагина WordPress CAPTCHA Code в борьбе со спамом.

Как известно, программисты — народ ленивый :-) И поэтому я уже был готов оставить всё как есть.

В принципе, сократившееся количество спама меня тоже устраивало, а на поиски нового плагина нужно было бы тратить своё драгоценное время, и то ещё не факт, что новый справлялся бы лучше старого. Однако, меня всё-таки заставило отказаться от WordPress CAPTCHA Code одно жирное «НО».

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

Так вот, после его установки выяснилось, что иногда моя графическая WordPress капча была вообще без символов. Т.е. один фон — и всё. При этом от пользователя требовалось ввести невидимые символы, без чего его комментарий не засчитывался. Но и после неправильного ввода при повторной генерации капчи символы не появлялись.

Самое интересное в данной ситуации, что спам я получать при этом не перестал. Мне стабильно приходили явно автоматически сгенерированные сообщения со всякими тизерами и ссылками на другие ресурсы. Т.е. в итоге сложилась ситуация, при которой капча на сайте стояла, но она останавливала реальных людей, а не роботов, хотя должно было быть всё в точности наоборот.

Поначалу моя реакция на это явление была предсказуема :-)

Да, я снова оставил всё, как есть, потому что, несмотря на данный баг, комментарии у меня на сайте иногда всё-таки появлялись, а новый плагин искать было день. Поэтому я понадеялся на удачу и на то, что отсутствие символов капчи — это мои глюки, и также не предпринял никаких действий.

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

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

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

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

Итак, я прервался на том, что решил поменять плагин ВордПресс капчи. Оставалось только выбрать подходящий.

Установка плагина WordPress reCAPTCHA от Google

При выборе новой WP капчи я снова принялся изучать все существующие на сегодняшний день разновидности. Помню, как в процессе поисков я на одном из форумов наткнулся на тему, в которой народ обсуждал аналогичную проблему — некорректную работу «классических» графических капчей для ВордПресс, генерирующих задания на сервере.

Оказалось, что описанные выше проблемы наблюдались не только у меня. Да и ничего удивительного в этом нет. Поскольку большинство плагинов кэширования WordPress работают на основании серверного кэширования, то часто используемые запросы к БД и прочая часто вызываемая информация сохраняется на сервере для дальнейшего быстрого вызова.

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

В итоге, на том же форуме я нашёл и решение всех бед.

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

Примером такой капчи является популярная Google reCAPTCHA v2, которая называется noCAPTCHA. Самым известным плагином, работающим на её базе, является Google Captcha (reCAPTCHA) by BestWebSoft, которым я и решил воспользоваться для ускоренной интеграции WP капчи на сайт, не вдаваясь в подробности её работы.

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

recaptcha-google-wordpress-nastrojki-plagina

Поскольку плагин работает на базе Google API, то для использования WordPress Google reCAPTCHA необходимо создать ключ API по ссылке, которая есть на странице настроек плагина.

Помимо того, что вы видите на картинке выше, есть ещё следующие возможности:

  1. выбор группы пользователей (Администраторы, Редакторы, Авторы и т.д.), для которых капча не будет отображаться;
  2. возможность составления «белого списка» IP адресов, при заходе с которых пользователи смогут совершать действие без ввода капчи;
  3. изменения текста сообщения для посетителей из «белого списка»;
  4. выбор цветовой темы оформления (есть светлая и тёмная);
  5. возможность установки Google reCAPTCHA v1, которая, если кто-то ещё помнит, была обычной графической капчей;
  6. задание собственных стилей оформления с помощью CSS и пользовательского PHP кода.

Устанавливать Google капчу с помощью данного плагина можно, как вы видите, на стандартные формы WordPress, перечисленные в настройках. Также можно установить её и в другие места сайта, в том числе и интегрировать её в другие плагины (например, в Contact Form 7, которую очень любят использовать для форма обратной связи).

Но в последнем случае вам нужно будет разбираться в коде или приобрести Premium версию плагина Google Captcha (reCAPTCHA) by BestWebSoft, в которой есть возможность интеграции в различные плагины путём проставления галочки на странице настроек.

В итоге, на моём сайте в форме комментариев WordPress reCAPTCHA, сгенерированная данным плагином, выглядела следующим образом:

wordpress-google-captcha-v-forme-kommentariev

Что я в итоге могу сказать про данный плагин? В дизайн сайта WordPress Google CAPTCHA noCAPTCHA вписалась идеально. А, самое главное, что со своими функциями — защитой WordPress от спама — данный плагин справлялся идеально.

После его установки прекратился даже тот ручеёк, который оставался после графической капчи от WordPress CAPTCHA Code. Ну и, что немаловажно, Google Captcha (reCAPTCHA) by BestWebSoft решил проблему, создаваемую предыдущим плагином.

Благодаря тому, что Google reCAPTCHA noCAPTCHA — это JavaScript AJAX капча, то серверное кэширование никак не влияло на её работу, позволяя пользователям проходить её каждый раз, как они это пожелают сделать, а не только в тех случаях, когда сгенерированная картинка отображалась на экране.

Ну, и при вводе WordPress рекапчи от пользователей требуется меньше телодвижений и сил по сравнению с вводом символов с картинки, которые не всегда могут генерироваться корректно. Хотя, это, конечно, не преимущества отдельно данного плагина а всей технологии Google noCAPTCHA в целом.

Резюмируя всё вышесказанное, мой отзыв о Google Captcha (reCAPTCHA) by BestWebSoft положительный. Но, несмотря на это, я всё же отказался от данного варианта капчи на своём блоге. Почему — читайте далее.

Установка WordPress reCAPTCHA без плагина

На самом деле, всему виной девушки :-) А в сложившейся ситуации — моя вторая половинка, которая является создателем и автором проекта 50 килограммов счастья, к разработке и поддержке которого я имею непосредственное отношение.

Ну, и, естественно, на данном сайте присутствуют практически все фишки, наработки и плагины, которые я протестировал при создании своего собственного. В том числе, на нём капча до недавнего времени была реализована с помощью Google Captcha (reCAPTCHA) by BestWebSoft.

Но, ввиду особенностей вёрстки шаблона её сайта у неё в форме комментариев на мобильных устройствах WordPress Google CAPTCHA noCAPTCHA, установленная с помощью вышеописанного плагина, стала вылезать за пределы экрана, мешая реальным пользователям её проходить.

Вёрстку менять было нельзя (девушки — народ капризный :-) ), поэтому было принято решение изменить вид самой Google reCAPTCHA.

Сам Google предоставляет два вида reCAPTCHA noCAPTCHA — стандартный, который вы видели выше, и компактный, который предназначен как раз-таки для мобильных устройств. В данном случае Google капча будет выглядеть следующим образом:

wordpress-recaptcha-kompaktnyj-vid

Реализуется это прописыванием одного-единственного параметра в клиентском HTML коде noCAPTCHA, добавляемом на сайт. Но, к сожалению, в Google Captcha (reCAPTCHA) by BestWebSoft данная опция доступна только в премиум версии плагина.

Платить за это маленькое новшество я, естественно, не захотел, поэтому сперва решил дополнить плагин данной фичей самостоятельно. Но, к сожалению, вставка пользовательского кода Google reCAPTCHA в HTML сайта в нём была реализована слишком запутанно, поэтому я принял решение интегрировать noCAPTCHA на сайт самостоятельно с помощью API Google.

О том, как установить Google reCAPTCHA на сайт, я уже писал в статье по ссылке. Изложенные там рекомендации универсальные, а, поскольку у WordPress есть своё API, позволяющая производить многие действия быстрее и красивее с помощью специальных функций, то я решил воспользоваться данной возможностью.

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

Итак, аккаунт вы создали, теперь самое время разместить Google reCAPTCHA на своём WordPress сайте. Напоминаю, что получить ключ reCAPTCHA и подробные инструкции по установке капчи на сайт можно получить на этой странице — https://www.google.com/recaptcha/admin.

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

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

В моём случае WordPress reCAPTCHA располагается на форме комментариев. Её код можно было бы вставить в файл комментариев вручную, но, поскольку я решил воспользоваться API WordPress, то весь мой код будет расположен в файле темы functions.php.

Помимо единства расположения всего кода в данном подходе есть и ещё один весомый плюс. Он заключается в том, что functions.php доступен для редактирования в админке WordPress в отличие от того же файла с формой комментариев, который там скрыт.

Открываем functions.php и пишем следующий код:

function recaptcha_field($fields) {
    global $user_ID;

    if (!$user_ID || ($user_ID && !is_super_admin($user_ID))) {
        $fields['recaptcha'] = '<div class="g-recaptcha" data-size="normal" data-sitekey="ваш_ключ_recaptcha"></div>';
    }
    
    return $fields;
}

add_filter('comment_form_default_fields', 'recaptcha_field');

Как видите, для размещения HTML кода капчи на форме комментариев я решил использовать WP функцию add_filter() с хуком comment_form_default_fields.

Если вы не в курсе работы этой функции, то она нужна для добавления каких-либо пользовательских действий перед выполнением стандартных событий WordPress, которые и называются хуками.

Данный механизм, кстати, очень популярен при разработке сторонних решений и используется во многих платформах. Например, аналогом WordPress hooks являются Laravel Middleware, о которых я упоминал при знакомстве вас с этим замечательным PHP фреймворком.

В качестве входных параметров add_filter() я передал имя хука и название мое пользовательской функции, в которой будет прописан вывод WordPress reCAPTCHA на экран. В моём случае она называется recaptcha_field, вы же можете придумать что-то пооригинальнее :-)

У хука есть параметр $fields, который соответствует набору полей формы комментирования. В него же мы будем добавлять и нашу капчу в recaptcha_field(), возвращая видоизменённый набор полей.

Также, как вы могли заметить, я установил в теле функции проверку прав текущего пользователя. Если мы залогинены под учёткой главного администратора, то капча нам показываться не будет. Во всех остальных случаях (в том числе и для неавторизованных пользователей) ВордПресс reCAPTCHA будет присутствовать на форме комментариев перед полем для ввода текста.

Сохраняем изменения в functions.php и открываем любую страницу, на которой есть форма добавления комментариев (не забудьте, что нужно быть незалогиненным на сайте).

Если капча не появилась, то не забудьте почистить кэш браузера и проверьте, не забыли ли вы подключить Google reCAPTCHA API на своём сайте. Делается это путём размещения следующей строки перед закрывающимся тэгом или :

<script src='https://www.google.com/recaptcha/api.js'></script>

Если всё сделали верно, а капчи всё так же нет — пишите в комментариях по статьёй, разберёмся вместе 😉

Кстати, если вы хотите установить WordPress reCAPTCHA на другие стандартные формы WordPress (авторизации, восстановления пароля и т.д.), то можно воспользоваться той же WordPress функцией add_filter с другими значениями хуков. Полный их список вы можете найти здесь — https://developer.wordpress.org/reference/hooks/

Если же вам нужно интегрировать WP рекапчу на формы, создаваемые другими плагинами (тот же Contact Form 7), то для этих целей лучше воспользоваться не хуками (если у плагина не будет, конечно, собственного пользовательского хука), а шорткодами.

Для этого достаточно прописать свой шорткод с помощью add_shortcode(). Если это — ваш вариант, то удалите описанный выше код из functions.php и вставьте вместо него следующий:

function recaptcha_html($atts, $content)
{
    global $user_ID;

    if (!$user_ID || ($user_ID && !is_super_admin($user_ID))) {
        $content .= '<div class="g-recaptcha" data-size="normal" data-sitekey="ваш_ключ_recaptcha"></div>';
    }
    
    return $content;
}

add_shortcode('recaptcha_field' , 'recaptcha_html');

Принцип работы данного кода, как видите, такой же, только оформлен он в виде шорткода [recaptcha_field], с помощью которого WordPress reCAPTCHA можно использовать внутри любого текста. Для демонстрации можете разместить его на какой-то текстовой странице и полюбоваться результатами :-)

Итак, код WP капчи в HTML сайта мы добавили. Теперь осталось прописать код проверки правильности её ввода. Для этого у Google так же есть рекомендации, с учётом которых получился следующий код, который также нужно разместить в functions.php после прописанного ранее:

function verify_recaptcha() {
    if (isset($_POST['g-recaptcha-response'])) {
        $captcha_response = $_POST['g-recaptcha-response'];
    } else {
        return false;
    }
    
    $response = wp_remote_post(
            'https://www.google.com/recaptcha/api/siteverify', array(
        'body' => array(
            'secret' => 'ваш_ключ_recaptcha',
            'response' => $captcha_response,
            'remoteip' => $_SERVER['REMOTE_ADDR']
        )
            )
    );
    
    $success = false;

    if ($response && is_array($response)) {
        $decoded_response = json_decode($response['body']);
        $success = $decoded_response->success;
    }
    
    return $success;
}

add_action('preprocess_comment', "precomment_function");

function precomment_function($commentdata) {
    global $user_ID;
    
    if ($user_ID && is_super_admin($user_ID)) {
        return $commentdata;
    }
    if (!verify_recaptcha()) {
        echo '<html>
<head>
<meta charset="UTF-8"><link rel="stylesheet" href="' . get_template_directory_uri() . '/recaptcha_error.css" type="text/css" >
</head>
<body>
<div>
Вы не прошли защиту от спама Google reCAPTCHA. Вернитесь на <a href="#" onclick="history.go(-1);">предыдущую страницу</a> и повторите попытку.
</div>
</body>
</html>';
        exit;
    }

    return $commentdata;
}

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

Смысл изложенного выше кода заключается в том, что мы снова вмешиваемся в процессы WordPress. На этот раз вносим коррективы в добавление нового комментария в БД с помощью add_action(), который имеет такой же смысл и параметры, как и add_filter(), только предназначен для действий, а не для обработки данных.

В качестве хука мы используем preprocess_comment, а функция для описания самого действия носит название precomment_function.

В её теле сперва происходит такая же проверка, как и при отображении нашей WP капчи в HTML, т.е. проверять ввод CAPTCHA мы будем только для тех пользователей, которым она показалась.

Ну, а дальше происходит сама проверка правильности ввода с помощью функции verify_recaptcha(), содержимое которой точь-в-точь, как в статье об установке reCAPTCHA на сайт, о которой я уже упоминал ранее и оставлял на неё ссылку.

Единственное, что я решил модернизировать, так это сама отправка POST запроса на сервер Google, которую я решил реализовать с помощью WordPress функции wp_remote_post(), а не PHP curl_exec() с указанием кучи заголовков.

Если проверка прошла успешно, то мы добавляем комментарий пользователя в БД сайта. Если же нет, то выводим на экран сообщение с просьбой вернуться на предыдущую страницу и ввести капчу правильно. HTML код сообщения прописываем здесь же.

Ну, а CSS стили оформления сообщения я вынес в отдельный файл, который назвал recaptcha_error.css и разместил в директории моей текущей темы на сервере, для чего при вызове файла использовал get_template_directory_uri(). Вы можете разместить его в любом другом удобном для вас месте, не забудьте только url поменять.

Сообщение я решил оформить в стиле экрана авторизации WordPress, для чего использовал следующие стили:

body {
    background:#f1f1f1;
    min-width:0;
    font-family:"Open Sans",sans-serif;
    line-height:1.5;
}
body div {
    width:350px;
    padding:24px 26px;
    margin:40px auto;
    color:#777;
    font-size:14px;
    background:#fff;
    box-shadow:0 1px 3px rgba(0,0,0,.13);
}
@media screen and (max-width: 400px) { 
    body div {
        width:300px;
        font-size:12px
    }
}

Ну вот и всё. Капча для WordPress готова. Осталось только протестировать :-)

Если капчу не ввести или как-то умудриться сделать это неверно, то на экране мы увидим следующее сообщение:

oshibka-prokhozhdeniya-kapchi-dlya-wordpress

Если же всё прошло успешно, то комментарий появится в админке сайта:

kommentarij-dobavlennyj-posle-vvoda-wordpress-google-captcha

И на этой позитивной ноте я уже было хотел попрощаться с вами, но неожиданно вспомнил то, из-за чего весь этот сыр-бор с самописной WordPress капчей вообще затеялся. А именно, из-за того, что я не не знал как сделать компактную Goggle reCAPTCHA на WordPress.

Так вот. Для того, чтобы придать ей мобильный вид необходимо в HTML коде капчи изменить значение параметра data-size с normal на compact. Ну, а поскольку изначально проблемы с размером ВордПресс reCAPTCHA у моей девушки на сайте наблюдались только в мобильной версии, то я видоизменил строку добавления капчи на форму комментариев следующим образом:

$fields['recaptcha'] = '<div class="g-recaptcha" data-size=' . (wp_is_mobile() ? "compact" : "normal") . ' data-sitekey="ваш_ключ_recaptcha"></div>';

После того, как я решил проблему на другом сайте, подумал о том, почему бы мне и на свой не установить подобное. Таких прямо огромных проблем, как у моей девушки, у меня не наблюдалось (смотрите на картинку ниже), поэтому я решил не устанавливать компактную версию reCAPTCHA, а ограничиться пропорциональным уменьшением стандартного варианта средствами CSS.

vordpress-kapcha-v-kommentariyakh-na-mobilnykh-ustrojstvakh

Для этого мне нужно было узнать какой-то идентификатор капчи (класс или id), который присваивался HTML элементу самим Google. Таковым оказался класс .g-recaptcha, которому я и задал необходимые стили. А, поскольку проблема с размером WordPress reCAPTCHA у меня наблюдалась только на экранах мобильных устройств шириной менее 420px, то итоговый CSS код, добавленный в style.css моей темы вышел таким:

@media screen and (max-width:420px) {
    .g-recaptcha {
        transform:scale(0.96);
        -webkit-transform:scale(0.96);
        transform-origin:0 0;
        -webkit-transform-origin:0 0;
    }
}

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

В итоге, на моём сайте на мобильных устройствах капча приняла следующий итоговый вид, который меня полностью устроил:

kapcha-v-kommentariyakh-wordpress-itogovyj-variant

На этом наша самостоятельная установка reCAPTCHA на WordPress сайт без плагина закончена.

И на данный момент последний описанный вариант реализации WordPress CAPTCHA является текущим для данного сайта, на котором я решил остановиться.

Понимаю, что он неидеален, т.к. требует от пользователей много телодвижений и, порой, специальных знаний, при установке на сайт, но зато гибкий и позволяет производить с капчей различные преобразования с помощью параметров, описанных в официальной документации Google reCAPTCHA — https://developers.google.com/recaptcha/docs/display#config

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

И жду от вас лайков и репостов в соцсетях, если сегодняшняя статья не оставила вас равнодушными.

На этом у меня всё. До новых встреч! :-)

Делаем капчу на PHP: установка reCAPTCHA и код с нуля

kak-cdelat-kapchu-na-phpВсем привет! :-)

Сегодня в продолжение разговора о том, что такое CAPTCHA и как заработать на капче, мы поговорим о том, как же её установить на свой сайт.

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

Поэтому сегодняшняя статья будет состоять из двух частей: установка reCAPTCHA от Google и того, как сделать капчу на PHP самостоятельно.

Указанные в статье примеры будут универсальные, без привязки к какой-либо платформе сайта, поэтому их можно использовать абсолютно на любом сайте, разработанном с использованием PHP и HTML.

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

Если вы — опытный разработчик, то следующий абзац смело пропускайте.

Как работает капча

Если изучить внимательно существующие сайты, использующие капчу, то заметно, что она размещается на различных HTML формах ресурса, необходимых для осуществления пользовательских действий.

Механизм работы HTML форм следующий:

  • пользователь вводит информацию в соответствующие поля;
  • нажимает на кнопку «Отправить» или с похожим названием, оформленную в виде HTML элемента input type=»submit»;
  • при этом данные формы отправляются на сервер, где происходят дальнейшие действия. Имя серверного скрипта прописано в атрибуте action HTML-тэга form.

При использовании CAPTCHA на форме, она является одним из полей, значение которому указывает пользователь при решении капчи.

Затем на сервере проверяется значение капчи с правильным ответом и если они совпадают, то действие, производимое пользователем с помощью формы, выполняется.

Если же нет — выдаётся сообщение о неправильном вводе капчи, а иногда ещё и происходит фиксация IP-адреса, с которого была произведена попытка ввода неверной CAPTCHA, с дальнейшим внесением его в blacklist и блокированием доступа как к сайту в целом, так и к отдельным элементам.

На таком принципе была основана работа самых первых, так сказать, «классических» капч, и он до сих пор успешно применяется.

Разнообразие в данный механизм вносят JS капчи, которые отправляют AJAX запрос на сервер для проверки правильности ввода в режиме «реального времени», т.е. без перезагрузки страницы. Ярким представителем JavaScript капчи является всем известная Google reCAPTCHA noCAPTCHA, об установке которой мы поговорим далее.

Итак, как работает капча, мы разобрались. Из её принципа работы следует, что сама реализации капчи CAPTCHA будет содержать клиентский код (HTML элемента капчи) и серверный (PHP скрипт, обрабатывающий ответ пользователя).

В случае использования сторонних решений вам, скорее всего, понадобится только клиентский код. Серверный может быть ограничен только лишь отправкой запросов на сторонний сервер для проверки правильности ввода (у той же самой Google reCAPTCHA v2).

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

В случае реализации CAPTCHA с нуля серверная часть будет более масштабной, т.к. помимо самой проверки ввода капчи на сервере будет происходить генерация задания.

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

Как сделать капчу на PHP — подготовка формы

Поскольку у меня на сайте капча уже установлена, то я решил не удалять её с целью демонстрации процесса повторной установки. Вместо этого я решил разработать примитивную HTML форму добавления комментариев на сайт, которая присутствует, наверное, на каждой современном ресурсе.

Она будет состоять из поля для ввода текста и кнопки «Отправить», между которыми в будущем мы будем размещать нашу капчу.

Код формы следующий:

<html lang="ru">
    <head>
        <title>CAPTCHA demo</title>
        <meta charset="utf-8">
		<script src='https://www.google.com/recaptcha/api.js'></script>
    </head>

    <body>
        <form method="post" action="verify_captcha.php">
            <p>
                <b>Введите комментарий:</b>
            </p>

            <p>
                <textarea name="comment" rows="12" cols="21"></textarea>
            </p>
			
            <p>
                <input type="submit" value="Отправить">
            </p>
        </form>
    </body>
</html>

Внешне она выглядит следующим образом:

delaem-kapchu-na-forme-kommentariev

Для удобства разработки и демонстрации результатов я решил создать новый репозиторий на Github, в котором можно будет найти весь код, приведённый в данной статье.

Для каждой реализации капчи создан отдельный каталог с идентичной структурой.

Поскольку наша форма комментариев на момент разработки является самостоятельным решением, а не частью существующей страницы сайта, то для её запуска в каждом каталоге есть файл index.php. В нём же происходит вызов файла form.html, содержащего описанный выше код.

Данная структура приложения была выбрана не случайно, т.к. она максимально соответствует реальным проектам, в которых html вызывается из PHP скрипта на сервере. Поэтому для интеграции кода капчи из статьи на свой сайт всё, что вам потребуется, — это скопировать form.html к себе на сервер, а код из index.php в свой серверный скрипт, вызывающий необходимую форму.

Или перенести содержимое вышеуказанных файлов в соответствующие.

Ну, а теперь приступаем к созданию капчи. Начнём с интеграции готовых сторонних решений, а далее я покажу, как сделать капчу на PHP своими руками.

Серверные скрипты были разработаны на PHP 5.6, но и на более поздних версиях (PHP 7+) с ними проблем не будет, т.к. я старался не использовать deprecated конструкции.

Установка reCAPTCHA

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

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

Для того, чтобы получить ключ reCAPTCHA, нужно создать Google-аккаунт, который даёт доступ ко всем сервисам данной компании (Youtube, Google диск, почта Gmail и др.) либо воспользоваться существующим (думаю, у большинства из вас он есть, если вы пользуетесь хотя бы одним из перечисленный сервисов).

После того, как вы залогинитесь в своём аккаунте, переходим на страницу https://www.google.com/recaptcha/admin, вводим название капчи (можно добавлять несколько CAPTCHA, поэтому имя нужно для банальной идентификации) и выбираем нужную версию reCAPTCHA.

Я лично рекомендую использовать вторую версию, которой является уже упоминавшаяся noCAPTCHA. Она как раз и является AJAX капчей, об особенностях которой мы также говорили. Первая версия рекапчи подойдёт любителям старой доброй графической капчи, для прохождения которой нужно вводить искажённые символы и цифры с картинок.

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

ustanovka-recaptcha-nocaptcha-ot-google

Нажимаем на кнопку «Регистрация» и попадаем на страницу управления созданной капчей с доступом к статистике её ввода, кодом reCAPTCHA и списком инструкций по установке reCAPTCHA на сайт.

Просто выполняем описанные шаги:

kod-recaptcha-ot-google

Добавление кода reCAPTCHA в виде поля на HTML форму описано достаточно подробно, поэтому не буду его ещё раз повторять. Просто выполните указанные выше инструкции.

В результате наша форма должна принять следующий вид:

delaem-kapchu-ustanovka-recaptcha

Обратите внимание, что ваш сайт, на который вы добавляете reCAPTCHA, должен иметь доменное имя, указанное при её создании. Если оно будет отличаться от реального, использовать капчу не получится. Поэтому при настройке reCAPTCHA обязательно указывайте его корректно, даже в случае разработки на локальном веб-сервере.

Итак, HTML часть капчи завершена, настало время для серверной реализации. Как заметно из инструкции от Google, серверная проверка ввода капчи происходит следующим образом: после решения капчи пользователем результат отправляется на локальный сервер в виде значения параметра g-recaptcha-response.

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

Подробного примера реализации, как при установке reCAPTCHA на HTML форму, здесь у Google нет, т.к. неизвестно на каком языке написаны ваши серверные скрипты, а предоставлять примеры для всех существующих ныне серверных языков — это утомительно и долго, т.к. их около 20.

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

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

Приведённый далее код можно найти в каталоге google_captcha публичного репозитория, ссылка на который была указана ранее.

Для отправки запроса на сервер Google для проверки правильности ввода PHP капчи был создан отдельный скрипт verify_captcha.php со следующим кодом:

<?php

if (isset($_POST['g-recaptcha-response'])) $captcha_response = $_POST['g-recaptcha-response'];
else die('На форме нет капчи! Обратитесь к администратору!');

$url = 'https://www.google.com/recaptcha/api/siteverify';
$params = [
    'secret' => 'ваш_секретный_код_google',
    'response' => $captcha_response,
    'remoteip' => $_SERVER['REMOTE_ADDR']
];

$ch = curl_init($url);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, $params);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

$response = curl_exec($ch);
if(!empty($response)) $decoded_response = json_decode($response);

$success = false;

if ($decoded_response && $decoded_response->success)
{
    $success = $decoded_response->success;
}

$result = $success ? 'Капча пройдена успешно!' : 'Неверная капча!';
echo $result;

Немного комментариев.

Сперва в коде идёт проверка наличия параметра g-recaptcha-response в запросе, отправленном при подтверждении формы. Если же параметра нет, что равноценно отсутствию reCAPTCHA на форме, то скрипт завершает свою работу с соответствующим сообщением.

Далее мы отправляем POST запрос средствами PHP на сервер reCAPTCHA, как это требует Google, и анализируем полученный ответ, предварительно преобразовав его из JSON-формата в обычный объект.

Если ответ от сервера содержит параметр success со значением true, то всё прошло успешно. В противном случае ответ будет содержать параметр errors с указанием причины неудачного действия.

В итоге скрипт после завершения своей работы выводит на экран итоговое сообщение с текстом «Капча пройдена успешно!» в случае успешного выполнения серверного сценария и «Неверная капча!», если в процессе произошли какие-то ошибки.

При использовании приведённого примера интеграции Google reCAPTCHA в реальном проекте вместо сообщений должны быть прописаны необходимые действия.

Делаем капчу своими руками

Знаю, что я опоздал со своей статьёй, как минимум, лет на 10, когда капча только набирала обороты, практически каждый пытался написать капчу самостоятельно, и повсюду были примеры самописных реализаций.

Но тогда я ещё не занимался веб-программированием, поэтому алгоритмы работы капчи мне были неинтересны.

На данный момент готовых решений CAPTCHA существует великое множество, среди которых масса тщательно оттестированных и защищённых от всех существующих способов обхода реализаций.

Поэтому созданием самописок уже давно никто не занимается.

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

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

Обычный чекбокс с надписью «Я не робот» или генерация математического примера показались мне слишком простыми в плане реализации, поэтому я решил остановиться на самом сложном — графической капче, для решения которой нужно правильно ввести символы, изображённые на картинке.

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

Для генерации картинок на PHP уже, конечно же, существует масса готовых библиотек и решений. Из-за них, кстати, о функциях PHP для работы с изображениями мало кто в курсе, т.к. всем нужно всё делать побыстрее, для чего библиотеки как раз и создаются :-)

В силу приведённых причин я и решил «изобрести очередной велосипед» для реализации графической капчи, кодом которого с вами и хочу поделиться. Он доступен в репозитории данного урока в каталоге image_captcha.

Вообще-то, слово «изобрести» в моём случае тоже не совсем подходит, т.к. за основу я взял существующую реализацию с Хабра — https://habrahabr.ru/post/120615/, структурировав её код, убрав некоторые ошибки, переделав непонравившиеся мне моменты и добавив свои наработки.

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

HTML код элемента CAPTCHA для интеграции капчи на форму будет следующий:

<p>
    <img src='/captcha.php' id='captcha-image'>

    <a href="javascript:void(0);" onclick="document.getElementById('captcha-image').src = 'captcha.php';">
        Обновить капчу
    </a>
</p>

Его нужно добавить в нужное место вашей HTML формы на сайте. В моём примере он будет располагаться после textarea name=»comment».

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

Сперва я прописал генерацию символьной последовательности и самой картинки сплошным кодом, но потом решил его немного структурировать путём создания класса CaptchaValue с соответствующими методами. В итоге, captcha.php принял следующий вид:

<?php

include('classes' . DIRECTORY_SEPARATOR . 'CaptchaValue.php');

$captcha = new CaptchaValue();
$captcha_code = $captcha->generate_code();
$captcha->captcha_image($captcha_code);

При проектировании класса использовался интерфейс, содержащийся в файле CaptchaInterface.php, поэтому не забудьте добавить его на сервер, чтобы PHP не выдавал ошибки:

<?php

interface CaptchaInterface
{
	public function session_write($code);
	public function generate_code();
}

Файлы классов и интерфейса я вынес в отдельный каталог ‘classes’, который размещён на уровень ниже form.html и других файлов, расположенных в корне, поэтому либо сделайте как я, либо исправьте пути к файлам классов везде, где они подключаются в коде через PHP директиву include.

Сам класс CaptchaValue, код которого расположен в CaptchaValue.php, выглядит так:

<?php

include('CaptchaInterface.php');

class CaptchaValue implements CaptchaInterface
{
    private $font_dir = '';

    public function __construct()
    {
        $this->font_dir = $_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . 'fonts' . DIRECTORY_SEPARATOR;
    }

    public function session_write($code)
    {
        session_start();
        
        $_SESSION['captcha_value'] = md5(md5($code));
        $_SESSION['answer_time'] = strtotime(date('d-m-Y H:i:s'));
    }

    public function generate_code()
    {
        $chars = 'abcdefghijklmnopqrstuvwxyz0123456789';
        $length = rand(4, 6);
        $numChars = strlen($chars);

        $str = '';
        for ($i = 0; $i < $length; $i++)
        {
            $str .= substr($chars, rand(1, $numChars) - 1, 1);
        }

        $array_mix = preg_split('//', $str, -1, PREG_SPLIT_NO_EMPTY);
        srand((float) microtime() * 1000000);
        shuffle($array_mix);

        $result = implode("", $array_mix);
        $this->session_write($result);

        return $result;
    }

    public function captcha_image($code)
    {
        $image = imagecreatetruecolor(150, 70);
        imagesetthickness($image, 2);

        $background_color = imagecolorallocate($image, rand(220, 255), rand(220, 255), rand(220, 255));
        imagefill($image, 0, 0, $background_color);

        $linenum = rand(3, 5);
        for ($i = 0; $i < $linenum; $i++)
        {
            $color = imagecolorallocate($image, rand(0, 150), rand(0, 100), rand(0, 150));
            imageline($image, rand(0, 150), rand(1, 70), rand(20, 150), rand(1, 70), $color);
        }

        $font_arr = array_values(array_diff(scandir($this->font_dir), array('.', '..')));
        $font_size = rand(20, 30);
        $x = rand(0, 10);

        for ($i = 0; $i < strlen($code); $i++)
        {
            $x += 20;
            $letter = substr($code, $i, 1);
            $color = imagecolorallocate($image, rand(0, 200), 0, rand(0, 200));
            $current_font = rand(0, sizeof($font_arr) - 1);

            imagettftext($image, $font_size, rand(-10, 10), $x, rand(50, 55), $color, $this->font_dir . $font_arr[$current_font], $letter);
        }

        $pixels = rand(2000, 4000);
        for ($i = 0; $i < $pixels; $i++)
        {
            $color = imagecolorallocate($image, rand(0, 200), rand(0, 200), rand(0, 200));
            imagesetpixel($image, rand(0, 150), rand(0, 150), $color);
        }

        for ($i = 0; $i < $linenum; $i++)
        {
            $color = imagecolorallocate($image, rand(0, 255), rand(0, 200), rand(0, 255));
            imageline($image, rand(0, 20), rand(1, 50), rand(150, 180), rand(1, 50), $color);
        }

        header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
        header("Last-Modified: " . gmdate("D, d M Y H:i:s", 10000) . " GMT");
        header("Cache-Control: no-store, no-cache, must-revalidate");
        header("Cache-Control: post-check=0, pre-check=0", false);
        header("Pragma: no-cache");
        header("Content-type: image/png");

        imagepng($image);
        imagedestroy($image);
    }
}

Здесь без комментариев не обойтись, т.к. мы рассматриваем самый главный класс всего приложения.
Расскажу конкретно о каждом методе, начиная с самого главного, в котором происходит вся магия, — captcha_image().

Генерировать изображение капчи на PHP я решил следующим образом:

  • создаём изображение в памяти без сохранения на жёсткий диск;
  • задаём ему цвет фона;
  • наносим символы капчи, задавая им цвет, отличный от фона, и разные шрифты;
  • слегка поворачиваем символы под разными углами;
  • с целью усложнения распознавания капчи ботами наносим линии под символами и поверх них;
  • добавляем шум.

Теперь более подробно о функциях PHP для работы с изображениями, с помощью которых я реализовал задуманное.

За создание объекта изображения отвечает PHP функция imagecreatetruecolor(), которой я в качестве параметров передал размеры генерируемой картинки. В моём случае ширина изображения 150px и высотой 70px.

Сперва я попробовал использовать imagecreate(), но в данном варианте при каждой генерации изображения цвет фона принимал случайное значение, которое иногда плохо сочеталось с цветом символов, делая их нечитабельными. При использовании imagecreatetruecolor() цвет фона можно задавать.

Далее я указал толщину будущих наносимых линий с помощью imagesetthickness(), задав её 2 пикселя.

Для задания фона изображения я использовал PHP функцию imagefill(), в качестве аргумента которой был указан цвет, сгенерированный с помощью imagecolorallocate(). Цвет фона, как вы видите, динамический, т.е. каждый раз задаётся случайно.

Диапазоны цветовых каналов я подобрал таким образом, чтобы итоговый цвет был достаточно светлым, и символы капчи на нём были различимы.

Чтобы создать линии, которые будут под символами капчи, логично их нарисовать перед созданием самих символов. Поэтому это я и сделал с помощью функции PHP для рисования линий imageline(), у которой в качестве аргументов указаны координаты точек начала и конца каждой из них.

Значения также случайны, чтобы линии постоянно находились в различных местах. Так же случаен цвет каждой из них и их количество (в моём примере от 3 до 5 — больше делать не советую, т.к. будут ещё линии поверх символов).

Далее идёт посимвольная прорисовка строки $code, которая генерируется функцией generate_code() и передаётся в качестве аргумента в captcha_image().

Генерация самой случайной символьной последовательности происходит так:

  1. задаём строку символов, из которых будет состоять наша итоговая последовательность;
  2. из неё выбирается случайное количество символов (от 4 до 6 в моём случае);
  3. символы для верности ещё раз перемешиваются;
  4. полученная строка записывается в сессию методом session_write() в переменную $captcha_value, где попутно фиксирует время генерации PHP капчи в переменной $answer_time для дальнейшей проверки времени её ввода пользователем;
  5. функция возвращает итоговую строку символов для дальнейшего использования.

Теперь вернёмся снова в image_captcha() к циклу прорисовки символов случайной строки:

$font_arr = array_values(array_diff(scandir($this->font_dir), array('.', '..')));
$font_size = rand(20, 30);
$x = rand(0, 10);

for ($i = 0; $i < strlen($code); $i++)
{
    $x += 20;
    $letter = substr($code, $i, 1);
    $color = imagecolorallocate($image, rand(0, 200), 0, rand(0, 200));
    $current_font = rand(0, sizeof($font_arr) - 1);

    imagettftext($image, $font_size, rand(-10, 10), $x, rand(50, 55), $color, $this->font_dir . $font_arr[$current_font], $letter);
}

Для прорисовки символов я решил воспользоваться различными шрифтами. Они должны быть в виде ttf файлов, и для них был создан отдельный каталог, путь к которому задаётся в виде private свойства класса CaptchaValue font_dir. Значение его задаётся в конструкторе.

Итак, получаем список файлов из указанной директории с помощью PHP scandir() и записываем результаты в массив $font_arr. В переменной $font_size у нас будет храниться случайно сгенерированное значение размера шрифта, а в $x — случайное значение, которое будет использоваться для вычисления позиции символов нашей строки на изображении.

Итак, сам цикл, где происходит перебор всей сгенерированной случайной строки, которую мы отрисовываем.

Первая же строка цикла $x += 20; вычисляет положение текущего символа на изображении. Если хотите расположить символы ближе/дальше друг от друга, то изменения стоит вносить в данную строку. Можете даже сделать шаг случайным значением, но тогда есть вероятность, что символы будут попросту перекрывать друг на друга.

На следующей строке мы выбираем символ из строки, далее заново генерируем для него цвет и получаем идентификатор шрифта в массиве для получения доступа к нему.

Наносим символ на изображение с учётом всех полученных до этого данных PHP функцией imagettftext(), которая позволяет делать это с применением ttf шрифтов, что, отражает её название.

О назначении каждого её параметра можете прочитать в официальной документации PHP, я же хочу обратить внимание на третий, которому я указал значение rand(-10, 10).

Это — угол поворота символа. Если хотите, чтобы все были строго вертикальными, то укажите вместо моих данных 0, но не рекомендую, т.к. эта, с виду, простая мера способна усложнить жизнь хакерам и создаваемым ими ботам.

Рассмотрим оставшийся код метода captcha_image().

После нанесения строки на изображение, следуя алгоритму генерации капчи, следует нанесения шума на полученное промежуточное изображение. Я решил сделать это после прорисовки символов, т.к. он позволяет сделать в буквах своеобразные «дыры», что ещё больше усложнит распознавание капчи OCR.

Сперва мы генерируем число точек, которыми будем создавать шум (в моём случае их будет от 2000 до 4000, что для картинки 150х70 в самый раз).

Затем генерируем цвет каждой точки заново (без этого можно обойтись, задав всем одинаковый, например, белый) и наносим её на изображение с помощью стандартной PHP функции imagesetpixel().

После данного преобразования я ещё раз наношу линии уже поверх нарисованных символов описываемым ранее способом: в цикле по количеству линий с помощью функции PHP imageline(). Цвет каждой снова генерируется случайным образом.

Всё, картинка готова.

Осталось только вывести её на экран в окне браузера с помощью PHP функции imagepng(), для чего браузеру передаются соответствующие заголовки с помощью PHP header(), и очистить память сервера от изображения, которое мы генерировали, с помощью PHP imagedestroy().

В итоге, у нас получилось сделать капчу, которая выглядит следующим образом:

graficheskaya-kapcha-na-php-svoimi-rukami

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

За генерацию отвечает класс CaptchaField, описанный в скрипте classes/CaptchaField.php, а именно его метод generate_code(), который вызывается в главном файле, запускающем всю реализацию как самостоятельный сайт, index.php:

<?php

include('classes' . DIRECTORY_SEPARATOR . 'CaptchaField.php');

$captcha_field = new CaptchaField();
$captcha_code = $captcha_field->generate_code();

include_once('form.html');

Как видите, сгенерированное значение записывается в переменную $captcha_code, которая затем выводится в HTML коде нашей формы комментариев вместо имени поля для ввода капчи:

<p>
    <span>Введите капчу:</span>
    <input type="text" name="<?php echo $captcha_code; ?>">
</p>

Сам класс CaptchaField выглядит следующим образом:

<?php

error_reporting(E_ERROR);

include('CaptchaInterface.php');

class CaptchaField implements CaptchaInterface
{
    public function session_write($code)
    {
        session_start();
        $_SESSION['captcha_field'] = $code;
    }

    public function generate_code()
    {
        $captcha_field = md5(md5(uniqid('', true) . date('His')));
        $this->session_write($captcha_field);

        return $captcha_field;
    }

}

Прежде всего я отключил сообщения об ошибках типа warning, notice и прочих, с которыми скрипт будет работать, но они будут присутствовать в выводе результатов, т.е. в имени поля капчи мы их увидим, что совсем не нужно.

Поскольку данный класс реализует интерфейс CaptchaInterface, то должен переопределять его методы generate_code() и session_write().

В данном классе, как и в случае CaptchaValue, они отвечают за генерацию кода и запись его в сессию, соответственно. Только код в данной ситуации у нас другой.

Для генерации имени поля для ввода капчи я решил использовать PHP функцию uniqid для генерации случайного идентификатора. Первый параметр функции пустой, т.к. я решил обойтись без строчного префикса, а второй — true, что добавляет энтропию для увеличения уникальности значения и удлиняя его до 23 символов вместо 13.

Ну, и для большей секьюрности я решил ещё дополнительно применить двойное md5 шифрование. В результате, метод generate_code() класса CaptchaField вернёт следующее значение, предварительно записав его в переменную сессии captcha_field:

graficheskaya-kapcha-na-php-pole-vvoda-captcha

Итак, сама PHP CAPTCHA и сгенерированное имя поля для её ввода готовы.

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

За проверку, как и в случае реализации Google noCAPTCHA reCAPTCHA, которая была приведена выше, отвечает серверный скрипт verify_captcha.php.

Поскольку я решил структурировать данную реализацию путём создания классов, то verify_captcha.php выглядит так:

<?php

include('classes' . DIRECTORY_SEPARATOR . 'CaptchaVerify.php');

$captcha_verify = new CaptchaVerify();
$captcha_verify->verify_code();

Сам же класс CaptchaVerify выглядит следующим образом:

<?php

class CaptchaVerify
{

    private $captcha_value = '';
    private $captcha_field = '';
    private $answer_time = '';

    private function session_read()
    {
        session_start();
        
        $this->captcha_value = $_SESSION['captcha_value'];
        $this->captcha_field = $_SESSION['captcha_field'];
        $this->answer_time = $_SESSION['answer_time'];

        unset($_SESSION['captcha_value']);
        unset($_SESSION['captcha_field']);
        unset($_SESSION['answer_time']);
    }

    private function error_msg($message)
    {
        $_SESSION[$_SERVER['REMOTE_ADDR']] ++;
        exit($message);
    }

    public function verify_code()
    {
        $this->session_read();

        if (isset($_SESSION[$_SERVER['REMOTE_ADDR']]) && $_SESSION[$_SERVER['REMOTE_ADDR']] >= 10)
            $this->error_msg('Вы ввели слишком много неверных капчей! Обратитесь за помощью к администратору admin@admin.net');

        if (isset($_POST['submit_form']) && !empty($this->captcha_value) && !empty($this->captcha_field) && !empty($this->answer_time))
        {
            $this->current_time = strtotime(date('d-m-Y H:i:s'));

            if ($this->current_time - $this->answer_time < 6)
                $this->error_msg('Вы или робот или вводите капчу слишком быстро!');
            if ($_POST[$this->captcha_field] == '')
                $this->error_msg('Робот, уходи!');

            if (md5(md5($_POST[$this->captcha_field])) == $this->captcha_value)
                echo 'Капча пройдена успешно!';
            else
                $this->error_msg('Неверная капча!');
        }
        else $this->error_msg('Хакер, уходи!');
    }
}

Главным его методом является verify_code(), который и вызывается в verify_captcha.php.

В нём сперва происходит чтение данных из сессии (сгенерированного значения капчи и поля для её ввода, а также время генерации картинки CAPTCHA на сервере), а затем происходят проверки на содержание в сессии соответствующих значений и наличие среди параметров запроса имени submit кнопки формы, что свидетельствует о том, что пользователь вводил код через форму вручную, а не программно.

Далее мы вычисляем время, потраченное пользователем на ввод капчи на основании текущего времени в момент проверки введённого значения и времени генерации капчи. Если оно меньше 6 секунд, то с большой вероятностью капчу вводили программно без соблюдения таймаутов.

Поэтому в таком случае скрипт завершается с соответствующим сообщением об ошибке «Вы или робот или вводите капчу слишком быстро!». Кстати, данный текст подскажет реальным пользователям, которые вводят PHP CAPTCHA слишком быстро, делать это медленее, чтобы их старания были засчитаны.

Ну, а затем мы проверяем введённое значение капчи из запроса с тем, которое было сгенерировано изначально и записано в сессию. Поскольку перед записью в сессию значение шифровалось, то мы то же самое делаем и со значением пользователя, после чего сравниваем их.

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

Во всех остальных случаях выдаются сообщения об ошибке с соответствующими текстами с помощью функции error_msg(), которая помимо завершения выполнения скрипта ещё и фиксирует в сессии попытку неверного ввода по IP клиента.

Если таковых наберётся больше 10, то выполнения действия невозможно будет даже при правильном вводе капчи. Для разблокировки нужно будет написать администратору, чтобы тот сбросил счётчик.

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

Поэтому на практике используйте вариант с БД. В сессию запись была сделана в качестве демонстрации данной возможности.

Или вообще можете отказаться от данного способа защиты капчи от взлома, если считаете его слишком жёстким. Всё в ваших руках :-)

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

Надеюсь, я ответил на вопрос о том, как сделать капчу на PHP. Причём поделился с вами аж двумя вариантами.

Честно скажу, что реализованная мною графическая капча не является бронебойной и 100% защиту от всех современных способов взлома не предоставляет. Повторюсь, мне была интересная её реализация только с точки зрения практического применения способов защиты от обхода капчи и хотелось вспомнить возможности PHP для работы с изображениями.

Своей цели я достиг. А если ещё и смог быть вам полезным своим трудом — для меня будет вдвойне приятно :-)

Если вы планируете устанавливать капчу на реальный проект, то рекомендую воспользоваться всё-таки готовыми и оттестированными решениями. Той же самой Google reCAPTCHA, порядок установки которой описан в первой части статьи.

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

Поэтому пишите свои отзывы в комментариях под статьёй: что понравилось, что не понравилось, что можно улучшить.

Очень надеюсь на вашу помощь и поддержку.

До новых встреч :-)

Обход капчи: 10 способов

kak-obojti-kapchuВсем привет! :-)

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

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

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

Перед тем, как мы начнём, хочу заявить, что я не имею никакого отношения к хакерству и все публикуемые материалы собирались и были размещены исключительно из научного интереса, чтобы вам и мне было понятно, как работает CAPTCHA и какие слабые места в ней есть с целью обезопасить себя и других пользователей Интернет.

Я хочу призвать и вас использовать приведённую информацию исключительно в образовательных целях, а также при разработке сайтов и собственных реализаций капчи, учитывая все описанные в статье слабые места, через которые и происходит взлом.

И в завершение вступления хочу напомнить вам пословицу «Знание — сила» и слова дяди Питера Паркера (больше известного как «Человек-паук») — «Чем больше сила, тем больше ответственность».

Следовательно, чем больше у вас знаний, тем больше должно быть ответственности при их использовании.

Очень надеюсь на ваше понимание и применение приведённой далее информации в благих целях.

Поехали!

Как обойти капчу?

Как выяснилось — не так уж и сложно. Для обхода капчи, как и для других современных киберпреступлений, на данный момент есть целых два пути:

  1. использование особенностей реализации CAPTCHA и их слабые места;
  2. применение современных технологий.

Что касается способов обхода капчи и атак на сайты в целом, то их существует три основных направления:

  • ручной взлом CAPTCHA (хакер изучает конкретную реализацию капчи и подбирает способы её взлома);
  • использование специальных программ (роботов), с помощью которых организовываются массовые автоматизированные атаки на несколько сайтов одновременно (как правило, разработанных на одной платформе или имеющих одинаковые капчи, к которым удалось подобрать «ключи» хакерам);
  • эксплуатация труда реальных людей.

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

Как правило, все массовые обходы капчи начинаются со взломов вручную. Происходит это, как правило, на заказ или из научного интереса, и такие атаки нацелены на конкретные реализации CAPTCHA.

А потом уже ставятся на поток, т.е. организовываются автоматически с применением программ-роботов (ботов).vvod-kapchi-avtomatom

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

Итак, с инструментами и мотивами хакеров разобрались. Давайте теперь рассмотрим самые распространённые способы обхода капчи, рассортировав их на две группы: те, которые возможны благодаря ошибкам программистов при реализации CAPTCHA и те, для которых используются современные технологии.

Начнём по порядку, и я постараюсь их разместить в порядке возрастания сложности защиты от них, начав с самых примитивных и заканчивая теми, от которых ещё не придумали способов защиты.

Для создания интриги скажу, что их на данный момент существует целых три.

Обход капчи из-за ошибок реализации

Если спросить у создателей собственных реализаций CAPTCHA о том, как обойти капчу, они назовут вам, как минимум несколько способов. Но, самое интересное, что они сами же порой оставляют в своих творениях окна и двери для их взлома.

Происходит это зачастую по вине человеческого фактора, а точнее обычной невнимательности при разработке и недостаточной тщательности при тестировании безопасности капчей.

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

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

Обход капчи с фиксированным набором задач

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

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

Т.е. заходим на такой сайт, подбираем ответы, составляем БД из заданий и правильных решений и пишем бота для брутфорс атак, который будет подбирать подходящие варианты.

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

А если такие люди и есть, то они очень быстро учатся на своих ошибках, когда теряют контроль над своим сайтом или клиентов, которых из-за таких творений взламывали.

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

kak-vzlomat-kapchuЕщё одним способом защиты от подобного ввода капчи автоматом является изменения имени поля формы, в которое должен вводиться ответ. Если имя поля, например, всегда будет «captcha», то злоумышленнику будет проще такую капчу взломать. Его программа-робот будет всего лишь отправлять запрос к серверному скрипту, указанному в HTML атрибуте «action» формы, содержащем необходимое значение капчи.

Если в этой ситуации имя поля капчи будет всё время одинаковым, то хакер просто воспользуется базой наиболее распространённых названий полей капчи, составить которую можно самостоятельно при изучении различных сайтов или скачать в готовом виде на специализированных ресурсах (перечислять их для пропаганды хакерства я не буду).

Если же имя поля, как и само задание для прохождения капчи будет генерироваться на сервере, то никакая база имён капчи не поможет. Для того, чтобы использовать динамическое название поля, на практике капча генерируется одним скриптом, а обрабатывается другим.

В данном случае реализации капчи имеется один существенный нюанс: скрипту, обрабатывающему правильность её ввода, нужно будет как-то передавать имя поля капчи. Делается это чаще всего с помощью скрытого input формы, data-атрибутов или передаче их через cookies или сессию.

Ключевым моментом является то, что нельзя передавать имя напрямую, т.е поле капчи называется «captcha_mysite», а в hidden поле стоит значение «captcha_mysite» или «site». Оно обязательно должно быть зашифровано, причём расшифровка должна происходить с применением того же алгоритма, что и шифрование.

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

Кстати, достаточно вместо имени поля использовать случайную последовательность символов, которую в языке PHP очень просто получить с помощью функции uniqid().

Обход капчи с помощью сессий

Если реализация капчи подразумевает хранение правильного ответа в сессии, и сессия не создаётся заново после каждого ввода капчи, то злоумышленники могут узнать идентификатор сессии и узнать зашифрованное значение CAPTCHA.

Таким образом, они с лёгкостью смогут подобрать алгоритм шифрования и использовать его для дальнейших автоматизированных брутфорс атак с помощью ботов.

Также, если в коде проверки ответа пользователя на сервере программист не выполнит проверку на пустоту переменной сессии, в которой передаётся ответ пользователя, то хакер может использовать несуществующий идентификатор сессии, для которой переменной просто не будет существовать.kak-projti-kapchu

За счёт этого упущения подобные капчи могут быть пройдены с помощью подсовывания несуществующих id сессий и пустых значений капчи.

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

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

Взлом капчи из-за секретной информации в клиентском коде

Иногда капчи делают таким образом, что при передаче пользовательских значений на сервер используют шифрование с использованием так называемой «соли», т.е. добавления к значению CAPTCHA ID сессии, значения IP или других уникальных данных. Нередко таковым может являться простая случайная последовательность символов.

И главным условием решения капчи является совпадение зашифрованного значения CAPTCHA, введённого пользователем, с её правильным значением, которое было сгенерировано при открытии страницы и записано в сессию или другое хранилище для дальнейшей передачи на сервер.

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

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

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

Защита: при реализации CAPTCHA самостоятельно нужно учитывать данную брешь в безопасности и, если для разгадывания капчи необходимо будет учитывать значение какого-то уникального идентификатора, то нужно следить, чтобы его упоминания не было ни в JS, ни в HTML коде, который можно просмотреть в браузере.

Также нужно пересоздавать ID сессии и генерировать другие уникальные значения (включая и саму CAPTCHA, если это возможно) после каждой попытки ввода капчи, что убережёт вас или, по крайней мере, усложнит задачу хакерам по взлому сайта путём автоматического подбора правильного значения.

Ещё одно средство защиты — по возможности, блокировать действия по IP и количествам попыток.

Как обойти капчу без изменения IP

Брутфорс атака является эффективным способом обхода капчи не только в случаях реализации её с фиксированным набором заданий и их решений.

obkhod-kapchi-avtomatomЕщё одна ошибка при реализации CAPTCHA, которая делает её уязвимой для автоматизированных атак, это — отсутствие ограничений времени на решение капчи и количество попыток.

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

Защита: при реализации по-настоящему безопасной капчи нужно лимитировать время на ответ и количество попыток решения капчи с одного IP для блокирования брутфорс атак роботов.

К примеру, если между генерацией капчи и ответом пользователя прошло менее 2 секунд, то считать такого пользователя роботом с выдачей соответствующего сообщения на экран. Текст сообщения должен содержать указания реальным пользователям, что ввод не должен производиться так быстро (на случай, если человек физически смог ввести ответ быстрее).

Если это действительно был человек, то он примет соответствующие меры, а если робот — он продолжит предпринимать попытки обхода капчи.

Такие попытки нужно считать неверными с фиксацией их количества в переменной сессии и блокировании дальнейших действий для пользователей по их IP. Будет не лишним также для таких заблокированных адресов выдавать вместо капчи сообщение связаться с администратором в случае, если заблокированный пользователь был реальным человеком.

И ещё одним эффективным способом борьбы с ботами является введение лимитов на определённые действия на сайте. К примеру, одна регистрация с одного IP. Здесь главное — не заигрываться и не доходить до лимитов на количество комментариев для одного уникального пользователя.

Но, по правде говоря, эти меры мало чем помогут благодаря существованию прокси серверов.

Обход капчи с помощью прокси

Даже в ситуациях, когда блокирование большого количества попыток решения капчи по IP всё-таки происходит, 100% защиту от роботов это мероприятие не обеспечивает.

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

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

Схема проста: пользователь подключается к прокси серверу, где его данные шифруются или подменяются другими (например, вам может быть присвоен IP адрес другой страны), а затем происходит запрос на целевой сайт, к которому клиент желает подключиться.

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

А на некоторых сайтах, где капча появляется только лишь при выполнении большого количества одинаковых действий (например, в ВК при добавлении большого количества друзей) она вообще может не появиться, если каждое действие будет производиться с нового IP и с соблюдением таймаутов между попытками решения капчи, чтобы поведение бота было похоже на поведение реального человека.

Данный способ использовали ещё полвека назад при написании первых программ с целью прохождения теста Тьюринга, реализацией которого и является CAPTCHA.

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

Защита: к сожалению, защититься от взлома капчи, отслеживая злоумышленников по IP, благодаря наличию анонимайзеров и открытых баз PROXY никак не удастся.

Единственная надежда, что сами PROXY сервера могут вводить ограничения на количество используемых IP одним пользователем и количеств подключений с каждого из них.

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

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

Ввод капчи автоматом с помощью эмуляторов действий

Если для прохождения CAPTCHA нужно произвести определённое действие (нажатие на кнопку, перемещение ползунка и т.д.), то обойти капчу в данной ситуации можно ещё и сэмулировав необходимое действие (клик на определённый элемент управления или иное действие).

kak-obojti-kapchu-avtomatomЕдинственная проблема, которая может стоять в данной ситуации перед хакером — это как найти нужный элемент управления на сайте программно.

Проще всего это сделать по его координатам или положению относительно каких-то статических элементов ресурса.

Защита: чтобы уберечься от автоматического ввода капчи в данном случае необходимо постоянно менять положение элемента управления, позволяющего решить CAPTCHA. Т.е. если из трёх человечков нужно выбрать только того, у которого поднята рука, его ни в коем случае нельзя размещать постоянно на одном и том же месте.

Ну, а в случаях других реализаций капчи, когда это невозможно (например, для кнопки скачивания или поля «я не робот», у которых может быть только один правильный ответ), необходимо использовать иные методы защиты, способные остановить роботов от автоматического решения капчи.

Как обойти капчу при помощи высоких технологий

Слабые места реализаций CAPTCHA, которые являются дырами в безопасности и встречаются на практике наиболее часто, мы рассмотрели. Однако, на практике даже самые безупречные капчи порой не способны защитить ресурс, их использующий, от атак хакеров.

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

Итак, как избежать капчу при помощи современных технологий?

Обход капчи с помощью OCR

OCR (Optical Character Recognition — оптическое распознавание символов) — технология для распознавания печатного или машинописного текста для дальнейшего его использования в электронном формате. Наиболее известным ПО, реализующим эту технологию, является Adobe FineReader.

Успешно используется при создании программ автоматического ввода капчи, успешно распознающих и решающих графические капчи, для прохождения которых нужно ввести последовательность символов, изображённых на картинке.kak-izbezhat-kapchu

Хакеры, естественно не пользуются Adobe FineReader (хотя, может, и такие есть :-) ), а пишут специальные скрипты, которые с применением различных готовых библиотек для работы с изображениями либо с использованием возможностей языка для работы с графикой, распознают капчу и выдают символьную последовательность, изображённую на ней.

В Интернете я нашёл достаточное количество примеров таких скриптов. Принцип их работы заключался в следующем:

  • очищение изображения, используемого в графических CAPTCHA, от различных шумов;
  • разбиение изображённой строки на отдельные символы;
  • сравнение каждого из них с заготовленной картинкой (образцом).

Графические образцы подготавливались с учётом различных шрифтов и возможных искажений (наклоны, повороты и т.д.).

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

Защита: собственно говоря, с целью запутывания OCR программ и применяются всех раздражающие шумы и искажения символов на картинках, из-за которых текст иногда сложно разобрать даже человеку. Но, в случае роботов это тоже хорошо работает, в результате чего OCR алгоритмы не могут выдать 100% точный результат, что положительно влияет на безопасность капчи и сайтов, её использующих.

Если вы решили использовать графические капчи, для прохождения которых нужно ввести символы, изображённые на картинке, то нужно следовать следующим рекомендациям:

  1. Символы на разных CAPTCHA должны иметь различные координаты.
  2. Если вы используете какие-то эффекты шума для создания фона, то его цвет должен совпадать с цветом символов, иначе фон можно легко убрать, выделив символы для распознавания.
  3. Расстояние между символами должно быть минимально. Можно даже накладывать их друг на друга, но только без фанатизма, чтобы реальные пользователи могли их распознать.
  4. Использовать различные шрифты, чтобы было сложно подобрать подходящий для распознавания.
  5. Всячески искажать символы, менять их начертание и толщину.
  6. Использовать специальные библиотеки, позволяющие изменять символы таким образом, что для их программного распознания будет невозможно подобрать шрифт. Примером такого решения является капча от создателя ресурса captcha.ru, при генерации которой используется авторский алгоритм волнообразного искажения символов.

Все эти меры позволяют усложнить распознаваемость графической капчи для OCR систем и сократить количество автоматических вводов капчи.

Как пройти капчу с помощью нейронных сетей

Если OCR — технология достаточно старая (первые запатентованные устройства известны в начале XX века), то искусственные нейронные сети (ИНС) появились лишь во второй половине предыдущего столетия (для технологий 50 лет — это существенный возраст :-) ).

programmy-dlya-obkhoda-kapchiИменно алгоритмы ИНС лежат в основе искусственного интеллекта (ИИ), целью которого является создание программ и устройств, наделённых творческими функциями, т.е. создание рукотворного человека.

На данный момент ИИ постоянно развивается, и с каждым днём появляются всё новые и изобретения, обладающими не виданными ранее свойствами.

На последней конференции, посвящённой нейронным сетям, на которой я присутствовал, сообщалось, что компания Google, активно занимающаяся разработками в данной области, уже анонсировала общедоступные облачные сервисы, работающие на базе ИНС.

С помощью их можно:

  • распознавать объекты на фотографиях (от пола изображённого человека и марки его джинсов до того, какой игре принадлежит анализируемая картинка, со всей её цветовой палитрой, названием локации и того, что на ней происходит);
  • управлять устройствами голосом и жестами;
  • писать аннотации к видео на основании того, что происходит в видеоролике и др.

Естественно, что при данных возможностях создание программы для автоматического ввода капчи с применением принципов ИНС не представляет сложности для знающих людей.

Один из таких продуктов был разработан компанией Vicarious в 2014 году. Разработанная ей нейронная сеть способна распознавать капчу в 90% случаях (напомню, что для решения классического теста Тьюринга, которым и является CAPTCHA, необходим всего лишь 1% правильных ответов).

Защита: К сожалению, защититься от данного вида атак невозможно. И к счастью, ИНС от Vicarious не будет использоваться для целенаправленных атак для обхода капчи на сайтах, т.к. она слишком дорогостоящая для таких мелких задач (сами производители говорят, что она представляет из себя кластер из множества серверов). Основная её область применения — это решение различных задач медицины и робототехники.

А взлом капчи с её помощью — это лишь демонстрация возможностей.

Но время идёт, дорогостоящие ещё вчера технологии удешевляются, и не за горами то время, когда ИНС продукты получат повсеместное распространение. Поэтому вполне возможно, что в будущем появятся боты для автоматического ввода капчи, наделённые искусственным интеллектом.

Обход капчи с помощью общедоступных сервисов

По мере развития систем OCR и ИИ меры усложнения графических капчей становились всё сложнее и сложнее, что позволяло их разработчикам прилагать колоссальные усилия при реализации. Но всё равно они оказывались тщетными, т.к. они не обеспечивали 100% защиту сайтов от автоматизированных атак.

Поэтому Google пошёл, как мне кажется, верным путём и решил просто изобрести новый стандарт noCAPTCHA, отказавшись от ручного ввода символов с картинок.programma-dlya-vvoda-kapchi-avtomatom

При разработке reCAPTCHA noCAPTCHA использовался опыт по борьбе с роботами в эпоху зарождения капчи и современные наработки в области искусственного интеллекта, что позволяет обеспечить должный уровень безопасности сайта, но и не сильно усложнять при этом жизнь пользователям Интернета.

Но, несмотря на то, что данный стандарт появился достаточно недавно, в 2015 году, уже найден способ её автоматического решения. И он заключается далеко не в применении искусственного интеллекта.

Всё намного банальней — для прохождения Google reCAPTCHA достаточно использовать сервисы самого Google по распознаванию картинок и речи.

Распознавание картинок в случае с reCAPTCHA v2 (та самая noCAPTCHA) вряд ли поможет, т.к. при графических задачах нужно выбирать изображения, на которых присутствуют необходимые объекты, а не вводить изображённые символы, как это было в предыдущей версии.

А вот услуги сервиса Google Speech Recognition, являющийся одним из достижений Гугл в области искусственного интеллекта, о которых упоминалось в предыдущем способе обхода капчи, будет очень кстати. Поскольку сервис предоставляет API, то создать приложение на его базе не составляет труда.

Защита: к сожалению, в данной ситуации, как и в предыдущей, где для обхода капчи использовались ИНС, защититься от обхода капчи не удастся. Единственным положительным моментом снова является относительная доступность подходящих сервисов, т.к. Google даёт для их использования только тестовые $300.

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

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

Как пройти капчу, используя человеческий труд

В завершение списка способов обхода капчи я решил рассмотреть не подходящий ни к одной из перечисленных выше категорий.

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

И в то же время, данный способ помогает взломать капчу любой сложности в 100% случаях и, причём, сделать это без особых финансовых, физических и моральных усилий.

Речь идёт об одном из современных способов добычи денег — заработке на вводе капчи, который появился, кстати, примерно тогда, когда CAPTCHA стала сложно распознаваемой программно.

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

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

В основном, это хакеры, которые используют ответы реальных пользователей в своих корыстных целях:

  • автоматизации заработка;
  • рассылка спама;
  • скупка билетов и товаров в Интернет магазинах для более дорогой перепродажи;
  • взлом сайтов и т.д.

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

Многие умельцы в области программирования, кстати, могут использовать человеческий труд абсолютно бесплатно. Например, так зарабатывают себе на хлеб владельцы порносайтов, файлообменников, торрентов и прочих сомнительных ресурсов, предоставляющих бесплатные услуги.

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

Естественно, мы долго не думаем, т.к. получить возможность скачать долгожданный фильм в HD качестве абсолютно бесплатно за проставление какой-то галочки в поле «Я не робот» — это просто мелочь. А в это время ваше действие по API используется для обхода капчи на другом стороннем сайте.

Отсюда мораль: всегда помните, что бесплатный сыр только в мышеловке и ничего бесплатного не бывает.

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

Обход капчи — выводы

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

Если от автоматизированных обходов капчи, использующих слабые места реализаций CAPTCHA ещё можно уберечься, устранив все проблемы с их безопасностью, то от ввода капчи реальными пользователями за деньги защититься просто невозможно.obkhod-kapchi-avtomatom-programmno

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

Также к «непобедимым» способам обхода капчи относятся технологии искусственного интеллекта, активно развивающиеся в последние годы.

При этом, с целью усложнить жизнь хакерам, капчи постоянно «раздуваются» новым функционалом, из-за которого их прохождение становится сложной и утомительной задачей даже для реальных пользователей сайтов.

Вспомнить ту же Google reCAPTCHA: поставь галочку, если Гуглу что-то не понравилось, выбери ещё и нужные картинки (с дорожными знаками, кстати, у меня до сих пор наблюдаются проблемы, т.к. я могу пройти такое задание где-то с 5 попытки). Не много ли возни для того, чтобы оставить комментарий или зарегистрироваться на сайте? Проще уже найти другой ресурс…

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

В то же время тот факт, что CAPTCHA продолжает использоваться в качестве технологии киберзащиты и постоянно развивается, в том числе компанией Google, которая не станет инвестировать деньги в сомнительные проекты, говорит о том, что данная технология будет существовать ещё долго.

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

И не забывать делиться своими соображениями по поводу существующих способов обхода капчи и мер защиты от них в комментариях под статьёй :-)

Защита WordPress сайта: 16 мер и 19 плагинов

bezopasnost-wordpressПриветствую вас, друзья!

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

А именно, способами нанесения вреда владельцам сайтов и тому, как от них уберечься.

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

Знания в области кибербезопасности необходимы мне, как профессиональному веб-разработчику, для защиты создаваемых и поддерживаемых мною сайтов. К чему я и вас призываю, мои дорогие читатели. Помните, что у всяких знаний есть Тёмная сторона, которой нужно избегать.

Однако, сказать, что хакеры этому миру не нужны я также не могу, т.к. их деятельность помогает находить бреши в безопасности и устранять их (лучше бы они только этим и занимались, а не использовали слабые места сайтов для своей выгоды).

В прочем, я сильно увлёкся :-) И не представил вам тему сегодняшней статьи, которая является очень популярной сегодня и серьёзной – это безопасность WordPress сайтов.

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

Многим описанные меры могут показаться очевидными и банальными, но уверяю вас… Именно поэтому большая часть пользователей не считают их чем-то серьёзным и зачастую ими пренебрегают :-)

И в это же время данные упущения с успехом используются тысячами хакеров для взлома WordPress сайтов ежедневно.

Также я поделюсь своим опытом защиты ВордПресс сайтов, который у меня уже успел накопиться.

Однако – обо всём по порядку.

Поехали! :-)

Что нужно знать о безопасности WordPress?

WordPress – это бесплатная OpenSource система управления содержимым сайта. Предоставляется она абсолютно бесплатно всем желающим, что резко повышает к ней интерес со стороны разработчиков.

Каждый владелец копии ВордПресс может использовать её по своему усмотрению: модифицировать, распространять и создавать на  её базе свои проекты.

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

Интересная информация о WordPress:

  • 35-40 % сайтов, запущенных в доменной зоне RU в 2016 году, работают на Вордпресс;
  • на текущий момент на CMS WordPress в Рунете работает более 500 000 различных сайтов;
  • всего в мире на движке Вордпресс запущено более 18 000 000 сайтов (на начало 2016 года), для сравнения годом ранее цифра была всего 16 000 000, а в 2012 году – лишь 6 000 000 сайтов;
  • в официальном каталоге плагинов доступно около 30 000 бесплатных плагинов для CMS;
  • в качестве разработчиков WordPress зарегистрировано в 2012 году более 100 000 специалистов;
  • лишь 20 % пользователей устанавливают плагины для защиты WordPress.

Как видите, с одной стороны система активно развивается, миллионы пользователей ее используют, но лишь 1/5 вебмастеров беспокоятся о безопасности Вордпресс сайтов, которые им принадлежат.

Зачем кому-то ломать защиту WordPress?

Начнём с того, что сайты WordPress могут взламываться автоматически с помощью различных программ-роботов и вручную.

Первый – наиболее распространённый, т.к. имеет массовый характер воздействия. Причём, ваш сайт может быть как огромным порталом с посещаемостью в несколько тысяч пользователей в сутки, так и личным блогом, у которого от силы десяток читателей, включая Вас :-)plagin-bezopasnosti-wordpress

Время от времени в сети мелькает информация о таких массовых атаках на WordPress сайты.

Автоматический взлом основывается на использовании недостатков безопасности WordPress как платформы. Особенно ему подвержены ресурсы, использующие старую версию движка сайта, т.к. разработчики постоянно анализируют причины успешных WP взломов и устраняют недоработки в новых версиях.

При автоматическом взломе WordPress сайтов злоумышленники могут руководствоваться следующими мотивами:

  • кража сайта – полное копирование ресурса и перенос его на новый домен с целью присвоения результатов труда разработчика, монетизации ресурса и так далее;
  • получение ссылок с ресурса для составления сетки сателлитов, улучшения ссылочного профиля;
  • шантаж;
  • получение личных данных пользователей или иной полезной коммерческой информации;
  • получение прибыли путем подмены информации на сайте (замена номеров карт, платежной информации);
  • использование сайта для инфицирования пользователей ресурса путем рассылки писем или программ с вирусами;
  • перенаправление вашего трафика на свои ресурсы (редирект);
  • использование системных ресурсов для хранения своих данных, более эффективного взлома других ресурсов.

При ручном взломе сайтов помимо перечисленных причин хакеры руководствуются ещё и личными мотивами, среди которых могут присутствовать следующие:

  • месть;
  • зависть;
  • устранение прямого конкурента;
  • взлом WordPress сайта на заказ.

Это лишь малая часть из возможных мотивов злоумышленников, среди которых есть как коммерческие мотивы, так и человеческие качества.

Именно поэтому настройки безопасности WordPress – это обязательный этап разработки любого сайта. Если им пренебречь, рано или поздно вы станете жертвой атаки.

Как обходят WP защиту?

  • 40% – взломы хостинга. Владелец сайта мало может повлиять на защищенность хостинг платформы, поэтому изначально нужно выбирать качественных хостеров с положительными отзывами и проверенной репутацией.
  • 30% осуществляются через небезопасные темы, в которых намеренно или случайно присутствуют уязвимости. Вывод: необходимо использовать платные темы от надежных поставщиков. Я лично рекомендую ресурс TemplateMonster, где все шаблоны проходят жёсткую модерацию профессионалами на предмет безопасности и функциональности.
  • 20% взломов WordPress из-за уязвимых плагинов. Даже лучшая защита ВордПресс нивелируется установкой плагинов с намеренно размещенной уязвимостью. Сюда же относится установка чистого кода на сайт из непроверенных источников пользователями, мало разбирающимися в программировании.
  • 10% ВордПресс взломов из-за ненадежного пароля. Хакеры просто подбирают или брутфорсят пароли, взламывая сайты в автоматическом или ручном режиме.

Безопасность WP сайта должна решаться комплексно, то есть, даже если вы используете плагины WordPress Security, но при этом устанавливаете на свой ресурс непроверенный код – вы находитесь в зоне риска.

Надежная защита WordPress – это реально?

Вполне. К счастью, реальность такова, что работоспособных WP сайтов, о безопасности которых позаботились их владельцы, больше, чем взломанных.

Для обеспечения надёжной ВордПресс security всего лишь необходимо следовать определенным рекомендациям, которые, на самом деле, очень простые и в некоторых случаях даже примитивные.

Регулярные бэкапы

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

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

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

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

wp-bezopasnostВ бэкапах нужно хранить не только файлы сайта, но и данные БД.

На хостинге идеальной частотой является 3 бэкапа в сутки, которая у многих хостинг-провайдеров установлена по умолчанию (например, у моего хостера TheHost).

Но это во многом зависит от свободного дискового пространства, предоставляемого вам на серверном жёстком диске в рамках оплачиваемого вами тарифного плана.

Поэтому лучше не экономить на безопасности :-)

Остальные типы бэкапов не нуждаются в таком частом создании. Достаточно делать резервную копию в облаке 2 раза в неделю, а на локальном комьютере и флеш-носителе – раз в неделю.

Бесплатные плагины защиты WordPress сайта, позволяющих автоматизировать процесс формирования резервных копий:

  • Duplicator — обеспечивает возможность копирования и перемещения сайта, а также является простым средством для резервного копирования;
  • UpdraftPlus – плагин для резервного копирования в облако на Dropbox, Google Диск или другие сервисы.
  • WordPress Backup to Dropbox – простой плагин для регулярного резервного копирования файлов и БД сайта в Dropbox.

Ограничение сбора сведений о сайте злоумышленниками

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

  1. удалить файлы readme.html и license.txt из корня сайта;
  2. заблокировать доступ к .htaccess через браузер с помощью директив самого .htaccess;
  3. обязательно проверить исходный код HTML-страницы на предмет упоминания названий плагинов и их версий в примечаниях;
  4. сделать запрет доступа к install.php, wp-config.php и прочим системным файлам;
  5. запретить просмотр в браузере содержимое каталогов WordPress сайта с помощью директив .htaccess;
  6. скрыть информацию о владельце сайта, авторах;
  7. директориям сайта на хостинге установить права доступа 755, а файлам — 644.

Защита админки WordPress сайта

Доступ к панели администратора WP сайта является золотой мечтой большинства хакеров. Но, тем не менее, защитить ВордПресс админку  очень просто и для этого существует масса способов.

Самым эффективным является маскировка.

Большинство программ для автоматического взлома настроены на wp-login.php. Если же изменить адрес доступа, можно существенно повысить WordPress security ресурса, поскольку автоматические программы попросту будут выдавать ошибку доступа. Возможные решения (плагины):

  • Login LockDown – быстро определяет подбор пароля и блокирует запрос с этого IP;
  • Revisium WordPress Theme Checker – определяет наиболее типичные способы взлома вашего шаблона, проверяет доступ к админ панели;

Я лично пошёл ещё дальше и помимо указанных мер установил ещё блокировку попыток входа в админку по IP, благодаря чему доступ к панели администратора возможен только с нескольких IP-адресов.zaschita-adminki-wordpress

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

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

Отказ от использования VPN сервисов

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

Поэтому любителям VPN сервисов я настоятельно рекомендую от них отказаться. По крайней мере, на время работы в панели администратора ВордПресс сайта.

Во-первых, VPN соединение для работы в админке не нужно.

А, во-вторых (и это самое главное), — при использовании VPN сервисов ваши данные пропускаются через сторонние сервера, на которых они могут быть использованы как угодно.

Следовательно, имя пользователя и пароль администратора могут быть украдены злоумышленниками и использованы для контроля вашим ресурсом.

Отказ от работы в админке WP через общественный Wi-Fi

Никогда не используйте WI-FI соединение для доступа к админпанели сайта, которое используется ещё кем-то.

За историю существования Wi-Fi сетей насчитываются тысячи случаев похищения данных администраторов с последующим взломом ВордПресс сайтов и кражей другой ценной информации владельцев устройств, пользующихся «бесплатным» интернетом в общественных местах.

Причём доступ к таким сетям может быть как защищён паролем, так и нет — главным условием является наличие в них кого-то ещё кроме вас, в мотивах которых вы не можете быть уверены на 100%.

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

Я даже хотел вам порекомендовать парочку, но при анализе их устройства обнаружил, что все они используют VPN, который и не такой уж безопасный, как кажется и всячески навязывается.

Установка SSL-сертификата

Интересные дела получаются. VPN недостаточно надёжен, общественный Wi-Fi для администрирования сайта вообще использовать запрещается.nastrojka-bezopasnosti-wordpress

А как тогда быть, если нужно уехать в длительную командировку или на отдых, одним словом, оказаться длительное время без проверенного и защищённого Wi-Fi, а сайт в это время нужно администрировать?

В данной ситуации на помощь может прийти как раз использование SSL-сертификата для передачи данных по защищённому протоколу HTTPS.

Для упрощения перевода WordPress на HTTPS  я лично рекомендую применять специальные плагины, которые значительно упрощают жизнь.

  • Really Simple SSL – плагин позволяет установить сайту на WordPress SSL сертификат за пару секунд. Необходимо лишь получить SSL сертификат, установить плагин и активировать его. Остальные действие будут выполнены автоматически, включая редирект, внесение корректировок в .htaccess и замена всех url сайта с учётом протокола HTTPS.
  • WP Force SSL – плагин для перенаправления трафика с HTTP на расширенный протокол HTTPS, включая прописанные вручную ссылки.
  • Easy HTTPS Redirection – плагин, очень похожий на WP Force SSL по своему действию, т.к. позволяет настроить редиректы с HTTP на HTTPS как для всех URL сайта, так и для отдельных.
  • SSL Insecure Content Fixer – данный плагин защищает WordPress сайт от опасного контента и предупреждений о смешанном содержимом.

Если вы вдруг не знаете как установить плагин WordPress, то рекомендую вам ознакомиться со статьёй по ссылке.

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

Двухэтапная аутентификация при входе в админку

Данная мера безопасности является ещё одним эффективным средством защиты админки WordPress наряду с настройкой HTTPS на WP сайте.

Заключается она в использовании не только стандартного ввода имени пользователя и пароля при входе в админпанель, но и во вводе специального кода подтверждения, отправляемого вам на телефон.

Поэтому если брутфорс атака злоумышленников будет успешной и им удастся подобрать данные учётной записи администратора, то второй этап остановит их от получения контроля над вашим сайтом.

Наиболее простым и удобным способом внедрения двухфакторной аутенфитикации на свой сайт является установка специальных плагинов. Вот список самых популярных, размещённых в порядке убывания количества скачиваний:

  • Google Authenticator — Two Factor Authentication (2FA)
  • Duo Two-Factor Authentication
  • Rublon Two-Factor Authentication

Описания их возможностей приводить не буду, т.к. все они примерно одинаковы. А самое прикольное лого на wordpress.com у Rublon, так что обязательно зайдите и зацените :-)

Регулярное обновление ВордПресс

Основная и самая примитивная защита от взлома WordPress сайта – это регулярное обновление движка. Тысячи хакеров днями и ночами ищут уязвимости версий Вордпресс, поэтому чем раньше вы обновитесь, тем дольше будет действовать WordPress security вашего ресурса.

От момента выявления «дыры» до взлома сотен тысяч сайтов иногда проходит несколько дней. Поэтому разработчики WordPress ведут неравный бой с хакерами всего мира, постоянно выпуская обновления, устраняющие ошибки и слабые места.

zaschita-wordpressИ глупо было бы этим не воспользоваться. Устанавливайте обновление незамедлительно, сразу после его выхода!

Благодаря данному обстоятельству крайне нежелательно вносить правки в код движка самостоятельно, т.к. после обновления этот функционал будет для вас недоступен.

Поэтому для редактирования кода сайта на WordPress можно править только файлы темы и вносить изменения в файл functions.php, благодаря которому и наличию АПИ ВордПресс можно достичь требуемого результата.

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

Изменение стандартных данных администратора

По умолчанию Вордпресс осуществляет доступ через учетную запись Admin. Это очень плохо, ведь один из распространенных способов взлома – подбор пароля под определенный логин (брутфорс атака).

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

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

Чтобы изменить логин и повысить свой процент защиты WordPress от взлома, необходимо:

  • создать новую учетную запись со сложным паролем;
  • указать ее роль как «Администратор»;
  • удалить пользователя Admin.

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

Удаление неиспользуемых плагинов

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

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

Немного оффтопа, но я вообще рекомендовал бы вам использовать плагины по-минимуму, т. к. они могут стать не только дверью для хакеров на ваш сайт, но и снижать его производительность (особенно, если они используют API сторонних сервисов).

Хорошей альтернативой плагинам WordPress может служить использование чистого JavaScript и PHP кода, на котором написан сам ВордПресс.

Но данный способ расширения функционала ВП сайтов, к сожалению, тоже не без изъянов.

Использование кода из проверенных источников

При использовании кусков кода для расширения функционала сайта как альтернативы использования плагинов также нужно быть предельно аккуратным.

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

К тому же, просмотреть кусок кода на предмет наличия вредоносных операций занимает не столько много времени, как копание в архитектуре плагина, которая может содержать до нескольких десятков файлов и директорий.

Но при использовании кода вместо плагинов WP есть существенный подводный камень – вам нужно хотя бы частично разбираться в программировании и защите WordPress от взломов, чтобы понимать – пользу или вред принесёт вам труд других разработчиков.wordpress-security

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

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

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

Иначе ваш сайт может превратиться в такой же овощ. Или даже похуже :-)

Не хочу никого обижать, но я всё-таки считаю, что кодом должны заниматься профессионалы. Причём, с благими намерениями.

Изменение префикса таблиц базы данных

Очень простой и эффективный способ защититься от автоматического взлома WordPress ресурса. Суть метода проста – вы меняете префикс таблиц баз данных сайта путем изменения стандартного префикса wp_ на произвольный, например, bd_.

Если кто-то не в курсе, префикс таблиц БД нужен для хранения в одной базе данных сайта таблиц, используемых для разных сайтов, работающих на одной платформе, у которых одинаковые имена.

Таким образом, таблицы, хранящие данные каждого такого сайта, будут отличаться от аналогичных с помощью префикса.

Изменение префикса производится либо путем использования автоустановщика скриптов Softaculous (не на каждом хостинге работает), либо путем переименования таблиц БД через веб-интерфейс phpMyAdmin или подобную программу для доступа к базе данных.

Поскольку метод радикальный и может вызвать нарушение функционала и падение посещаемости, лучше делать все работы на моменте запуска проекта, либо постепенно, тестируя работоспособность сайта.

Также не забудьте изменить значение переменной table_prefix в файле wp_config.php, который лежит в корне вашего WordPress сайта на следующее:


$table_prefix = 'prefix_';

Вместо prefix в значении переменной может быть любая символьная последовательность, какую вы посчитаете нужной. Главное – не заигрываться и не делать префикс слишком длинным :-)

Установка WordPress капчи

Данная технология киберзащиты уже почти 20 лет, как вошла в нашу жизнь. Тем не менее, до сих пор далеко не на всех сайтах можно встретить её использование.

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

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

Установка капчи, как правило, нужна на различных формах, с помощью которых на сайте производятся действия. Это нужно для того, чтобы на ваш ресурс не проникли роботы и не натворили делов :-)

Самыми распространёнными местами установки CAPTCHA в WordPress являются следующие:

  • форма добавления комментариев;
  • регистрация и вход на сайт;
  • форма обратной связи;
  • оформление заказа (если у вас Интернет-магазин на WordPress);

Установить капчу в ВордПресс можно как вручную, используя API сторонних сервисов, так и воспользоваться специальными плагинами капчи WordPress.

Защита персонального компьютера

Совет самый, что ни есть банальный, но многие им пренебрегают.

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

zaschita-wordpress-ot-vzlomaКазалось бы: попасть на сайт, если вход в админку не ограничен по IP, можно с любой машины. Но главная опасность взлома ПК владельца сайта заключается в том, что в веб-браузере могут остаться сохранённые данные для входа в куках (cookies), благодаря которым можно зайти на сайт без авторизации.

Или вы, как и большинство пользователей, просто сохраняете в браузере данные форм, с помощью чего запоминаются креды (credentials) вашей учётной записи администратора.

Для защиты личного ПК необходимо воспользоваться следующими мерами:

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

Защита электронной почты

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

Очень часто, сосредоточившись на защите WordPress от вирусов, владельцы сайтов забывают о потенциальной опасности e-mail:

  • для регистрации домена и хостинга заведите отдельный ящик;
  • не открывайте подозрительные письма, тем более с вложенными файлами;
  • 1 раз в 2-3 месяца меняйте пароль на сложную комбинацию цифр и букв;
  • не указывайте нигде ящик, как контактную информацию;
  • установите двухуровневую аутентификацию (электронная почта + СМС на ваш телефон) в панели хостера и регистратора домена.

Включение здравого смысла

На закуску я оставил совсем уже очевидное предостережение, которое многие из вас могли посчитать вообще обидным. Последним я его решил разместить, т. к. увидев его в числе первых вы вряд ли стали бы читать полный список. Подумали, что я держу вас за дураков :-)

Однако, когда речь идёт о безопасности ВордПресс сайтов, мелочей быть не может. И если не принять всерьёз данную рекомендацию, то все предыдущие меры защиты WP не будут иметь никакого смысла.

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

plaginy-dlya-zaschity-sajta-na-wordpressА когда сайт перестанет работать, вы долго не сможете понять, в чём же причина. Вряд ли даже всерьёз рассмотрите указанный мной фактор в силу мыслей формата «Кто бы мог подумать, что он/она на такое способен?!».

Поэтому, повторюсь, держите в секрете ваши параметры подключения по FTP, SSH и к БД, а также адрес админпанели и учётную запись администратора с паролем.

Лучше даже никому не сообщать адрес сайта и то, что вы являетесь его владельцем.

И ни в коем случае не провоцируйте атаки на ваш сайт сами громкими заявлениями, что вы произвели все меры по обеспечению безопасности и защитили его на 200%.

Если задаться целью, то для опытного веб-программиста не составит труда организовать взлом WordPress сайта. Так что бережёного Бог бережёт :-)

Согласен, похоже на паранойю, но для обеспечения защиты WordPress сайта все средства хороши.

Обзор плагинов безопасности WordPress

В завершение я решил познакомить вас с наиболее эффективными плагинами ВордПресс для комплексной безопасности.

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

Wordfence Security – анализатор, который проверяет ресурс на наличие «дыр» в безопасности WordPress. Можно настроить регулярное сканирование сайта, чтобы обезопасить себя от возникающих уязвимостей.

Это эффективная защита WordPress от ddos атак.

Действует по принципу сравнения текущей версии сайта с эталонной, при расхождении находит зараженные файлы.

Acunetix WP Security – анализатор доступа к системным файлам, админке, проверяет защиту данных, сложность пароля, предоставляет рекомендации по устранению проблем.

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

Обеспечивает очень хорошую защиту WordPress от вирусов.

All In One WordPress Security – включает в себя защиту от самых распространенных способов взлома, включая подбор паролей, подмену адреса админки, защиту WordPress от ddos атак и др.

AntiVirus – сканер вредоносных программ, нагружает сервер, снижает скорость загрузки сайта, но обеспечивает надёжную защиту WordPress от вирусов.

iThemes Security – плагин для комплексной защиты сайта, умеет резервировать сайт, защищает админку, предотвращает внешний доступ, защищает от подбора логина или пароля.

Установка iThemes Security – это решение для ленивых. Это плагин комплексной безопасности, который решает практически все проблемы начинающего разработчика.

В пакет возможностей входит: защита админки, блокирование пользователей по IP, защита WordPress от спама, аудит безопасности, настройка защиты установленных плагинов, ведение отчета по доступу к сайту.

Большинство уязвимостей можно устранить путем предлагаемых плагином решений.

Anti-spam plugin – защищает WordPress сайт от ботов, быстро настраивается, имеет дружественный интерфейс.

Sucuri Scanner – это один из признанных лидеров в сфере защиты сайтов на ВордПресс, он бесплатен и очень эффективен.

Проводит в автоматическом режиме аудит безопасности сайта и проверяет наличие повреждений в системных файлах.

Удаляет выявленный вредоносный код, осуществляет настройку сайта после взлома безопасности или инъекций кода.

Эффективно предотвращает несанкционированный доступ путем защиты от взлома админки, а также уведомляет о возможных нарушениях безопасности во время работы сайта.

Если хотите найти больше плагинов для защиты WordPress, то можете воспользоваться официальным каталогом, который доступен по ссылке wordpress.org/plugins/tags/security.

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

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

Безопасность WordPress сайта — выводы

Как бы печально это не звучало, но ни один из выше описанных способов и плагинов не может дать 100% защиту WordPress сайту от взлома.

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

Одних только способов обхода капчи существует, как минимум 10.

Однако, грамотная работа по развитию проекта, превентивные меры, анализ информационной среды и соблюдения мер защиты вашего WordPress сайта поможет существенно снизить риски взлома.

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

К слову, лёгкая паранойя – это нормальное явление, когда речь заходит о вопросах безопасности :-) Однако, не стоит ей позволять управлять вашей жизнью и всего опасаться.

Поэтому используйте описанные в статье рекомендации по защите ВордПресс сайтов – и спите спокойно :-)

На этом у меня всё. Оставляйте свои мнения и пожелания в комментариях под статьёй и делитесь ей со своими друзьями с помощью социальных кнопок.

Всем удачи и до новых встреч!

Заработок на капче: 3 способа

zarabotok-na-kapcheПриветствую вас, друзья!

На днях я решил разобраться с тем, что такое капча, как её разрабатывают, взламывают и как защититься от этого неприятного явления.

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

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

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

Поехали! :-)

Особенности заработка на капче

Прежде всего поговорим о хорошем :-) А именно о том, что заработок на капче без вложений реален.

Поэтому лохотроном данный бизнес можно назвать только условно, т.к. всё происходит честно: вы выполняете работу, за которую вам платят.

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

Ну, и третьим плюсом заработка на CAPTCHA является то, что для данного процесса абсолютно не обязательно обладать какими-то специальными знаниями. Нужно только печатать то, что изображено на картинке или тыкать мышкой в случае разгадывания Google noCAPTCHA reCAPTCHA.

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

Владельцам сайтов также ничего не требуется — на сервисах, помогающих заработать деньги на капче есть подробные инструкции по установке CAPTCHA виджетов и примеры кода для работы с API. Некоторые даже предоставляют специальные плагины для популярных CMS.

Теперь поговорим о неприятном. А именно о том, сколько можно заработать на капче. Ответ, к сожалению, прост и малоприятен…

skolko-mozhno-zarabotat-na-kapche

Заработать на капче много вам не получится. Сами сервисы по распознаванию капчи называют далеко не оптимистичные цифры в 100-250$ в месяц, хотя даже они сильно завышены.

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

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

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

Но если он вас не останавливает и вы всё ещё хотите узнать, как же именно можно заработать на капче, то далее приведён список доступных ныне способов. Причём, как для вебмастеров, так и пользователей.

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

Как заработать на капче обычному человеку?

Первое, что видишь в поисковике при запросе «как заработать на капче» — это список ресурсов, которые предлагают заработок на вводе капчи.

Суть процесса понятна: вы регистрируетесь в системе и получаете капчи, которые вам нужно решить. Это могут быть как обычные текстовые, на которых изображена последовательность искаженных символов, так и картинки разных объектов, из которых нужно выбрать фото дорог, машин, котов и т.д. или просто поставить галочку в поле «Я не робот» .

Последний вариант — это всем известная Google noCAPTCHA reCAPTCHA, за решение которой, кстати, платят в несколько раз больше, чем за обычную.

Ещё на некоторых сервисах встречаются задачи по разгадыванию капчи в аудиоформате, которая также является частью reCAPTCHA. Таким образом, на вводе капчи за деньги заработать могут даже слабовидящие люди, те же самые пенсионеры. Правда, у них должно быть знание английского, хотя бы цифр от 0 до 9, которые присутствуют на аудиокапчах.

Какие же ресурсы позволяют сегодня благодаря вводу капчи зарабатывать в Интернете обычным пользователям?

MegaTypers — один из самых первых сайтов, который стал предоставлять возможность заработка на вводе капчи.

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

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

Есть возможность перевода контента страницы с помощью Google Translate, но, сами понимаете, что это будет за перевод :-) Вообще по внешнему виду сайта видно, насколько он древний.

vvod-kapchi-za-dengi-v-dollarakh-na-megatypers

Но, это не главное. Намного важнее то, что, поскольку ресурс западноориентированный, то и заработок на нём в долларах. Пользователям обещают заработок на вводе CAPTCHA от $0,45 до $1,5 за 1000 капчей.

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

Западность MegaTypers не останавливает от CAPTCHA заработка наших соотечественников. Среди победителей конкурсов и топовых работников масса email на доменах mail.ru. Видимо, благодаря данной популярности ресурса среди жителей СНГ даже добавлен вывод средств на WebMoney, что не может не радовать.

Единственная загвоздка при работе с данным ресурсом — это устаревшая система регистрации, которая требует от новых членов ввода кода приглашения, который не так-то просто найти. Поэтому, если вы заинтересовались данным сайтом и хотите на нём работать, то введите данный код при регистрации — DKM5.

Для любителей криптовалют (с нынешней их ценой, думаю, таких найдётся немало) есть хорошая новость! Данный сервис предоставляет пользователям возможность заработка биткоинов на вводе капчи, что не может не радовать.

Больше популярных Западных ресурсов с приличным заработком лично мне обнаружить не удалось, поэтому далее речь пойдёт об отечественных, с которыми проще работать благодаря русскоязычному интерфейсу сайтов и техподдержке, но выплаты у них намного ниже.

ruCAPTCHA — самый крупный из отечественных ресурсов по заработку на вводе капчи. Но отнюдь не самый щедрый.

Предлагают от 1 до 10 копеек за ввод текстовой капчи. Если заказывать распознавание капчи, то это обойдётся вам от 18 до 44 рублей за 1000 заданий.

Проект достаточно технологичный: личный кабинет пользователя и сам сайт в целом имеют приятный внешний вид и насыщены анимацией.

zarabotok-na-vvode-kapchi-ru-kapcha

Также у ру капчи имеется собственная программа для капчи, позволяющая работать как через неё, так и заниматься вводом CAPTCHA через сайт.

Помимо заработка на вводе капчи ru captcha позволяет зарабатывать деньги и другими способами.

Кроме всего прочего на данном ресурсе доступен каталог программ, которые помогают зарабатывать, главным образом, сбором биткоинов с кранов.

Ру капча является клоном для рынка СНГ Западного проекта 2captcha.com, заработок на котором ведётся в долларах. Правда, ставки там также не очень высокие — 0,17$ за 1000 вводов обычной капчи и 1$ за 1000 решённых Google reCAPTCHA.

Колотибабло — самый неоднозначный из всех существующих проектов по заработку на капче.

Почему неоднозначный? Потому что я так и не смог понять, откуда у него растут ноги :-) Сам проект, судя по названию, отечественный, в личном кабинете присутствуют новости на английском, а интерфейс доступен помимо русского, английского и украинского ещё и на индонезийском, иранском, вьетнамском и ряде других языков.

Предоставляет пользователям возможность исключительно заработка на вводе капчи. Причём, решение капчи за доллары.

Судя по статистике проекта, которую можно увидеть в личном кабинете, средняя ставка за ввод 1000 капчей составляет стабильные 0,5$.

zarabotok-na-vvode-kapchi-kolotibablo

Как Web разработчик, отмечу, что сайт данного проекта самый технологичный и привлекательный среди всех увиденных мною по заработку на CAPTCHA. Также Kolotibablo предоставляет своим пользователям использовать как специальную программу для ввода капчи, так и делать это прямо на сайте.

Ещё больше неоднозначности по поводу Колотибабло у меня появилось после изучения ресурса anti-captcha.com, который, как оказалось, тесно связан с предыдущим.

С первого взгляда они абсолютно разные, но, попав в личный кабинет после регистрации можно обнаружить, что он такой же, как и на Колотибабло. Даже технологии, использовавшиеся для разработки сайтов, одинаковые — PHP, JS: Handlebars, jQuery и Highcharts.

AntiCaptcha занимается исключительно обработкой заявок на распознавание капчи, поступающей, как они утверждают, от сторонних пользователей. При этом в FAQ на вопрос «Как заработать на вводе капчи?» есть готовый ответ, состоящий из ссылки на Kolotibablo. Такая вот петрушка :-)

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

Заработок на капче для вебмастеров

Итак, с заработком на вводе капчи более-менее разобрались, а точнее с тем, насколько данное занятие «прибыльное». А как же обстоят дела с владельцами сайтов? Возможен ли заработок на капче для вебмастеров?

Поскольку я сам таковым являюсь, данный вопрос меня очень заинтересовал. И я принялся искать соответствующие ресурсы.

Нужно сказать, что это оказалось непростым занятием.

Я уже было отчаялся найти таковые, но вдруг наткнулся на статью, где автор поделился своим рейтингом ресурсов для заработка на капче для сайтов — habrahabr.ru/sandbox/77220. Воодушевившись тем, что их даже несколько, я принялся переходить по указанным там ссылкам.

Но, реальность оказалась несколько печальней: до сегодняшнего времени из 3 указанных ресурсов дожил лишь один, причём, самый древний из них и единственный Западный ресурс в данном списке.

SolveMedia — зарубежный ресурс для заработка на капче в Интернете. Существует с 2008 года и за это время его партнёрами стали такие известные бренды, как McDonalds, Colgate, Toyota и др.

Суть заработка на капче с помощью данного сервиса заключается в том, что вы устанавливаете на свой сайт специальную CAPTCHA, которая содержит рекламные баннеры партнёров SolveMedia.

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

zarabotok-na-kapche-s-pomoschyu-sajta

Из достоинств данного сервиса можно назвать выплаты в долларах и огромное количество способов интеграции капчи на сайты, разработанные на различных платформах и языках программирования. Также SolveMedia предоставляет плагины для популярных CMS, включая WordPress, Drupal, Joomla и множество специализированных форумных движков.

Теперь поговорим о минусах. Сколько можно заработать на данном ресурсе — неизвестно, т.к. никакой тарифной сетки на официальном сайте нет.

На одном из зарубежных форумов мне удалось обнаружить отчёт о заработке на капче с помощью данного сервиса, который составил 17,27$ за 1001 ввод CAPTCHA. В принципе, не плохо. Особенно для пассивного дохода. И это явно больше, чем можно заработать на вводе капчи.

Но, вдумайтесь в эти цифры… 1001 ввод капчи. Мне даже страшно представить, сколько должно пройти времени, чтобы это стало возможным. К примеру, на моём сайте за 2 года его существования всего около 200 комментариев. Т.е. такими темпами я заработаю 17$ за 5 лет :-) За это время сам сервис уже может прекратить своё существование.

Сами видите, что заработок на капче данным способом возможен только на сайтах, где есть необходимость её частого ввода. Т.е. либо на форумах, где пользователи должны вводить её при каждом сообщении, либо на новостных сайтах, где часто разжигаются целые войны в комментариях.

Также к минусам SolveMedia можно отнести достаточно убогий кабинет пользователя и сложности с выводом средств. Никакие платёжные системы данный сервис не поддерживает. Вывести деньги можно только банковским переводом при заполнении специальной формы IRS form W-9 для граждан США и IRS form W-8BEN для всех остальных.

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

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

MoneyCaptcha — единственный отечественный ресурс, позволяющий сделать сайт источником пассивного дохода путём размещения капчи, который удалось найти.

Кабинет пользователя на данном ресурсе весьма симпатичный и содержит всю необходимую информацию.

zarabotok-na-kapche-vebmasteram-na-moneycaptcha

Интегрировать код капчи на сайт можно как с помощью API напрямую, так и путём установки плагина для соответствующей CMS. В наличии решения для Joomla, WordPress, Drupal, osCommerce (O_o для этого динозавра ещё плагины делают?) и других CMS, о некоторых из которых я узнал впервые (например, Zikula).

Схема заработка на капче, как и в случае с SolveMedia, проста: вы добавляете CAPTCHA на сайт, пользователи решают её при написании комментариев, входа на сайт и произведения прочих действий на ресурсе, а вы за это получаете деньги.

Правда, в отличии от своего западного «коллеги», на сайте MoneyCaptcha не удалось найти ни единого примера виджета или упоминания способа заработка на капче. Никаких баннеров партнёров или возможности регистрации партнёров в системе.

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

Платят за всё это «удовольствие», кстати, также крайне скромно — от 2 до 30 копеек за каждый ввод капчи в зависимости от региона пользователя.

И в завершение образа MoneyCaptcha, который у меня сформировался, хочу добавить, что письмо с данного ресурса о восстановлении пароля попало в спам, что также наталкивает на определённые мысли :-)

Как зарабатывают на капче сервисы?

Мы поговорили о том, как можно заработать на вводе капчи и реален ли заработок размещением CAPTCHA на своём сайте. Теперь пришло время разобраться с тем, кому вообще нужен ввод капчи и зачем.

Я оставил данный разговор напоследок, т.к. по ходу его мы поговорим о тёмной стороне заработка на капче в Интернете :-) И если бы я написал об этом в самом начале, то самые честные и порядочные из вас вряд ли бы стали читать всё остальное.

Но начнём всё-таки с полезных мотивов использования CAPTCHA.

Первым среди них является реклама продукции. Я сейчас говорю о заработке при размещении рекламной капчи на сайте, который является абсолютно честным и прозрачным.

Схема работы таких сервисов следующая: рекламодатель платит сервису за создание рекламы своего товара. Сервис создаёт баннер или пускает существующий в оборот, чтобы он отображался в виджетах и плагинах на сайтах, сотрудничающих с сервисом.

При вводе капчи пользователи сайтов просматривают рекламу, т.е. конечная цель рекламодателей, оплативших рекламу, достигнута: потенциальные покупатели были проинформированы о товаре или услуге.

Жаль только, что таких сервисов сегодня очень мало, да и те, которые ещё «держатся на плаву», предлагают совсем уже невыгодные условия для вебмастеров.

kapcha-zarabotok-v-internete

К ресурсам же, позволяющим зарабатывать на вводе капчи, вопросов будет больше. Что они делают с решёнными капчами и кто эти люди, которые присылают им CAPTCHA по API, а ещё и деньги платят за их расшифровку?

Сами сервисы таких ответов нигде не дают, поэтому о способах использования решённых CAPTCHA можно судить чисто гипотетически.

Из полезных мотивов первое, что приходит на ум, — это применение ответов пользователей при вводе капчи для распознавания электронных книг и объектов на картах и фотографиях, как это делает Google с помощью своей reCAPTCHA, например. В данном случае заказчиками услуг по расшифровке капчей могут выступать различные издательства, которые планируют зарабатывать деньги на массовой печати редких и уникальных изданий.

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

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

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

Я, честно говоря, даже проявив фантазию не могу представить себе таких вебмастеров :-) Единственные «вебмастера», которым нужны решённые капчи — хакеры, которые собирают базу ответов с целью написания ботов для автоматизации различных действий, направленных на взлом сайтов, рассылку спама и увеличения прибыли.

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

Такие программы не используют никаких баз. Для них-то как раз и нужен API, предоставляемый сервисами, чтобы при необходимости решения капчи сразу отправлять её на расшифровку. А потом хакерам просто выставляется счёт.

Кстати, в роли взломщиков могут выступать и сами создатели подобных сервисов, которые не только зарабатывают нелегальные деньги самостоятельно, но и помогают в этом своим собратьям по цеху. Поэтому заработок на вводе капчи часто и называют «лохотроном», т.к. результаты копеечных трудов рядовых пользователей знающие люди могут использовать в весьма прибыльных «чёрных» схемах.

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

По поводу последнего — если у вас есть сайт, то размещение капчи с монетизацией может быть источником небольшого дохода, но будьте осторожны!

zarabotok-na-kapche-khakeram

Главное, чтобы такая капча не стала причиной лавины спама на вашем ресурсе и не привела к его взлому, т.к. никогда не известно, что за ресурс предоставляет вам капчу и кому он продаёт эти данные. Ну, а более лёгкой формой вреда, наносимого такой капчей может стать спамный ручеёк или отсутствие комментариев и прочих действий, защищаемых с помощью CAPTCHA от ботов ввиду низкой степени защиты и надёжности монетизированных капчей.

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

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

Если вам интересно услышать моё мнение по поводу заработка на вводе капчи, то я считаю, что вы потратите в разы больше денег на лечение и восстановление зрения (и то не факт, что придёте к успеху), чем заработаете данным способом.

Как по мне, оно того не стоит и подойдёт только людям, у которых много свободного времени и нет каких-либо знаний для заработка другим путём. Например, школьникам, домохозяйкам и пенсионерам, у которых времени действительно много, а заработанные деньги будут хоть какие-то.

На Западе, кстати, где и была придуман данный способ заработка, изначально делался упор на услуги низкоквалифицированных работников из стран Третьего мира (Индия, Бангладеш, Непал, страны Африки и т.д.), поэтому соглашаясь на такую работу вы даёте лишний повод считать Россию, Украину и другие страны СНГ таковыми, что немного обидно, если честно.

Поэтому в завершение данной статьи хотелось бы пожелать всем развития, мои дорогие читатели :-)

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

Можете попробовать зарабатывать на капче ради интереса и собственного «набивания шишек», но я очень надеюсь, что спустя некоторое время вы придёте к малоэффективности данного способа заработка и найдёте для себя более интересное и прибыльное занятие. Кстати, своим отказом вы автоматически уменьшите количество спам-ботов и число взломов сайтов, для которых как раз и используются решённые капчи, вводимые реальными пользователями за копейки.

В общем, развивайтесь и успеха вам!

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

До новый встреч! 😉

the_posts_pagination(array( 'mid_size' => 3, 'prev_text' => __('« Предыдущая'), 'next_text' => __('Следующая »') ));