Что означает "смешанный контент" и почему браузер заблокировал ваше изображение

Вы загрузили страницу по HTTPS, замок есть в адресной строке, но изображение отсутствует, скрипт не запустился или целый виджет не появился. Откройте консоль - и вот оно: «Смешанный контент: страница была загружена по HTTPS, но запрашивала небезопасный ресурс по HTTP. Этот запрос был заблокирован».

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

Что означает “смешанный” в этом случае

Страница, доставленная по HTTPS, зашифрована, и замок - это обещание посетителю, что всё на ней пришло с такой же защитой. Затем страница запрашивает ресурс - изображение, скрипт, таблицу стилей, шрифт - используя простой адрес http://. Этот ресурс прибыл бы незашифрованным, по соединению, которое кто-либо в сети может прочитать или изменить.

Вот в чём смешивание: безопасная страница и небезопасный запрос внутри неё. Браузер не будет молча нарушать обещание, которое дал замок, поэтому он вмешивается. Что он будет делать дальше, зависит от того, насколько опасен ресурс.

Заблокирован или просто предупреждение

Не весь смешанный контент обрабатывается одинаково, и это та часть, которая объясняет, почему иногда изображение загружается с предупреждением, а иногда скрипт полностью исчезает.

Активный контент полностью блокируется. Скрипты, таблицы стилей, iframe и всё, что может изменить страницу или запустить код. Если один из них запрашивается по HTTP, браузер полностью отказывается его загружать, потому что изменённый скрипт может переписать всю страницу. Это то, что нарушает функции: виджет платежей, аналитический тег, карта, которая никогда не появляется.

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

Как найти и исправить это

Консоль указывает на точный ресурс. Прочитайте URL, на который она жалуется, и исправление почти всегда состоит в том, чтобы запросить этот ресурс по https:// вместо http://.

• Если ресурс имеет версию HTTPS, используйте её. Большинство имеет; изменение http:// на https:// в вашей разметке - это полное исправление. Если их много, протокол-относительный //example.com/... или директива content-security-policy upgrade-insecure-requests исправляет их оптом.
• Если ресурс не имеет версии HTTPS, вы не можете его включить. Ресурс третьей стороны, доступный только по HTTP, должен быть заменён, пропущен через ваш собственный сервер HTTPS или отброшен. Нет никакой настройки браузера, которая сделает это безопасным, и попрос посетителя отключить защиту - не решение.
• Следите за этим в данных, а не только в разметке. URL, хранящийся в вашей базе данных, возвращаемый API или вставленный в поле с богатым текстом, - обычная причина, по которой смешанный контент переживает миграцию на HTTPS: шаблоны были исправлены, а содержимое - нет.

Запрос, который не удаётся таким образом, во многом похож на запрос, который не удался по другим причинам, поэтому строка консоли имеет значение. Если консоль вместо этого сообщает, что запрос был заблокирован политикой CORS, или вернулся как TypeError: Failed to fetch, то это другая проблема с другим решением - первое слово ошибки делает большую работу.

Почему снимка экрана недостаточно для докладывания об этом

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

Журнал консоли, который он захватывает - это то место, где находится сообщение о смешанном контенте со всеми названиями ресурсов, поэтому тот, кто разбирается с докладом, может увидеть, какой небезопасный URL исправить, не воспроизводя страницу и не открывая инструменты разработчика, чтобы найти его.

В одном абзаце

Смешанный контент - это небезопасный ресурс http://, запрашиваемый безопасной страницей https://, и браузер блокирует его - полностью для скриптов и другого активного контента, мягче для изображений - скорее всего, чтобы не нарушить обещание, которое дал замок. Исправление почти всегда состоит в том, чтобы запросить ресурс по HTTPS как в вашей разметке, так и в ваших сохранённых данных; если у него нет версии HTTPS, он не может быть безопасно включён вообще. И поскольку отказ - это молчаливый пробел на странице с причиной, скрытой в консоли, имеет смысл захватить его, а не описывать.