TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

CloudFlare – Настраиваем HTTPS для WordPress, подробная и понятная инструкция

2 820

Безопасно ли пользователь пользуется Вашим сайтом? Используете ли Вы HTTPS-шифрования?

Если нет, тогда самое время заняться бозопасностью как сайта так и его пользователей.

CloudFlare + HTTPS + WordPress

HTTPS – это термин, используемый для безопасных HTTP-соединений. HTTPS обеспечивает безопасное соединение для вас и посетителей вашего сайта. Каждому веб-сайту, использующему соединение HTTPS, выдается сертификат SSL (Secure Sockets Layer). Если сертификат сайта не совпадает с тем сертификатом который фактически установлен на сайте, браузер предупредит посетителя.

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

Сообщение небезопасно

Три года назад Google сообщал, что HTTPS будет является фактором ранжирования, и сегодня он, по-видимому, уже является этим фактором.

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

В этом уроке я покажу вам, как вы можете сделать это с помощью Cloudflare.

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

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

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

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

Также обратите внимание, что это руководство специально для настройки HTTPS с Cloudflare на WordPress (хотя стоит отметить, что процесс использования SSL-сертификатов Cloudflare, как правило, проще с другими CMS платформами).

Получение сертификата SSL

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

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

Если вы не используете Cloudflare для предоставления соединения SSL, не вносите никаких изменений, предложенных в этом руководстве. Этот урок не для вас.

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

Как установить на WordPress HTTPS соединение с помощью Cloudflare ?

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

CloudFlare – Как добавить сайт в сервис на примере добавления сайта с ukraine.com.ua

Получение и инициализация сертификата от CloudFlare

В пункте меню нажимаем Crypto за тем необходимо выбрать вид сертификата — Flexible.

CloudFlare - Переход в настройки Crypto

После того как пункт был выбран, начнется инициализация полученного сертификата (authorizing certificate). В случае успеха, увидим вот такую надпись “Active certificate”:

CloudFlare - Active certificate

В основном сертификат готов в течении часа, иногда приходится дожидаться следующего дня. Перед тем как приступить к правкам настроек на вкладке “Page Rules” в начале проверяем сайт на доступность по https. Для это вбейте адрес

https://ваш домен

Если переход осуществился, значит все отлично и двигаемся дальше. Если нет… В общем скорее всего у Вас прошло все хорошо и сайт доступен и по https и по http протоколам.

Установка плагинов в WordPress для реализации поддержки https от CloudFlare

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

Ставим cloudflare-flexible-ssl и cloudflare плагины, после чего смотрим как себя ведет сайт. Убеждаемся кофе был заварен крепким и бодрящим. :).

Замена старых ссылок в базе данных

Так как в базе данных сайта имеется огромное количество внутренних ссылок с http, необходимо все их заменить на https. Для этих целей или устанавливаем plugin Better Search Replace и проводим работу с поиском и заменой внутренних и внешних ссылок, или сохраняем базу данных на хостинге через phpMyAdmin (либо другим образом), сохраняем на ПК и проводим поиск и замену при помощи NotePad++.

Я всегда выбираю первое – (Better Search Replace).

Заменяем ссылки при помощи Better Search Replace

Если делаем поиск и замену через Better Search Replace, придерживаемся четкую последовательность в описанных мной пунктах ниже:

В окне настроек плагина Better Search Replace в начале запускаем холостой запуск для того что бы выявить количество ссылок (или для каких других целей).

За тем перед тем как приступить к следующему шагу НАСТОЯТЕЛЬНО РЕКОМЕНДУЮ СДЕЛАТЬ ЕЩЕ РАЗ БЕКАП!

Вот как выглядит окно при поиске и замене:

Better Search Replace

Вставляем данные написанные ниже в полся “Искать” и “Заменить”, в пункте “Выбор таблиц” нажимаем сочетание клавиш Ctrl+A (для того что бы выбрать все таблицы базы данных), снимаем галку с чекбокса “Холостой запуск” и жмем “Запустить Поиск/Замену”.

1) Внутренние ссылки src:

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

src="http://ваш_домен

на

src="

2) Внешние ссылки src:

Найти

src="http://

и заменить на

src="//

3) Всякого рода вариации для JS скриптов и т.п, например

найти

http://ВАШ_ДОМЕН/

заменить на

https://ВАШ_ДОМЕН/

4) Последняя и самая важная замена

http://ваш_домен

и заменить на

https://ваш_домен

Так же не забываем найти и заменить http://ВАШ_ДОМЕН на https://ВАШ_ДОМЕН в самописных плагинах и файлах темы (поиск и замену можно делать по выше мной описанным пунктам).

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

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

Когда все тесты были пройдены и Вы убедились что сайт работает нормально, переходим к настройке переадресации с http на https через Page Rules страницу настроек (в сервисе CloudFlare).

Настройка переадресации с http на https через Page Rules CloudFlare

Переходим на данную страницу Page Rules и жмем кнопку “Create Page Rule”:

CloudFalre - Page Rules

В появившемся окне в форму ввода с плейсхолдером “Example: www.example.com/*” вводим http://ВАШ_ДОМЕН и в выпадающем меню под надписью “Then the settings are:” выбираем Always use https. Далее, жмем “Save and Deplay”.

CloudFalre - Page Rules

Теперь пытаемся перейти на сайт по http протоколу, Вас должно автоматически редиректить на https.

Настройка ссылки на сайт в панели WordPress

Вернемся в админ панель WordPress и наведем на пункт “Настройки” далее кликнем на пункт “Общие настройки”. Увидим что домен сайта в полях: Адрес WordPress (URL) и Адрес сайта (URL) прописан не правильно (будет //ВАШ_ДОМЕН или http://ВАШ_ДОМЕН), по этому пропишем его как нужно, а нужно https://ВАШ_ДОМЕН в обоих полях, изменяем и нажмем “Сохранить изменения”.

Проверка редиректа с http на https в redirectdetective.com

Теперь не маловажный момент, проверяем что бы на Вашем ресурсе работал 301 редирект с http на https. Для этого используем отличный ресурс по данной ссылке:

http://redirectdetective.com/

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

redirectdetective.com

Источник записи:

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