Что такое смешанное содержимое (mixed content) и как его исправить

Купити SSL-сертифікат для сайту в Україні

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

Купить SSL-сертификат для сайта в Украине
Купить SSL-сертификат для сайта в Украине

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

Если это так — значит вы столкнулись с проблемой смешанного содержимого или mixed content — это ситуация, когда элементы веб-страницы подключены одновременно по протоколам http и https. Если страница, запрашиваемая по https, содержит части, передаваемые по незашифрованному протоколу HTTP, соединение не считается полностью зашифрованным и защищенным: то, что передаётся по HTTP, возможно перехватить и изменить.

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

1. Типы смешанного содержимого

Mixed Content делится на два типа — активный и пассивный. Разница в том, какой урон может быть нанесен сайту, если та или иная информация будет перехвачена и изменена в процессе передачи.

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

К элементам пассивного содержимого относятся:

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

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

Купить SSL-сертификат для сайта в Украине
Купить SSL-сертификат для сайта в Украине

Активное смешанное содержимое — это элементы, которые являются частью DOM, и потому их подмена может изменить поведение всей веб-страницы, загружаемой по HTTPS, что может привести, например, к краже паролей у посетителя. При перехватите и подмене активного содержимого злоумышленник может внедрить в страницу свой сторонний скрипт, который будет способен загрузить на хостинг вирус через уязвимости в плагинах CMS или получить какие-либо ценные данные пользователя. Такой тип смешанного контента более опасен, потому большинство браузеров блокируют загрузку активного контента по HTTP, если страница запрашивается по HTTPS.

Активным содержимым являются следующие элементы:

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

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

Купить SSL-сертификат для сайта в Украине
Купить SSL-сертификат для сайта в Украине

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-сайт, то вам будет проще увидеть все неправильные ссылки в инструментах разработчика в вашем браузере на вкладке “Консоль”.

Купить SSL-сертификат для сайта в Украине
Купить SSL-сертификат для сайта в Украине

Возможно, вас заинтересует

post thumbnail

Почему возникают ошибки SSL-соединения и как их исправить?

SSL — протокол защищенного соединения, представляет собой шифрование передаваемой информации между веб-сайтом и браузером, который гарантирует безопасность...

Angela Beklemysheva | Обновлено: 14.12.2021

post thumbnail

Как подключить SSL-сертификат к сайту

Мы неоднократно писали, переход на HTTPS – ключевой шаг для продвижения по рейтингу поисковых систем и...

Diana Honcharenko | Обновлено: 05.11.2021

post thumbnail

Процедура заказа сертификата Certum

В данной инструкции мы рассмотрим процедуру заказа сертификата от Центра сертификации Certum. Следуя этим...

Diana Honcharenko | Обновлено: 21.09.2021

post thumbnail

Что такое Let’s Encrypt и почему это не самый лучший выбор для бизнеса?

Let’s Encrypt (LE) является некоммерческим центром сертификации (CA), который выпускает бесплатные 90-дневные SSL сертификаты...

Diana Honcharenko | Обновлено: 03.11.2021