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

post thumbnail

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

Що таке змішаний контент? | Wiki HostPro

Що таке mixed content? | Wiki HostPro

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

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

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

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

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

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

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

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

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

Як виправити змішаний контент? | Wiki HostPro

Як виправити mixed content? | Wiki HostPro

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

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

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

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

Як виправити змішаний контент? | Wiki HostPro

Що таке змішаний контент? | Wiki HostPro

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

Якщо коротко, щоб прибрати помилки змішаного вмісту, потрібно привести всі посилання в єдиний вид – або відносні, або абсолютні з протоколом HTTPS.

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

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

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

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

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

Що таке змішаний контент і як його виправити? | Wiki HostPro

Що таке змішаний контент і як його виправити? | Wiki HostPro

Telegram Hostpro

Наш телеграм

з важливими анонсами, розіграшами й мемами

Приєднатися

Можливо, вас зацікавить

Зміни щодо правил випуску Code Signing SSL-сертифікатів

Зміни щодо правил випуску Code Signing SSL-сертифікатів

З 1 червня 2023 року CA/Browser Forum оновив правила щодо випуску Code Signing сертифікатів...

Diana Honcharenko | Оновлено: 10.07.2023

Як підключити на сайт SSL-сертифікат Comodo Positive

Як підключити на сайт SSL-сертифікат Comodo Positive

Ми покажемо, як встановити SSL на WordPress-сайт через cPanel на прикладі одного з найпопулярніших...

Diana Honcharenko | Оновлено: 28.04.2023

Як підключити безкоштовний Let’s Encrypt SSL?  

Як підключити безкоштовний Let’s Encrypt SSL?  

У цій статті ми розкажемо і покажемо, як швидко підключити до сайту Let’s Encrypt,...

Diana Honcharenko | Оновлено: 27.04.2023

Як замовити SSL-сертифікат

Як замовити SSL-сертифікат

https://www.youtube.com/watch?v=QE0nX6kDvVk Крок 1. Обираємо SSL-сертифікат Для початку переходимо на сторінку замовлення SSL-сертифікатів і обираємо...

Diana Honcharenko | Оновлено: 27.04.2023