Автор

Как перевести сайт на 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 за данную статью!


vk.com/club.ssdru

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



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

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

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


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

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


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

Слайдер с различными эффектами переходов (7 различных эффектов, в том числе 3D). Адаптер представляет собой легкий контент-слайдер, простой интерфейс для разработчиков и создания 2D или 3D слайд анимации переходов.
Добавлена поддержка 3D для webkit и Mozilla, всех других браузерах будет запасной вариант изящно простой fade перехода при использовании 3D-эффекты.
Все 2D переходы между слайдами были протестированы в IE6+, и всех других современных браузерах.


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

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


87 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close