Смешанный контент возникает, когда HTTPS-страница загружает подресурсы (изображения, скрипты, стили, шрифты) по незащищённому HTTP. Браузеры блокируют или предупреждают об этом, потому что небезопасный ресурс на защищённой странице подрывает безопасность всей страницы.
Два типа смешанного контента
| Тип | Примеры | Поведение браузера |
|---|---|---|
| Активный (опасный) | Скрипты, iframe, XHR, CSS | Блокируется всеми браузерами |
| Пассивный (отображаемый) | Изображения, аудио, видео | Отображается с предупреждением / ухудшенным значком замка |
Активный смешанный контент может изменять страницу (злоумышленник при атаке «человек посередине» мог бы внедрить вредоносный JavaScript), поэтому браузеры полностью его блокируют. Пассивный смешанный контент менее опасен, но всё равно ухудшает индикатор безопасности.
Как найти смешанный контент
Инструменты разработчика в браузере
- Откройте сайт в Chrome/Firefox
- Откройте DevTools (F12) → вкладка Консоль
- Ищите ошибки вида:
Mixed Content: The page at 'https://example.com' was loaded over HTTPS, but requested an insecure resource 'http://example.com/image.jpg'.
Сканирование из командной строки
curl -s https://yourdomain.com | grep -oP 'http://[^"'"'"'> ]+' | sort -uРаспространённые причины и исправления
Жёстко закодированные URL с http:// в HTML
<!-- Проблема -->
<img src="http://example.com/logo.png">
<!-- Исправление: используйте протокол-независимый или HTTPS -->
<img src="https://example.com/logo.png">
<img src="//example.com/logo.png">
<img src="/logo.png">Лучшая практика: используйте относительные пути (/images/logo.png) везде, где возможно.
Сторонние ресурсы всё ещё на HTTP
<!-- Проблема -->
<script src="http://cdn.example.com/library.js"></script>
<!-- Исправление -->
<script src="https://cdn.example.com/library.js"></script>Если сторонний ресурс не поддерживает HTTPS, найдите альтернативного провайдера или разместите ресурс самостоятельно.
Контент базы данных с жёстко закодированными URL
WordPress и другие CMS хранят абсолютные URL в базе данных. После миграции на HTTPS:
-- WordPress: обновление URL в записях
UPDATE wp_posts SET post_content = REPLACE(post_content, 'http://example.com', 'https://example.com');
UPDATE wp_options SET option_value = REPLACE(option_value, 'http://example.com', 'https://example.com');Или используйте плагин Better Search Replace.
CSS с HTTP-ссылками
/* Проблема */
background-image: url('http://example.com/bg.jpg');
/* Исправление */
background-image: url('https://example.com/bg.jpg');
background-image: url('/images/bg.jpg');Content Security Policy (CSP) — предотвращение будущего смешанного контента
Добавьте CSP-заголовок, блокирующий HTTP-ресурсы:
Nginx:
add_header Content-Security-Policy "upgrade-insecure-requests" always;Apache:
Header always set Content-Security-Policy "upgrade-insecure-requests"upgrade-insecure-requests указывает браузерам автоматически преобразовывать запросы http:// в https:// — подстраховка, пока вы исправляете исходные URL.
Систематическое исправление: полный аудит сайта
Для тщательной очистки проведите аудит всего сайта:
1. Поиск HTTP-ссылок
# Сканирование всех HTML-файлов на наличие http:// URL
find /var/www/html -name '*.html' -o -name '*.php' | xargs grep -l 'http://' 2>/dev/null
# Сканирование CSS-файлов
find /var/www/html -name '*.css' | xargs grep -l 'http://' 2>/dev/null
# Сканирование JavaScript-файлов
find /var/www/html -name '*.js' | xargs grep -l 'http://' 2>/dev/null2. Исправление URL по категориям
| Источник | Метод исправления |
|---|---|
| Собственные ресурсы | Изменить на относительные пути (/images/logo.png) |
| Ресурсы CDN | Обновить на https://cdn.example.com/... |
| Сторонние скрипты | Обновить URL или найти HTTPS-альтернативу |
| Встроенный CSS | Поиск и замена http:// → https:// |
| Контент базы данных (WordPress) | wp search-replace 'http://yourdomain.com' 'https://yourdomain.com' |
| Файлы шаблонов/тем | Редактирование исходных файлов напрямую |
3. Проверка через DevTools браузера
После исправления откройте каждую страницу → DevTools (F12) → вкладка «Консоль». Чистая страница не показывает предупреждений о смешанном контенте. Значок замка должен быть сплошным (без надлома или предупреждающего треугольника).
4. Предотвращение будущего смешанного контента
Добавьте этот мета-тег в <head> вашего HTML как постоянную подстраховку:
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">Или установите его на уровне сервера через конфигурацию Nginx/Apache (показано выше).
Типы контента, которые часто вызывают смешанный контент
| Тип контента | Где проверять | Пример |
|---|---|---|
| Изображения | <img src="http://..."> | Загруженные изображения, аватары, логотипы |
| Скрипты | <script src="http://..."> | Аналитика, виджеты чата, рекламные скрипты |
| Стили | <link href="http://..."> | Внешние шрифты, CSS-фреймворки |
| Шрифты | @font-face { src: url("http://...") } | Google Fonts (обычно без проблем), пользовательские шрифты |
| iframe | <iframe src="http://..."> | Встроенные видео, карты, виджеты |
| XHR/Fetch | fetch("http://...") | API-вызовы в JavaScript |
| Фоновые изображения | background-image: url("http://...") | CSS-фоны |
Часто задаваемые вопросы
Повлияет ли смешанный контент на SEO?
Не напрямую. Google индексирует по протоколу URL страницы, а не подресурсов. Однако если смешанный контент вызывает предупреждения браузера или блокирует видимый контент, пользовательский опыт ухудшается — что может косвенно навредить позициям через повышенный показатель отказов.
Можно ли просто использовать upgrade-insecure-requests и не исправлять URL?
Это работает как временная мера, но исправление исходных URL лучше. CSP-заголовок зависит от поддержки браузером (все современные браузеры поддерживают, но некоторые старые клиенты — нет) и добавляет дополнительный заголовок к каждому ответу.
На моём сайте сотни жёстко закодированных HTTP-URL. Как исправить быстрее всего?
Немедленно добавьте CSP-заголовок upgrade-insecure-requests (одна строка конфигурации сервера). Затем выполните глобальный поиск и замену в кодовой базе и базе данных. Используйте grep -r 'http://' src/ для поиска жёстко закодированных URL в коде.