Що таке змішаний контент (mixed content) і як його виправити

Ви вже вибрали і встановили SSL-сертифікат на ваш сайт, щоб захистити персональні дані ваших клієнтів, але чомусь не бачите заповітний закритий замочок в браузері?

Можливо ви замість закритого замка бачите жовтий трикутник і повідомлення, що з’єднання захищено в повному обсязі та/або ваш сайт взагалі не відображається правильно при зверненні по https?

Якщо це так – значить ви зіткнулися з проблемою змішаного вмісту або mixed content – це ситуація, коли елементи веб-сторінки підключені одночасно по протоколам http і https. Якщо сторінка, запитувана по HTTPS, містить частини, передані по незашифрованому протоколу HTTP, з’єднання не вважається повністю зашифрованим і захищеним: те, що передається по HTTP, можливо перехопити і змінити.

У різних браузерах змішаний вміст відображається по-своєму, але суть одна – відвідувач сайту бачить попередження про незахищеному з’єднанні і не бачить веб-сторінку в тому вигляді, як вона має виглядати.

Типи змішаного контенту

Mixed Content розділяється на два типи – активний і пасивний. Різниця в тому, якої шкоди може бути завдано сайту, якщо та чи інша інформація буде перехоплена і змінена в процесі передачі.

Пасивний змішаний контент – це елементи, при заміні яких не можуть бути змінені інші частини сторінки. Наприклад, зловмисник може перехопити будь-яке зображення, завантажуване по HTTP, і зрозуміти по ньому, які сторінки відвідує користувач.

До елементів пасивного вмісту відносяться:

  • <audio> (атрибут src)
  • <img> (атрибут src)
  • <video> (атрибут src)
  • <object> (коли <object> виконує запити по HTTP)

У браузерах пасивний змішаний контент виглядає так:

Активний змішаний контент – це елементи, які є частиною DOM, і тому їх підміна може змінити поведінку всієї веб-сторінки, що завантажується по HTTPS, що може привести, наприклад, до крадіжки паролів у відвідувача. У випадку перехоплення і підміни активного вмісту зловмисник може впровадити в сторінку свій сторонній скрипт, який буде здатний завантажити на хостинг вірус через уразливості в плагінах CMS, або отримати будь-які цінні дані користувача. Такий тип змішаного контенту більш небезпечний, тому більшість браузерів блокують завантаження активного контенту по HTTP, якщо сторінка запитується по HTTPS.

Активним вмістом є наступні елементи:

  • <script> (атрибут src)
  • <link> (атрибут href) (включаючи CSS)
  • XMLHttpRequest і його запити
  • <iframe> (атрибут src)
  • Всі випадки, коли в CSS використовується параметр url (@ font-face, cursor, background-image і т.д.)
  • <object> (атрибут data)

Відображення блокування активного змішаного вмісту в браузерах:

Як виправити помилки змішаного вмісту

Якщо коротко, щоб прибрати помилки змішаного вмісту, потрібно привести всі посилання в єдиний вид – або відносні, або абсолютні з протоколом HTTPS.
Наприклад, якщо у вас було посилання http://site.com/page, то можна її поміняти на /page або //site.com/page, або https://site.com/page. Якщо ваш сайт використовує популярний движок, то, скоріше за все, для вирішення цього завдання вже є готовий плагін або вбудований інструмент в адмін-панелі сайту.

Для виправлення внутрішніх посилань на динамічно генерованих сторінках можна додати в файлі .htaccess такий код:

RewriteCond %{HTTP:X-HTTPS} ^1$ 
RewriteRule .? - [E=HTTPS:on]

Ці правила виправляють посилання, які не прописані жорстко в коді тем, шаблонів, і не є посиланнями на зовнішні ресурси.

Якщо вам довелося вручну змінювати посилання з якихось причин, наприклад, у вас самописний або статичний HTML-сайт, то вам буде простіше побачити всі неправильні посилання в інструментах розробника в вашому браузері на вкладці “Консоль”.

А про те, як правильно замінити посилання з http на https на всіх популярних CMS, читайте в наступних статтях.

Як налаштувати HTTPS для WordPress

Як налаштувати HTTPS для Joomla

Як налаштувати HTTPS для OpenCart

Як налаштувати HTTPS для PrestaShop

Як налаштувати HTTPS для Drupal

Як налаштувати HTTPS для MODX

Як налаштувати HTTPS для Бітрікс