Смешанный контент на сайте: что это и как его найти

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

Не всякий случай одинаково серьёзен. Если по http подключена обычная картинка, современный браузер чаще всего сам запросит её по https, и посетитель ничего не заметит, а в консоли появится сообщение. Если же по http подключён скрипт, стиль или фрейм с формой, браузер его заблокирует. Страница выглядит сломанной или перестаёт работать, хотя сервер отвечает кодом 200.

Что такое смешанный контент

Спецификация Mixed Content от W3C делит такие ресурсы на две группы, и от группы зависит поведение браузера.

В документации MDN это сформулировано так: браузеры «автоматически обновляют запросы изображений, видео и аудио с HTTP до HTTPS и блокируют небезопасные запросы всех остальных типов» (перевод фрагмента). Если у ресурса нет версии по https, он не загрузится. Блокируется и обновляемый ресурс, если в адресе вместо домена стоит IP.

Почему даже картинки по http считаются проблемой, объясняет руководство web.dev: по открытому соединению их можно подменить или отследить, какие страницы смотрит человек. Поведение зависит от версии браузера, поэтому не рассчитывайте на автоматическое обновление и исправляйте адреса в источнике.

Важная деталь: обычная ссылка на http-адрес смешанным контентом не считается. Это просто переход на другую страницу. Проблема возникает только тогда, когда ресурс подгружается в саму страницу.

Чем он опасен для сайта и бизнеса

Сайт по https защищает данные между посетителем и сервером. Ресурс, загруженный по http, идёт открытым текстом, поэтому его можно подменить по дороге, например в сети общественного Wi-Fi. Для скрипта это особенно неприятно: подменённый скрипт получает на странице те же права, что и ваш собственный.

Для бизнеса последствия обычно проще и ближе:

• не работает форма заявки, калькулятор или корзина, потому что заблокирован скрипт;
• страница «поехала», потому что не загрузился стиль или шрифт;
• в адресной строке нет замка, и посетитель сомневается, стоит ли вводить телефон;
• вы платите за сертификат и переход на https, а отдача от них меньше, чем могла бы быть.

Как нарушенная защита соединения выглядит для клиента, показывает статья «Сертификат SSL истёк: что делать». Причина там другая, но впечатление у посетителя похожее: сайту нельзя доверять.

Откуда он берётся

Чаще всего виновата не новая разработка, а наследство. Типичные источники:

Отдельный случай — сторонние ресурсы, которые вообще нельзя открыть по https. Если у поставщика нет защищённой версии файла, его лучше заменить или хранить копию у себя.

Как найти незащищённые ресурсы

Для одной страницы хватит браузера. Для всего сайта нужен обход всех адресов: вручную это быстро становится невозможным.

1. Откройте страницу по https и нажмите F12 (или Ctrl+Shift+I, на Mac — Cmd+Option+I).
2. Перейдите на вкладку «Консоль». Браузер пишет там сообщения примерно такого вида: «Mixed Content: The page at … was loaded over HTTPS, but requested an insecure …», и называет адрес проблемного ресурса.
3. Откройте вкладку «Сеть» (Network), обновите страницу и введите в поле фильтра http:. В списке останутся запросы, ушедшие по незащищённому адресу.
4. Откройте исходный код страницы (Ctrl+U) и найдите поиском http://. Так видны и адреса, которые лежат в стилях или подставляются скриптами.

Набор ресурсов на каждой странице свой. Главная может быть чистой, а в одной статье трёхлетней давности окажется картинка по http. Поэтому после переезда на https проверяйте не только главную, но и шаблоны каждого типа: статью, карточку товара, страницу с формой, страницу с картой.

Отдельно смотрите ресурсы, которые появляются только после клика, прокрутки или согласия на cookie. В консоли они видны, только если вы сами их вызвали.

Как исправить по шагам

Порядок действий зависит от того, где лежит адрес, но общая схема одна.

1. Составьте список адресов с http, найденных на странице или по всему сайту, и определите, где каждый хранится: в базе, в шаблоне, в стилях или в коде стороннего виджета.
2. Для ресурсов на вашем домене замените адрес на относительный путь (/images/photo.jpg) или на https-адрес. Относительный путь надёжнее: он не сломается при следующем переезде.
3. Для базы данных сделайте резервную копию и запустите массовую замену http://ваш-домен на https://ваш-домен. У CMS и конструкторов для этого обычно есть штатный инструмент или плагин. Если данные хранятся в сериализованном виде, простая замена текста может их испортить, поэтому берите инструмент, который это учитывает.
4. Для сторонних ресурсов проверьте, отдаёт ли поставщик их по https. Обычно достаточно заменить http:// на https:// и открыть адрес в браузере. Если не открывается, возьмите свежий код у поставщика или замените сервис.
5. Убедитесь, что http-версия сайта постоянно перенаправляет на https и цепочка не длиннее одного шага. Как настроить редирект при переезде, разбирает статья «Переезд сайта на новый домен», а саму цепочку покажет проверка редиректов.
6. Откройте исправленные страницы заново с очищенным кэшем и убедитесь, что в консоли нет предупреждений.

Если исправить всё сразу нельзя, есть временная мера — заголовок Content-Security-Policy с директивой upgrade-insecure-requests. Она велит браузеру обращаться ко всем http-адресам страницы как к https. Работает это, только если ресурс действительно доступен по https: иначе, как сказано в MDN, запрос завершится ошибкой без возврата к http. Считайте директиву страховкой на время правок, а не решением, и всё равно поменяйте адреса в источнике.

Как не допустить повторения

Исправленное ломается снова, если не поменять процесс.

• Договоритесь с менеджерами, которые вставляют тексты и картинки через админку: не копировать ссылки с http:// и загружать файлы в медиатеку, а не подключать по внешним адресам.
• Для кода сторонних сервисов проверяйте протокол при каждой вставке.
• После обновления темы, плагина или переезда хостинга заново открывайте шаблоны ключевых страниц с консолью.
• Включите проверку смешанного содержимого в ежемесячный регламент. Пример такого списка есть в статье «Что проверять на сайте клиента ежемесячно».

Веб-студии, которая ведёт много клиентских сайтов, вручную такое не потянуть. Зачем нужны регулярные автоматические проверки и что они охватывают, описано в материале «Мониторинг сайта: что это, что он проверяет и нужен ли он небольшому сайту».

Как проверить смешанное содержимое прямо сейчас

Для одной страницы достаточно консоли разработчика, как описано выше. Для автоматической проверки есть проверка смешанного содержимого Обходчика: она открывает страницу по https и показывает ресурсы, которые подгружаются по http. Регистрация для разовой проверки не нужна.

Если после исправления замок всё равно не появился, проверьте сам сертификат: срок действия, домен и цепочку покажет проверка SSL. Иногда проблема не в ресурсах, а в сертификате, и тогда правка картинок ничего не изменит.