Mixed Content после установки SSL: что это такое и как исправить Печать

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

Чаще всего причиной становится ошибка Mixed Content.

На первый взгляд сайт может открываться по HTTPS без каких-либо проблем, но некоторые элементы страницы продолжают загружаться по старому протоколу HTTP. Именно это и вызывает предупреждения браузера.

В этой статье разберём, что такое Mixed Content, как его найти и как полностью устранить проблему.

Что такое Mixed Content

Mixed Content (смешанный контент) возникает в том случае, когда сама страница открывается по HTTPS, но часть её содержимого загружается по HTTP.

Например:

• HTML-страница работает через HTTPS;
• изображения загружаются через HTTP;
• CSS-файлы подключаются через HTTP;
• JavaScript-файлы используют HTTP-ссылки;
• шрифты загружаются через HTTP.

Для современных браузеров это считается угрозой безопасности.

В результате браузер может:

• показывать предупреждение о небезопасном соединении;
• скрывать значок замка в адресной строке;
• блокировать загрузку отдельных ресурсов;
• отображать сообщение Mixed Content в консоли разработчика.

Как выглядит ошибка

В браузере Google Chrome можно открыть инструменты разработчика:

F12 → Console

Обычно ошибка выглядит примерно так:

Mixed Content: The page at 'https://example.com'
was loaded over HTTPS, but requested an insecure resource
'http://example.com/image.jpg'

Это означает, что страница открыта по HTTPS, но одно из изображений загружается по HTTP.

Почему появляется Mixed Content

Самые распространённые причины:

• старые ссылки в базе данных сайта;
• жёстко прописанные HTTP-адреса в шаблоне;
• устаревшие плагины;
• внешние скрипты, подключаемые по HTTP;
• изображения, добавленные до установки SSL;
• неправильные настройки CMS.

Особенно часто проблема встречается после переноса сайта на HTTPS.

Проверка через браузер

Самый простой способ найти проблему:

1. Откройте сайт.
2. Нажмите F12.
3. Перейдите на вкладку Console.
4. Обновите страницу.

Браузер покажет все ресурсы, которые продолжают загружаться по HTTP.

Проверка через онлайн-сервисы

Для поиска смешанного контента можно использовать специальные инструменты проверки SSL.

Они позволяют быстро определить:

• проблемные изображения;
• CSS-файлы;
• JavaScript;
• шрифты;
• сторонние ресурсы.

Такая проверка особенно полезна для крупных сайтов.

Исправление ссылок в WordPress

Если сайт работает на WordPress, сначала проверьте настройки:

Настройки → Общие

Параметры:

Адрес WordPress (URL)
Адрес сайта (URL)

должны начинаться с:

https://

Если указан HTTP, измените адрес на HTTPS.

Замена HTTP на HTTPS в базе данных

После перехода на SSL в базе данных часто остаются старые ссылки.

Например:

http://example.com/image.jpg

необходимо заменить на:

https://example.com/image.jpg

Для WordPress удобно использовать плагины:

• Better Search Replace;
• WP Migrate Lite;
• Search & Replace.

Перед массовой заменой обязательно создайте резервную копию базы данных.

Проверка файлов темы

Иногда HTTP-ссылки прописаны непосредственно в коде шаблона.

Проверьте файлы:

header.php
footer.php
functions.php

и другие файлы темы.

Пример неправильного подключения:

<script src="http://example.com/script.js"></script>

Правильно:

<script src="https://example.com/script.js"></script>

или:

<script src="//example.com/script.js"></script>

Проверка внешних сервисов

Иногда проблема находится не на самом сайте.

Проверьте подключение:

• рекламных сетей;
• онлайн-чатов;
• аналитики;
• виджетов;
• счётчиков;
• сторонних шрифтов.

Если сервис поддерживает HTTPS, используйте только HTTPS-ссылки.

Если не поддерживает, лучше отказаться от его использования.

Настройка принудительного HTTPS

После исправления ссылок рекомендуется настроить автоматическое перенаправление с HTTP на HTTPS.

Для Apache в файле .htaccess:

RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

Для Nginx:

server {
    listen 80;
    server_name example.com www.example.com;
    return 301 https://$host$request_uri;
}

Это предотвратит появление новых HTTP-запросов.

Использование Content-Security-Policy

Дополнительно можно включить автоматическое обновление HTTP-ссылок до HTTPS.

Пример заголовка:

Content-Security-Policy: upgrade-insecure-requests

Однако использовать его рекомендуется только после устранения основных ошибок Mixed Content.

Частые ошибки

SSL установлен, но замок не отображается

Чаще всего причина связана с изображениями или скриптами, которые продолжают загружаться по HTTP.

Ошибок не видно на странице

Откройте консоль браузера. Большинство ошибок Mixed Content отображаются именно там.

После установки SSL часть сайта перестала работать

Возможно, некоторые внешние скрипты не поддерживают HTTPS и блокируются браузером.

Всё исправлено, но предупреждение осталось

Очистите:

• кэш браузера;
• кэш сайта;
• кэш CDN;
• кэш Cloudflare.

После этого выполните повторную проверку.

Рекомендации

После установки SSL рекомендуется сразу проверить:

• настройки сайта;
• ссылки в базе данных;
• изображения;
• CSS-файлы;
• JavaScript;
• сторонние сервисы;
• перенаправление HTTP на HTTPS.

В большинстве случаев Mixed Content исправляется заменой старых HTTP-ссылок на HTTPS. После устранения проблемы браузеры начинают отображать защищённое соединение корректно, а посетители больше не видят предупреждений безопасности.