Смешанный контент (Mixed Content) — это ситуация, при которой защищённая страница (открытая по HTTPS) загружает ресурсы (картинки, скрипты, стили) по незащищённому протоколу HTTP. Браузеры блокируют или ограничивают такие ресурсы, выводя тревожные предупреждения и понижая доверие к сайту. Ниже пошаговая инструкция, как выявить и полностью отключить смешанный контент, чтобы пользователи никогда не видели надоедливых «блокировок».
Почему возникает смешанный контент
Типичные причины:
- В коде забыли заменить http:// на https:// в ссылках на CSS, JS, изображения, шрифты.
- Внешние библиотеки подключены без указания протокола (
//example.com/lib.js), а CDN отдаёт по HTTP. - Редиректы с HTTP-версии ресурса, которые не обновили после переезда на HTTPS;
- Фоновые изображения или
@font-faceуказаны в CSS-файле по HTTP.
Как обнаружить смешанный контент
2.1 Быстрая проверка в DevTools
- Откройте страницу в Chrome, нажмите F12 → вкладка Console.
- Ищите сообщения вида:
Mixed Content: The page at 'https://site.ru' was loaded over HTTPS, but requested an insecure script 'http://site.ru/js/app.js'
2.2 Аудит в Lighthouse
В той же панели «Lighthouse → Best Practices» запустите аудит; В отчёте будет раздел Does not use HTTPS, где перечислены все проблемные ресурсы.
2.3 Массовый поиск по коду
Get-ChildItem -Recurse -File | Select-String -Pattern "http://"
Способы отключения смешанного контента
3.1 Заменить все ссылки на HTTPS
- Замените вручную каждую строку http://site.ru на https://site.ru.
- Или используйте относительные URL //site.ru (без протокола), но только если уверены, что CDN поддерживает HTTPS.
- Для картинок и стилей можно использовать относительные пути
/images/logo.png.
3.2 Правила веб-сервера
Заставьте браузер автоматически «переводить» HTTP-ресурсы в HTTPS с помощью заголовков.
Apache (.htaccess)
Header always set Content-Security-Policy "upgrade-insecure-requests"
Nginx
add_header Content-Security-Policy "upgrade-insecure-requests";
3.3 Использовать CSP (Content Security Policy)
CSP позволяет жёстко блокировать любые HTTP-ресурсы:
Content-Security-Policy: default-src https:; img-src https: data:; script-src https:; style-src https:;
Если ресурса по HTTP нет, браузер просто не загрузит его и не покажет предупреждение пользователю.
Дополнительные советы
- Проверьте robots.txt и sitemap.xml — они тоже не должны содержать HTTP-ссылок.
- Настройте HSTS, чтобы браузер всегда обращался к вашему сайту только по HTTPS:
Strict-Transport-Security: max-age=63072000; includeSubDomains; preload - Используйте сканеры (SSL Labs, WhyNoPadlock) для автоматической проверки смешанного контента.
Чек-лист «никаких предупреждений»
- Все внутренние ссылки и ресурсы, только HTTPS.
- Внешние CDN подключены по HTTPS.
- Включён заголовок upgrade-insecure-requests.
- Прописана CSP с запретом на HTTP.
- Проверены DevTools и Lighthouse — предупреждений нет.
После выполнения всех пунктов ваш сайт будет выдавать идеально «зелёный замок», а пользователи никогда не увидят пугающих сообщений о небезопасном контенте.