Автор

Как перевести сайт на HTTPS правильно

Как перевести сайт на HTTPS правильно


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

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

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

RewriteEngine on
RewriteCond %{HTTP:X-Forwarded-Proto} !https
RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301,NE]

После настройки перенаправления перейдем на сайт. Если часть размещаемого на странице контента по-прежнему подгружается по незащищенному протоколу, в браузере рядом с адресной строкой (в примере мы использовали браузер Mozilla Firefox) появится вот такой значок:

 

при клике на значок отобразится сообщение о незащищенном соединении.

 

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

 

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

Для выявления ссылок, использующих незащищенный протокол, также можно применить  «Инструменты разработчика» в браузере.  Для этого нужно нажать клавишу F12 на клавиатуре и перейти во вкладку «Консоль» открывшегося окна (или в меню «Инструменты» →«Веб-разработка» → «Веб-консоль»), в которой содержится сообщение о загрузке смешанного содержимого на сайте (Mixed Content) с соответствующими указателями.

 

Пара слов о ссылках:

Адрес ссылки может быть абсолютным или относительным. Адреса абсолютных ссылок обычно содержат имя сайта и начинаются с указания протокола (http:// или https://). Для относительных ссылок точкой отсчета является не имя сайта, а место, где находится страница, на которой нужно разместить ссылку на другую страницу или файл.

абсолютная:      https://example.ru/news/2016/

относительная:   /news/2016/

Похожим образом ссылки могут быть относительными от протокола:

абсолютная:     https://example.ru/news/2016/

относительная:   //example.ru/news/

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

Например:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

рекомендуется заменить на

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

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

<img src="http://domain.com/libraries/photos/background.png">

В таком случае нужно скачать изображение и сохранить его, к примеру, в директорию images/ вашего сайта, а затем заменить заданную через атрибут src=«» ссылку на изображение :

<img src="//images/background.png">

 

Поиск в базе данных

Для поиска абсолютных ссылок в базе данных сайта воспользуемся доступным в Панели управления инструментом PhpMyAdmin («Базы данных» -> «Войти в PhpMyAdmin»).  В PhpMyAdmin выберем базу данных нужного сайта и нажмем на кнопку «Поиск».

В качестве значения для поиска следует выбрать имя файла или домен, обращение к которому происходит по протоколу HTTP — эти данные, как мы уже рассказали в самом начале статьи, можно получить в списке, представленном во вкладке «Мультимедиа» окна Информации о странице.

 

Для сайтов на CMS WordPress

Изменить с HTTP на HTTPS протокол сайта, работающего под управлением CMS WordPress,  можно в разделе «Настройки» → «Общие» в панели администрирования WordPress.

Внести изменения можно и напрямую через базу данных сайта. Для этого нужно перейти в интерфейс управления базами данных PhpMyAdmin в Панели управления («Базы данных» → «Войти в PhpMyAdmin»).

В PhpMyAdmin следует выбрать базу данных нужного сайта, имя которой определено константой DB_NAME в файле wp-config.php

и в таблице *_options заменить протокол в значениях для ‘siteurl’ и ‘home’ на https://

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

Однако если в случае с заменой ссылок в файлах все легко решается заменой протокола, то с заменой ссылок в базе данных WordPress не все так однозначно, так как в базе WordPress большое количество данных хранится в сериализованных массивах, использовать которые при изменении длины хранимых значений (а https длиннее http на один байт) невозможно. Чтобы не редактировать ссылки вручную, воспользуемся для поиска и замены протокола в ссылках плагином «Search & Replace».

После установки и активации плагина важно не забыть создать резервную копию базы данных перед началом работы, чтобы иметь возможность вернуть рабочее состояние сайта, если что-то пойдет не так. После создания резервной копии базы данных сайта можно приступать к работам.  В разделе «Инструменты» → «Search & Replace» нужно выбрать страницу настроек плагина и перейти во вкладку «Search & Replace».

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

1) Значение, которое нужно найти, укажем в поле «Search for»: http://example.com

2) Значение, на которое нужно заменить найденное, укажем в поле «Replace with»: https://example.com

3) Поставим отметку в чекбоксе напротив пункта «Select all tables» для замены вхождений, найденных во всех таблицах базы данных.

4) Снимем отметку рядом с пунктом «Dry Run» и поставим ее напротив пункта «Save changes to Database».

Далее следует кликнуть на большую синюю кнопку «Do Search & Replace» и дождаться окончания процесса. В верхней части страницы должен появиться отчет о проделанной работе: количество таблиц, затронутых при поиске, и количество отредактированных строк.

Осталось зайти на сайт по протоколу https:// и убедиться в том, что SSL-шифрование используется на всех страницах сайта:

 

А вот что написано на сайте google

 

Кроме того, важно знать, что изменение URL сайта с HTTP на HTTPS повлияет на его индексирование поисковыми системами.

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

Спасибо Блогу хостинга Sprinthost за данную статью!

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеРазное

Как перевести сайт на HTTPS правильно

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


Как перевести сайт на HTTPS правильно

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


Как перевести сайт на HTTPS правильно

Длинные тени — это последний тренд в веб-дизайне. Этот стиль на сегодняшний день стремительно набирает популярность. Итак. К вашему вниманию CSS3 генератор длинных теней. Он имеет возможность создавать стиль как для текста, так и для изображения. С помощью ползунков можно подстроить длину и рассеивания тени по своему усмотрению, а так же настроить цвета.


Как перевести сайт на HTTPS правильно

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


Раскрутка в соцсетях

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


Перейти в Блог

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

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

Close