Як перейти з HTTP на HTTPS – проста інструкція встановлення SSL

Веб у своєму розвиткові рухається в напрямку використання безпечного протоколу шифрування HTTPS за замовчуванням. Даний напрямок, крім іншого, стимулюється і великими пошуковими системами, як наприклад Google, який ще в 2014 році оголосив, що HTTPS стане сигналом SEO-ранжування. Однак, крім такого пошукового сигналу, перехід сайту на HTTPS принадний і іншими «смаколиками», наприклад:

• Захист конфіденційності користувачів (логіни, паролі, кредитні картки тощо)
• Браузери позначають сайти з протоколом HTTP як небезпечні
• Можливість використовувати переваги HTTP/2 (мультиплексування, доступ до деяких API і т.п.)
• Захист свого рекламного доходу від перехоплення недобросовісними Інтернет- та Wi-Fi-провайдерами (які на незахищених сайтах «крутять» свою рекламу)

 

Чому HTTPS — це вже не опція, а стандарт?

SSL-сертифікат (технологія, що стоїть за HTTPS) шифрує дані між браузером користувача та вашим сервером. Це робить практично неможливим перехоплення паролів, даних банківських карт чи особистих повідомлень.

Але окрім самої безпеки, є ще три причини, чому це необхідно:

• 🛡️ Довіра користувачів (E-E-A-T): “Небезпечно” — це перше, що бачить відвідувач на HTTP-сайті. Це сигнал для нього негайно піти. Наявність HTTPS є ключовим фактором для Trustworthiness (Надійності) з концепції Google E-E-A-T.
• 📈 Прямий фактор SEO: Ще з 2014 року Google офіційно оголосив HTTPS сигналом для ранжування. Сайти на HTTPS отримують пріоритет у видачі.
• ⚙️ Сучасні технології: Багато нових веб-технологій (наприклад, HTTP/2, Progressive Web Apps) працюють тільки через HTTPS.

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

 

Етапи переходу на сайт HTTPS:

• Вибір і отримання SSL сертифікату
• Встановлення сертифікату на сервер
• Перезапуск сервера
• Перевірка встановлення сертифіката SSL на хостинг
• Редирект з сайту HTTP на сайт HTTPS

 

Вибір і отримання SSL сертифікату

Для початку вам потрібно визначитися з тим, безкоштовний або платний вам потрібен сертифікат SSL-протоколу. Невеликим сайтам і блогам цілком може вистачити і безкоштовного SSL-сертифіката, або використання, наприклад, самопідписаного (самозавіреного) SSL сертифікату. Такі сертифікати не вимагають додаткових фінансових витрат, але мають ряд істотних обмежень (наприклад, короткий термін дії). Безкоштовні сертифікати найпростіше отримати у хостера (якщо ваш хостинг досить «просунутий» і він видає такі сертифікати, в цьому випадку хостинг-провайдер також допоможе вам і з встановленням сертифіката). Безкоштовні цифрові SSL-сертифікати видають також і великі центри сертифікації (наприклад, Let’s Encrypt, CloudFlare і схожі).

Платні ж сертифікати мають ряд додаткових переваг, від яких і залежить їх ціна. Чим більше переваг ви хочете від цифрового сертифікату, тим більше буде його ціна. Наприклад, найдорожчий SSL-сертифікат (мультидоменний, з розширеною валідацією, «зеленим адресним рядком у браузері» і т.п.) обійдеться в кілька сотень, а то й тисяч, доларів на рік.

Ціна бюджетних SSL сертифікатів стартує від $10-15 на рік. Найвідомішими центрами сертифікації є такі компанії як Comodo, GeoTrust, Symantec і Trustwave. Повторюся: багато хостинг-провайдерів є дилерами великих центрів сертифікації та цифровий SSL-сертифікат можна купити безпосередньо у них; в цьому випадку хостинг-компанія допоможе вам і з його установкою.

 

Безкоштовні сертифікати (Let’s Encrypt)

Для 95% сайтів (блогів, корпоративних сайтів, невеликих магазинів) ідеальним вибором є Let’s Encrypt. Це безкоштовний, автоматизований та відкритий центр сертифікації.

Як працює Let’s Encrypt?

Він видає сертифікати терміном на 90 днів. Це зроблено спеціально, щоб стимулювати автоматизацію. Вам не потрібно купувати і встановлювати його вручну кожні 3 місяці. Ваша хостинг-панель (cPanel, DirectAdmin, Plesk) або VPS-скрипт (Certbot) робить це за вас автоматично у фоновому режимі.

Сьогодні практично кожен поважаючий себе хостинг-провайдер інтегрував Let’s Encrypt у свою панель. Зазвичай це кнопка “Встановити SSL” або “SSL/TLS Status”, яка робить все за вас в один клік.

 

Встановлення сертифіката на сервер

Після вибору і отримання сертифікату SSL (“на руки”) прийшла пора встановити його на свій сервер. Тут можуть бути різні шляхи в залежності від того, де ви придбали сертифікат. Будемо виходити з того, що ви обрали платний сертифікат і встановити його ви взялися самостійно.

Великі хостери дозволяють встановлювати цифровий сертифікат через панель управління хостингом (наприклад, через ISPmanager або DirectAdmin). У цьому випадку від вас вимагається мінімум зусиль: перейти до відповідного пункту (наприклад, «SSL Сертифікати») і далі клікати на потрібних пунктах. Або ж скопіювати потрібні дані у відповідні поля форми. Такий метод встановлення є рекомендованим.

 

УВАГА: наступний метод встановлення призначений тільки для досвідчених користувачів, які знають, що роблять.

Дещо складніше справа йде з установкою через SSH (або FTP):

• вручну копіюємо файли сертифіката (сам сертифікат з розширенням .crt і закритий ключ з розширенням .key) на сервер
• змінюємо файл налаштувань конфігурації веб-сервера (наприклад, httpd.conf для сервера Apache, або nginx.conf для сервера Nginx), де прописуємо включення режиму SSL, а також шлях до файлів сертифіката.
• перезапускаємо веб-сервер

 

Приклад рядків у файлі конфігурації для включення режиму SSL при веб-сервері Apache:

<VirtualHost x.x.x.x:443> 
 DocumentRoot /var/www/
 ServerName ВашДомен.com
 SSLEngine on
 SSLCertificateFile {шлях до файлу}вашдомен.crt
 SSLCertificateKeyFile {шлях до файлу}вашдомен.key
 SSLCertificateChainFile {шлях до файлу}root.crt
</VirtualHost>

де:

x.x.x.x – це IP-адреса вашого домену,

а 443 – це TCP-порт, який слухає HTTPS за замовчуванням (для HTTP за замовчуванням 80-й порт)

 

Приклад рядків у файлі конфігурації для включення режиму SSL при веб-сервері Nginx:

server {
 listen x.x.x.x:443;
 server_name ВашДомен.com;
 ssl on;
 ssl_certificate {шлях до файлу}вашдомен.crt;
 ssl_certificate_key {шлях до файлу}вашдомен.key;
 }

де:

x.x.x.x – це IP-адреса вашого домену

 

Перезапуск сервера

УВАГА: виконуйте цей пункт, тільки якщо ви встановлюєте сертифікат вручну, і ви є досвідченим користувачем, який знає, що робить.

 

Після встановлення SSL-сертифіката на сервер потрібно перезапустити веб-сервер, щоб зміни вступили в силу.

Приклади команд для перезапуску веб-сервера (для різних ОС команди можуть відрізнятися):

Для сервера Apache виконайте SSH-команду

/etc/init.d/httpd restart

 

Для сервера Nginx виконайте SSH-команду

/etc/init.d/nginx restart

 

Перевірка встановлення сертифіката SSL на хостинг

Після встановлення сертифіката час перевірити успішність такого встановлення. Найпростіший спосіб перевірки сертифіката для сайту з https – набрати в адресному рядку браузера адресу свого сайту із зазначенням перед доменом https://. Якщо встановлення було успішним, то ваш сайт повинен відображатися нормально і всі стилі, скрипти, картинки і сторінки повинні нормально підвантажуватись. Таке рідко в реальному житті буває з першого разу, але тим не менше :))

Протестувати встановлення на сайт https-а можна і через онлайн-інструменти (наприклад, SSL Labs або SSL Checker).

 

Редирект з http на сайт https (301 Редирект)

Після успішного встановлення і перевірки на сайті https`а можна всі запити до свого домену перенаправляти на обов’язкові SSL/HTTPS відповіді. Адже після того, як сертифікат встановлено, ваш сайт стане доступним за обома адресами: http:// та https://, – і це дуже погано для SEO. Оскільки створює дублікати сторінок. Наше завдання — примусово “склеїти” всі версії в одну, основну, за допомогою 301-го редиректу (переміщено назавжди).

Нижче зазначено фрагмент коду, який потрібно для цього додати в файл .htaccess в корені сайту (якщо у вас сервер Apache).

RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

АБО так:

<IfModule mod_rewrite.c>   
  RewriteEngine On
  RewriteCond %{HTTP:X-Forwarded-Proto} !https
  RewriteRule (.*) https://vashdomen.com/$1 [R=301,L]
</IfModule>

 

Для сервера Nginx директиви будуть такі (файл конфігурації .conf)

У вашому файлі конфігурації сервера (зазвичай в /etc/nginx/sites-available/) потрібно мати два блоки server:

# Перший блок перенаправляє весь HTTP-трафік на HTTPS
server {
    listen 80;
    server_name vashdomen.com www.vashdomen.com;
    return 301 https://$server_name$request_uri;
}
# Другий блок обробляє HTTPS
server {
    listen 443 ssl;
    server_name vashdomen.com www.vashdomen.com;    
    # ... налаштування вашого SSL-сертифіката ...
    # ... решта конфігурації сайту ...
}

(не забудьте скрізь використовувати замість vashdomen.com свій власний домен)

(також не забувайте робити бекап файлів і бази даних перед їх редагуванням)

 

🔥 Бонус-крок: HSTS

Після того, як ви впевнилися, що HTTPS працює ідеально, я наполегливо рекомендую додати заголовок HSTS. Він наказує браузеру завжди завантажувати ваш сайт по HTTPS, навіть якщо користувач введе http://. Це підвищує безпеку. Детальніше про це я писав у статті про HTTP-заголовки.

 

Важливий крок: пост-міграційний чек-ліст

Робота ще не закінчена! Щоб уникнути SEO-проблем, пройдіться по цьому списку:

1. Перевірка на “Змішаний контент” (Mixed Content): Це коли ваша HTTPS-сторінка завантажує ресурси (картинки, скрипти, стилі) по HTTP. Браузери блокують такий контент. Відкрийте консоль розробника (F12) і перевірте, чи немає там помилок.
2. Оновлення внутрішніх посилань: Пройдіться по базі даних і замініть всі абсолютні посилання http:// на https://.
3. Google Search Console: Додайте нову версію сайту (https://) як новий ресурс і вкажіть її як основне дзеркало.
4. Google Analytics: Не забудьте змінити http:// на https:// у налаштуваннях вашого ресурсу та представлення.
5. Оновлення sitemap.xml та robots.txt: Переконайтеся, що ваша карта сайту містить HTTPS-адреси, і (за потреби) вкажіть шлях до неї у robots.txt.

 

Висновок: це базова гігієна вашого сайту

Рекомендую також ознайомитись:

• SEO-шні моменти переїзду з http на https
• Як сайту на WordPress перейти з HTTP на HTTPS

 

Щасливого вашому сайту HTTPS’а!