Как исправить смешанный контент

Jo-el van Bergen
Jo-el van Bergen
X
Rachel Andrew

Поддержка HTTPS – важный шаг на пути к защите сайта и его пользователей от атак. Однако смешанный контент может свести на нет все усилия. Браузеры будут все чаще блокировать небезопасный смешанный контент. Подробнее о смешанном контенте…

В этом руководстве мы расскажем о методах и инструментах, которые помогут вам устранить существующие проблемы со смешанным контентом и предотвратить появление новых.

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

При посещении страницы HTTPS в Google Chrome браузер предупреждает о смешанном контенте, показывая ошибки и предупреждения в консоли JavaScript.

В статье Что такое смешанный контент? вы найдете примеры и узнаете, как в инструментах разработчика Chrome сообщается о проблемах.

Пример пассивного смешанного контента с предупреждениями. Если браузер находит контент по URL с https, он автоматически обновляет его и показывает сообщение.

Инструменты разработчика Chrome, показывающие предупреждения, которые появляются при обнаружении и обновлении смешанного контента

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

Инструменты разработчика Chrome, показывающие предупреждения, которые появляются при блокировке активного смешанного контента

Если вы обнаружите подобные предупреждения для URL http:// на своем сайте, вам нужно будет исправить их в исходном коде сайта. Рекомендуем составить список таких URL и страниц, на которых они находятся, чтобы потом исправить их.

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

Вы можете искать смешанный контент непосредственно в исходном коде. Найдите http:// в исходном коде и посмотрите, есть ли там теги с атрибутами URL с протоколом HTTP. Обратите внимание, что наличие http:// в атрибуте href тегов привязки (<a>) часто не является проблемой смешанного контента, за некоторыми заметными исключениями, которые обсуждаются ниже.

Если ваш сайт опубликован с помощью системы управления контентом, то при публикации страниц могут быть вставлены ссылки на небезопасные URL. Например, изображения могут быть добавлены с полным URL, а не с относительным путем. Вам нужно будет найти и исправить их в контенте CMS.

Как исправить смешанный контент

Обнаружив смешанный контент в исходном коде сайта, вы можете устранить его, выполнив следующие действия.

Если вы видите в консоли сообщение о том, что запрос ресурса был автоматически переведен с HTTP на HTTPS, вы можете без опасений изменить URL ресурса в коде с http:// на https://. Чтобы проверить, доступен ли ресурс по защищенному протоколу, замените http:// на https:// в адресной строке браузера и попробуйте открыть URL в новой вкладке.

Если ресурс недоступен через https://, вы можете выбрать один из следующих вариантов:

  • Если возможно, разместите ресурс на другом хосте.
  • Скачайте контент и разместите его на своем сайте, если это не запрещено законом.
  • Полностью удалите ресурс со своего сайта.

После устранения проблемы откройте страницу, на которой вы обнаружили ошибку, и убедитесь, что она больше не появляется.

Нестандартное использование тегов

Не используйте на сайте нестандартные теги. Например, URL в тегах привязки (<a>) не приводят к ошибкам смешанного контента, поскольку они заставляют браузер перейти на новую страницу. Это означает, что обычно их не нужно исправлять. Однако некоторые скрипты галерей изображений переопределяют функциональность тега <a> и загружают HTTP-ресурс, указанный в атрибуте href, в лайтбокс на странице, что приводит к проблеме со смешанным контентом.

Как работать со смешанным контентом в больших масштабах

Описанные выше действия вручную хорошо подходят для небольших сайтов. Однако на крупных сайтах или сайтах, над которыми работают несколько команд разработчиков, может быть сложно отслеживать весь загружаемый контент. Чтобы упростить эту задачу, вы можете использовать Content Security Policy. Это позволит браузеру уведомлять вас о смешанном контенте и предотвращать неожиданную загрузку небезопасных ресурсов на ваших страницах.

Content Security Policy

Content Security Policy (CSP) – это многофункциональный инструмент браузера, который можно использовать для управления смешанным контентом в больших масштабах. Механизм отчетов CSP можно использовать для отслеживания смешанного контента на сайте и применения правил, защищающих пользователей путем обновления или блокировки смешанного контента.

Чтобы включить эти функции для страницы, добавьте заголовок Content-Security-Policy или Content-Security-Policy-Report-Only в ответ, отправляемый с вашего сервера. Кроме того, вы можете задать Content-Security-Policy (но не Content-Security-Policy-Report-Only) с помощью тега <meta> в разделе <head> страницы.

Как найти смешанный контент с помощью Content Security Policy

Вы можете использовать Content Security Policy, чтобы собирать отчеты о смешанном контенте на сайте. Чтобы включить эту функцию, добавьте директиву Content-Security-Policy-Report-Only в заголовок ответа для своего сайта.

Заголовок ответа:

Content-Security-Policy-Report-Only: default-src https: 'unsafe-inline' 'unsafe-eval'; report-uri https://example.com/reportingEndpoint

Когда пользователь посещает страницу на вашем сайте, его браузер отправляет отчеты в формате JSON обо всем, что нарушает политику безопасности контента, на адрес https://example.com/reportingEndpoint. В этом случае отчет отправляется каждый раз, когда дополнительный ресурс загружается по протоколу HTTP. В этих отчетах указывается URL страницы, на которой произошло нарушение, и URL подресурса, нарушившего правила. Если вы настроите конечную точку отчетов для регистрации этих отчетов, вы сможете отслеживать смешанный контент на своем сайте, не посещая каждую страницу самостоятельно.

Однако есть два исключения:

  • Пользователи должны посещать вашу страницу в браузере, который распознает заголовок CSP. Это относится к большинству современных браузеров.
  • Вы получаете отчеты только для страниц, которые посещали ваши пользователи. Поэтому если у вас есть страницы с низким трафиком, то может пройти некоторое время, прежде чем вы получите отчеты по всему сайту.

Дополнительную информацию и пример конечной точки можно найти в руководстве Content Security Policy.

Альтернативные варианты отправки отчетов с помощью CSP

Если ваш сайт размещен на платформе, например Blogger, у вас может не быть доступа к изменению заголовков и добавлению CSP. Вместо этого можно использовать поискового робота, например HTTPSChecker или Mixed Content Scan, который найдет проблемы на вашем сайте.

Обновление небезопасных запросов

Browser Support

  • Chrome: 44.
  • Edge: 17.
  • Firefox: 48.
  • Safari: 10.1.

Source

Браузеры начинают обновлять и блокировать небезопасные запросы. Вы можете использовать директивы CSP, чтобы принудительно обновлять или блокировать такие объекты.

Директива CSP upgrade-insecure-requests указывает браузеру, что перед отправкой сетевых запросов необходимо обновить небезопасные URL.

Например, если на странице есть тег изображения с URL, в котором используется протокол HTTP, например: <img src="https://example.com/image.jpg">

Вместо этого браузер отправляет защищенный запрос на адрес https://example.com/image.jpg, что позволяет избежать смешанного контента.

Чтобы включить эту функцию, отправьте заголовок Content-Security-Policy со следующей директивой:

Content-Security-Policy: upgrade-insecure-requests

или встроить эту директиву в раздел <head> документа с помощью элемента <meta>:

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

Как и в случае с автоматическим обновлением в браузере, если ресурс недоступен по протоколу HTTPS, запрос на обновление завершается ошибкой и ресурс не загружается. Это необходимо для обеспечения безопасности страницы. Директива upgrade-insecure-requests позволяет не только автоматически обновлять браузер, но и пытаться обновлять запросы, которые браузер в настоящее время не обновляет.

Директива upgrade-insecure-requests каскадно применяется к документам <iframe>, обеспечивая защиту всей страницы.

Назад
Что такое смешанный контент?
Далее
Когда использовать HTTPS для локальной разработки