Что такое смешанное содержимое (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 для 1С-Битрикс