< Заур Магомедов />

профессиональный верстальщик и блоггер

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

Заур Магомедов
Главная » Полезные советы » Как перейти с http на https?

Как перейти с http на https?

Как перейти с http на https?

Пост был обновлен: Дек 15, 2016

Всем привет! В данной статье затронем тему безопасности, а именно безопасный протокол передачи данных — https. Если вы обратили внимание мой блог, на котором вы сейчас находитесь работает по протоколу https, на который я перешел недавно. Также, на https я перевел один из моих клиентских сайтов. Пришлось немного повозиться и понервничать, но в итоге все получилось. Я подумал, что надо обязательно написать об этом на блоге — как перейти с http на https безболезненно для сайта, тем более эта тема я считаю уже популярна, т.к. сегодня все больше и больше сайтов переходят на https.

Что меня побудило перейти на протокол https? В последнее время мне на глаза стали попадаться вот такие заголовки: Браузер Mozilla Firefox в скором времени перестанет поддерживать небезопасные http-соединения; Правительство США поручило всем государственным сайтам перейти на HTTPS; C января 2017 года все сайты, передающие секретные данные (пароли, номера кредитных карт и т.д.) по незащищенному соединению в браузере Google Chrome будут помечаться как небезопасные. Плюс ко всему где-то в интернете читал, что скоро всем сайтам придется перейти на протокол https в обязательном порядке. Я подумал, что в один прекрасный день все равно эта участь постигнет и меня. Так зачем же тянуть? Тем более хостинг beget.ru, на котором я сижу предоставил возможность для приобретения бесплатных SSL-сертификатов. В общем, собрал всю необходимую информацию по тому, как перейти с HTTP на HTTPS и сделал это.  🙂

Зачем нужно использовать https и что имеется ввиду под безопасностью?

Если говорить кратко, то протокол https позволяет отправлять запросы на сервер с нашего сайта в зашифрованном виде, гарантируя при этом, что эти самые данные не будут перехвачены хакерами. Элементарный пример передаваемых данных — это авторизация на сайте (или регистрация). В процессе авторизации мы отправляем запрос на сервер, который содержит логин и пароль. Так вот, если отправлять эти данные по небезопасному соединению, то они легко могут быть перехвачены, что в результате может привести к взлому сайта. Работу протокола https обеспечивают SSL сертификаты. Они бывают разных видов, про виды сертификатов читайте ниже.

Весь процесс я решил разделить на шаги и выполнять их как раз именно в такой последовательности. Также ниже я дам рекомендации по переходу для популярных cms Joomla и WordPress. У каждого есть свои особенности.

Приобретение сертификата

Для начала необходимо приобрести SSL сертификат, чтобы ваш сайт был доступен по обоим протоколам — http и https.  Давайте сначала внесем некоторые ясности в виды SSL сертификатов.

Виды сертификатов

Простые сертификаты

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

Wildcard SSL

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

Мультидоменные SSL сертификаты

Мультидоменный SSL сертификат — сертификат, который может поддерживать сразу несколько доменов. Также, как и Wildcard позволит сэкономить денежку. Так что имейте ввиду, если у вашей компании или проекта имеется несколько доменных имен, то выбирайте именно мультидоменный сертификат.

EV (Extended Validation) сертификаты

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

Отображение SSL сертификата в Сбербанк

Смотрится круто и повышает доверие потенциального клиента. Поэтому, владельцам крупных компаний рекомендуется выпуск именно EV сертификатов.

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

Не все сертификаты поддерживают кириллические домены. Если у вас домен кириллицей в зоне РФ, то вам следует приобрести сертификат с поддержкой IDN.

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

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

Сегодня приобрести сертификат SSL для сайта можно абсолютно бесплатно. Уже давно Google заявил о том, что пора уже переходить всем на безопасный прокол https и что предпочтение в ранжировании будет отдаваться сайтам именно с защищенным соединением. Кстати, это еще одна причина по которой я перешел на https. В общем, в связи с этим всем в свет появился проект под названием Let’s Encrypt. В первую очередь данный проект рассчитан на доступность приобретения SSL сертификата, а также облегчить жизнь рядовым веб-разработчикам с установкой сертификатов (генерация приватных ключей и прочее). И что самое главное — сертификаты, выдаваемые Let’s Encrypt, абсолютно бесплатные. Лично на моем блоге стоит именно такой сертификат.

Читайте также:  Где брать идеи для написания статей для сайта?

Я получил сертификат SSL от Let’s Encrypt в панели управления beget.ru. Если вы пользуетесь данным хостингом, то получить его будет проще простого. Заходите в панель управления Бегет, далее переходите в раздел «Домены» и в списке доменов щелкаете по иконке SSL.

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

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

Выбор бесплатного сертификата в Бегет

Настройка сайта

Загружаемые ресурсы

Для перевода сайта на HTTPS необходимо выполнить некоторые настройки на сайте, касается это загружаемых ресурсов. Что подразумевается под ресурсами, это — скрипты, стили, картинки, аудио, видео, т.е. все те ресурсы, которые загружаются браузером с вашего сайта через протокол http. Существуют относительные и абсолютные адреса. Чем они отличаются?

Относительный адрес:

/image.jpg

Относительный адрес вне зависимости от протокола:

//sitename.ru/image.jpg

Абсолютный адрес:

http://sitename.ru/image.jpg

В абсолютном адресе указывается доменное имя сайта с протоколом. Так вот, при переходе на https необходимо применять относительные адреса вне зависимости от протокола, т.е. отсекая сам протокол. При таком подходе ресурсы будут загружаться по такому же протоколу, что и ваш и не важно на http он или на https. Единственное условие — если вы загружаете ресурсы с внешних сайтов (например, с CDN), то данные сайты должны быть доступны по https, иначе от них придется отказаться.

Например, загрузка библиотеки jQuery с CDN с поддержкой https будет следующей:

<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>

Также, как вариант вы можете просто указать все абсолютные ссылки с протоколом https (так например сделано в WordPress).

Тег <base />

Обратите внимание, если вы на сайте используете тег <base> с адресом сайта, то обязательно проследите, чтобы адрес был указан с протоколом https. Например, <base href=»https://zaurmag.ru» />. Данный тег не является обязательным, но все же, если в вашей cms он используется, то потрудитесь его исправить в случае чего. Находится он в самом начале секции <head>. Если получится так, что вы все ссылки изменили на относительные вне зависимости от протокола (//sitename.ru), а в теге <base> содержится адрес с http, то все ваши относительные ссылки будут считаться относительными в зависимости от протокола http. В результате в консоле браузера вы получите кучу ошибок, а на сайте поплывет дизайн.

Тег rel=»canonical»

Если у вас на сайте используется тег rel=»canonical», то проследите за тем, чтобы канонический адрес страницы в данном теге был абсолютным с указанием протокола https. Иначе, если будет http он будет работать только во вред.

301 редирект с http на https

Чтобы не потерять трафик нам необходимо сделать так, что когда пользователь заходит на сайт по протоколу http его бы автоматически перекидывало на https. Склейка зеркал и переиндексация сайта в поисковиках дело долгое (Гугл правда быстро реагирует, вот с Яндексом придется ждать), поэтому 301 редирект может это дело ускорить и не дать потерять трафик. Для этого в файл .htaccess нужно добавить всего две строчки:

RewriteCond %{SERVER_PORT} !^443$ 
RewriteRule ^(.*)$ https://sitename.ru/$1 [R=301,L]

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

RewriteEngine On # Если этой строки нет выше
RewriteCond %{HTTP:X-Forwarded-Protocol} !=https
RewriteRule .* https://%{SERVER_NAME}%{REQUEST_URI} [R=301,L]

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

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

## редирект с без www на www:
RewriteCond %{HTTP_HOST} ^sitename.ru$ [NC]
RewriteRule ^(.*)$ https://www.sitename/$1 [R=301,L]

## редирект c www на без www:
RewriteCond %{HTTP_HOST} ^www.sitename.ru$ [NC]
RewriteRule ^(.*)$ https://sitename.ru/$1 [R=301,L]

Файл robots.txt

В robots.txt нам обязательно следует указать главное зеркало с протоколом https. Также указать ссылку на карту сайта так с протоколом https. Вот как я сделал на своем блоге:

Host: https://zaurmag.ru
Sitemap: https://zaurmag.ru/sitemap.xml

Переезд сайта в панели вебмастеров Яндекс и Гугл

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

Яндекс вебмастер

Для переезда сайта в Яндекс заходим в панель Яндекс Вебмастер по адресу https://webmaster.yandex.ru. Выбираем свой сайт и в разделе «Настройка индексирования» вводим свой домен и отмечаем чек-бокс «Добавить HTTPS«, сохраняем.

Переезд сайта в яндекс вебмастер

Далее переходим в раздел «Настройка индексирования» -> «Файлы Sitemap» и добавляем адрес карты сайта с протоколом https. Данный адрес, если помните мы указывали и в файле robots.txt.

Читайте также:  Как открыть сайт в локальной сети с локального компьютера?

Добавляем адрес sitemap в панели Яндекс вебмастер

Центр вебмастеров Гугл

С Яндексом разобрались, теперь давайте перейдем к Google. Идем в центр вебмастеров Гугл — https://www.google.com/webmasters и добавляем все версии (зеркала) сайта. Всего их должно быть 4. Например, для моего блога я добавил:

http://zaurmag.ru/
https://zaurmag.ru/
http://www.zaurmag.ru/
https://www.zaurmag.ru/

Версии одного сайта в вебмастере гугл

Далее выбираем основное зеркало с https естественно, только с www или без www. Для своего сайта я выбрал без www — https://zaurmag.ru. Открываем сайт и в настройках сайта (кликаем по шестеренке справа) указываем основной домен. Вот на примере моего блога.

Основное зеркало сайта zaurmag.ru в вебмастере гугл

Далее указываем адрес карты сайта. Для этого идем в «Сканирование» -> «Файлы Sitemap» и добавляем адрес карты сайта, щелкнув по красной кнопочке справа. Кстати, пока писал статью обнаружил, что я не добавил карту сайта для основного домена сайта zaurmag.ru.  🙂

Карта сайт в Гугл вебмастер

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

Зеленый замочек https

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

Сайт zaurmag.ru в вебмастере Яндекс

Прошло довольно приличное время после перехода на https и как видите по скрину еще не все страницы перешли на https. Что сказать, так устроен отечественный поисковик.

Парус слов про Яндекс Метрику. Если у вас был установлен код яндекс метирки, то в панели метирики вам придется добавить сайт заново с протоколом https.

Переход на HTTPS в Joomla

Обновлено — 15.12.2016

В последних версиях Joomla с переходом на https не должно возникнуть проблем. В файл .htaccess не обязательно добавлять директивы редиректов, движок сам перекинет с http на https. Для этого необходимо просто включить опцию в общих настройках Joomla — «Сервер» -> «Включить SSL» -> «Весь сайт».

Важно! Включайте данную опцию именно тогда, когда вы уверены, что сертификат у вас уже установлен и сайт доступен по протоколу Https.

Переключение на https в глобальных настройках Joomla

Ошибка при переходе на Https в Joomla

Один раз у меня было такое, что мне пришлось немного потрудиться, на одном из клиентских сайтов переход на https прошел не так гладко. Браузер ругался на относительные адреса загружаемых ресурсов, хотя адреса были указаны относительными вне зависимости от протокола. Проблема была в теге <base />. Давайте расскажу по порядку.

Помимо тех настроек сайта, что были указаны выше нам необходимо открыть файл configuration.php и в поле live_site вписать абсолютный адрес с проколом https.

public $live_site = 'https://sitename.ru';

По идее после этой настройки в теге <base /> адрес сайта должен быть указан с протоколом https. Но нет, он был указан с протоколом http, от того и пошли все ошибки. Поискал решение проблемы в интернете, конкретно на форуме joomlaforum.ru и нашел решение. Необходимо было сделать некоторый хак ядра, правда уверяли, что после обновления данные изменения не затрутся. Открываем файл —  /libraries/joomla/document/renderer/html/head.php и заменяем (77 строка)

$buffer .= $tab . '<base href="' . $base . '" />' . $lnEnd;

на

$buffer .= $tab . '<base href="' . Juri::base() . '" />' . $lnEnd;
Скажу сразу — после обновления движка изменения все же затираются и вам придется после каждого обновления вносить правки в вышеуказанный файл.

Пока я эту проблему так и не решил. Не понимаю почему так происходит — версия движка последняя.

После этих действий все пришло в норму. Также в общих настройках Joomla, включил SSL. Ее включение привело к неработоспособности сайта.  Если вдруг вы выбрали опцию «Весь сайт» и сайт перестал работать, то вам необходимо открыть файл configuration.php по Ftp,  найти $force_ssl и установить значение на 0.

public $force_ssl = '0';

После этого сайт заработает.

Переход на HTTPS в WordPress

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

Настройка адреса в настройках WordPress

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

На этом и завершу. Всем спасибо за внимание. Не стесняемся, задаем вопросы в комментариях.

Пост был обновлен: Дек 15, 2016

Заур Магомедов
Заур Магомедов

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

У меня вы можете:

Оцените пост:

1 балл2 балла3 балла4 балла5 баллов (6 оценок, среднее: 4,83 из 5)
Загрузка...

Проверка орфографии

Система Orphus

22 комментариев к статье "Как перейти с http на https?"

  • Наталья Янв 17, 2017 в 18:32

    все бы хорошо… только не получается перейти на относительные урлы. https://nataliablogs.ru/
    плагином http на https только получилось…

    • Заур Магомедов
      Заур Магомедов Янв 17, 2017 в 22:04

      У вордпресс целая головная боль с этими адресами, т.к. они все в абсолютном виде в БД хранятся. Сам долго мучился с ними и до сих пор время от времени нахожу с http.

  • Елена Янв 16, 2017 в 1:00

    Заур, спасибо за полезную информацию! Сейчас готовлюсь к переходу, уже делаем относительные ссылки.. Вот пришло в голову — а что делать с РСЯ и Адсенс. нужно ли как-то им сообщать о новом адресе? Добавлять сайт в разрешенные в Адсенс, например? И нужно ли менять внешние ссылки (не скрипты) на относительные?

    • Заур Магомедов
      Заур Магомедов Янв 16, 2017 в 1:11

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

      • Наталья Янв 17, 2017 в 18:34

        у меня и метрика показывает только основную страницу. При переходе в статистику — пусто
        Взаимосвязано?

        • Заур Магомедов
          Заур Магомедов Янв 17, 2017 в 22:02

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

      • Елена Янв 17, 2017 в 21:56

        Спасибо за ответ!

  • Александр Никонов Янв 02, 2017 в 20:44

    Заур, спасибо за отличную статью!

    Подскажите пожалуйста по поводу Яндекс.Метрики.
    Вы пишите: «Пару слов про Яндекс Метрику. Если у вас был установлен код яндекс метирки, то в панели метирики вам придется добавить сайт заново с протоколом https.»

    Но, у меня при добавлении в яндекс.метрику нового счётчика для https-сайта в поле «Адрес сайта» «https://» съедается и в итоге в поле виден только домен, без протокола.

    Также вопрос по поводу файла роботс.тхт
    Он должен быть виден для поисковых систем как по http, так и по https?

    Спасибо.

    • Заур Магомедов
      Заур Магомедов Янв 03, 2017 в 10:40

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

  • Макс Дек 17, 2016 в 15:03

    А можно ли после установки и настройки ssl-сертификата на хостинге — сделать все внутренние ссылки на сайте, в том числе и на картинки, не относительными, а сразу с https протоколом?

    • Заур Магомедов
      Заур Магомедов Дек 17, 2016 в 17:53

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

      • Макс Дек 17, 2016 в 18:43

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

        • Заур Магомедов
          Заур Магомедов Дек 17, 2016 в 22:47

          Настройте редирект с http на https. Сделайте переезд сайта в ЯВ и добавьте версии сайта с https в Гугл. Ресурсы, загружаемые по http нужно перевести на https. Никаких проблем с поисковиками не будет.

  • Наталья Дек 13, 2016 в 5:52

    Спасибо! Пробовала пару месяцев назад перейти и не получилось. Один момент, про замену head не знала. В итоге, перешла за 10 минут.

  • Дмитрий Дек 05, 2016 в 22:35

    Огромное спасибо Зауру за оперативно проделанную работу по переводу сайта c http в https! Сразу видно руку профи!!!

    • Заур Магомедов
      Заур Магомедов Дек 05, 2016 в 22:36

      Вам спасибо за обращение Дмитрий!

  • Олег Ноя 02, 2016 в 2:39

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

    • Заур Магомедов
      Заур Магомедов Ноя 02, 2016 в 3:03

      Могу сказать, что мой блог работает на https уже больше 3-х недель и пока проблем нет. Как раз в Бегет написано, что продление тоже будет бесплатным. Прикрепил скрин.

      http://joxi.ru/vAWeGWWhnkLBmW

  • Юрий Сен 25, 2016 в 12:57

    Отличная статья! Спасибо Вам, Заур, очень кстати)))

    • Заур Магомедов
      Заур Магомедов Сен 25, 2016 в 14:11

      Пожалуйста!

  • Алнксандр Сен 19, 2016 в 1:02

    Отличная статья! Спасибо Вам, Заур, очень очень кстати. Недавно пытался перейти на сертификат, но не учел некоторых моментов, о которых теперь знаю из статьи.

    • Заур Магомедов
      Заур Магомедов Сен 19, 2016 в 1:15

      Всегда пожалуйста 🙂

Добавить комментарий

Войти с помощью: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Если вы хотите вставить в текст комментария код HTML, CSS, PHP, JavaScript, то обрамите код в соответствии необходимыми тегами:

  • Код HTML - тегами [html] ваш код... [/html]
  • Код CSS - тегами [css] ваш код... [/css]
  • Код PHP - тегами [php] ваш код... [/php]
  • Код JavaScript - тегами [code lang="js"] ваш код... [/code]