Перейти к содержимому

Mixed Content (HTTPS + HTTP): почему браузер ругается и как это исправить

Mixed Content (HTTPS + HTTP): почему браузер ругается и как это исправить

Переход на HTTPS — важнейший шаг для любого современного сайта. SSL-сертификат даёт не только зелёный замочек в адресной строке, но и доверие посетителей, лучшие позиции в поиске и защиту данных. Однако после установки сертификата многие сталкиваются с неприятным сюрпризом: браузер показывает предупреждение «Mixed Content» (смешанный контент). Разбираемся, почему это происходит и как полностью избавиться от проблемы.

Что такое Mixed Content?

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

Различают два типа:

  • Блокируемый (активный) смешанный контент — скрипты, iframe, стили, XHR-запросы, WebSocket. Браузер полностью блокирует их загрузку по HTTP на HTTPS-странице, так как это прямой путь к компрометации данных.
  • Неблокируемый (пассивный) смешанный контент — изображения, аудио, видео. Браузер загружает их, но показывает предупреждение — значок щита с восклицательным знаком в адресной строке.

Почему это проблема?

  1. Потеря доверия посетителей — пользователь видит значок «не защищено» и может покинуть сайт
  2. Снижение SEO — поисковые системы учитывают безопасность сайта
  3. Уязвимость для атак — злоумышленник может перехватить HTTP-запросы и внедрить вредоносный код
  4. Неполная функциональность — скрипты, загруженные по HTTP, могут быть заблокированы, что ломает работу сайта

Как найти смешанный контент?

1. Консоль браузера (Chrome DevTools)

Самый быстрый способ — открыть консоль разработчика (F12 → Console). Браузер покажет сообщения вида:
— «Mixed Content: The page at ‘https://…’ was loaded over HTTPS, but requested an insecure image ‘http://…’»
— «Mixed Content: The page at ‘https://…’ was loaded over HTTPS, but requested an insecure script ‘http://…’. This request has been blocked…»

2. Инструмент проверки SSL

Используйте сервис Why No Padlock — введите URL страницы, и сервис найдёт все элементы, загружаемые по HTTP.

3. Плагины для WordPress

  • Really Simple SSL — автоматически находит и исправляет смешанный контент
  • SSL Insecure Content Fixer — настраиваемая фильтрация HTTP-ресурсов
  • Better Search Replace — замена http:// на https:// в базе данных

4. Ручной поиск через базу данных

SELECT * FROM wp_posts 
WHERE post_content LIKE '%src="http://%' 
   OR post_content LIKE '%href="http://%';

Как исправить Mixed Content

Способ 1: Плагин Really Simple SSL

Самый простой путь для новичков:
1. Установите плагин Really Simple SSL
2. Активируйте, перейдите в настройки
3. Плагин автоматически включит SSL Hardening и активирует Mixed Content Fixer
4. Закрепите в настройках галочку «Enable Mixed Content Fixer»

Really Simple SSL перехватывает HTML-ответ сервера и заменяет http:// на // (протокол-относительные ссылки) или https:// во всех ресурсах на лету.

Способ 2: Замена в базе данных

Старые записи в WordPress часто содержат абсолютные ссылки на изображения и файлы:

http://example.com/wp-content/uploads/2024/photo.jpg
→ https://example.com/wp-content/uploads/2024/photo.jpg

Используйте плагин Better Search Replace или выполните SQL-запрос (осторожно — сделайте бэкап!):

UPDATE wp_posts 
SET post_content = REPLACE(post_content, 
    'http://example.com/wp-content/', 
    'https://example.com/wp-content/');

UPDATE wp_postmeta 
SET meta_value = REPLACE(meta_value, 
    'http://example.com/', 
    'https://example.com/');

Способ 3: Исправление темы и плагинов

Часто смешанный контент «зашит» прямо в коде темы:

// В functions.php или в файлах темы
// ПЛОХО — жёстко зашитый HTTP
echo '<img src="http://example.com/images/logo.png">';

// ХОРОШО — протокол-относительный URL
echo '<img src="//example.com/images/logo.png">';

// ЕЩЁ ЛУЧШЕ — через WordPress-функции
echo '<img src="' . esc_url(home_url('/images/logo.png')) . '">';

Проверьте следующие файлы темы:
— header.php — подключение CSS, JS, favicon
— footer.php — скрипты аналитики, шрифты
— functions.php — enqueue стилей и скриптов

Убедитесь, что регистрация стилей и скриптов использует правильный синтаксис:

function my_theme_scripts() {
    // ПРОТОКОЛ-ОТНОСИТЕЛЬНЫЙ — не нужно указывать протокол
    wp_enqueue_style('google-fonts', '//fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

    // ЧЕРЕЗ home_url() — WordPress сам подставит нужный протокол
    wp_enqueue_script('main-js', get_template_directory_uri() . '/js/main.js', [], '1.0', true);
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');

Способ 4: Настройка .htaccess (редирект без кода)

Если вы твёрдо намерены работать только по HTTPS, добавьте редирект в .htaccess и Content-Security-Policy:

# Принудительный HTTPS
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}/$1 [R=301,L]

# Блокировка смешанного контента через CSP
Header always set Content-Security-Policy "upgrade-insecure-requests;"

Директива upgrade-insecure-requests заставляет браузер автоматически переводить все HTTP-запросы в HTTPS на уровне браузера — без изменения кода сайта.

Как проверить, что всё исправлено?

  1. Откройте несколько страниц сайта в Chrome
  2. Нажмите F12 → вкладка Console
  3. Если нет сообщений о Mixed Content — всё в порядке
  4. Также проверьте через SSL Labs или Why No Padlock

Заключение

Mixed Content — одна из самых частых проблем после перехода на HTTPS. К счастью, она решается за 15-30 минут либо через плагин Really Simple SSL, либо заменой ссылок в базе данных. Самое важное — не игнорировать предупреждения браузера. Зелёный замочек в адресной строке — это не просто «красиво», это сигнал доверия для каждого посетителя вашего сайта.

Помните: один незащищённый скрипт или iframe на HTTPS-странице сводит на нет всю защиту SSL-сертификата. Проверяйте сайт после любого обновления темы, плагинов или добавления нового контента.