Ошибка «Небезопасный контент заблокирован» (РЕШЕНО)

На своём сайте, или на других сайтах, которые вы посещаете, вы можете увидеть предупреждения вроде таких (в Google Chrome):

Небезопасный контент заблокирован
Страница пытается загрузить скрипты из непроверенных источников.

В зависимости от браузера предупреждение может выглядеть так:

Firerfox заблокировал незащищённые части этой страницы.

В браузере от Windows:

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

Ну и в браузере Opera так:

Заблокированный небезопасный контент
Opera заблокировала контент из небезопасных источников

Если вы обычный посетитель, то возникает сразу несколько вопросов:

• опасно ли находиться на таком сайте
• можно ли нажать кнопку «Показать небезопасное содержимое» или «Загрузить небезопасные скрипты»
• что вообще это означает?

Если вы ещё и веб-мастер, то вам нужно решить вопрос об исправлении этой проблемы.

Что такое заблокированный небезопасный контент

Суть этой ошибки в том, что страница, которую вы просматриваете, передаётся по HTTPS протоколу. То есть вы с неё загружаете информацию по зашифрованному соединению. Но некоторые части этой страницы используют обычный протокол HTTP, при котором данные передаются в незашифрованном виде.

Отсюда первое следствие: если страница изначально использует HTTP, то там не может возникнуть эта ошибка.

Среди «небезопасного содержимого, контента» могут быть:

• картинки
• файлы стилей
• файлы шрифтов
• скрипты JavaScript
• фреймы iframe

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

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

Как исправить ошибку со смешенным содержимым (Mixed Content)

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

Причина уже описана выше, только уточню, что имеются ввиду не просто ссылки c HTTP, например, ссылка на страницу или сайт http://suay.ru/ - такие ссылки не вызывают описанную ошибку. Имеются ввиду именно элементы, которые являются частью страницы, внедряются как картинки, шрифты, скрипты, стили, фреймы.

Если вы запустили свой сайт изначально на HTTP и уже добавили несколько статей, то в них ссылки на изображения будут с HTTP протоколом. В то время как в новых статья, написанных после перехода на HTTPS, ссылки будут уже с HTTPS. То есть получается, что старые статьи нужно немного подправить вручную или автоматически с помощью выполнения соответствующего запроса к базе денных. Но для сайтов на WordPress есть ещё более простой вариант — плагин SSL Insecure Content Fixer.

Установите и активируйте его, после этого будут доступны следующие основные настройки:

Выключено

Небезопасное содержимое не исправляется

Простой

Самый быстрый метод с наименьшим воздействием на производительность сайта

• скрипты, зарегистрированные wp_register_script() или wp_enqueue_script()
• стили, зарегистрированные wp_register_style() или wp_enqueue_style()
• Изображения и другие медиафайлы, загружаемые вызовом wp_get_attachment_image(), wp_get_attachment_image_src(), и т.д.
• данные, возвращаемые wp_upload_dir() (например, некоторые CAPTCHA)
• Изображения, загружаемые плагином Image Widget

Содержимое

Всё, что делает Простой, плюс:

• ресурсы в содержимом страницы
• ресурсы виджетов "Текст"

Виджеты

Всё, что делает режим Содержимое, плюс:

• ресурсы в любом виджете

Режим захвата

Всё на странице, от заголовка до подвала:

• захватить полную страницу, исправить скрипты, стили и другие ресурсы
• исключает вызовы AJAX, которые могут вызвать проблемы с совместимостью и производительностью

Захватить всё

Самая высокая возможность что-то поломать, но иногда необходимо

• захватить полную страницу, исправить скрипты, стили и другие ресурсы
• включает вызовы AJAX, которые могут вызвать проблемы с совместимостью и производительностью

Вы можете выбрать уровень исправления. Попробуйте сначала Простой, он менее влияет на производительность сайта. Если ошибка по-прежнему осталась, то последовательно переключайтесь на более охватывающие уровни.

В принципе, если изначально поднимать новый сайт на WordPress с использованием HTTPS, то такая ошибка не должна возникать. Но именно с этим я столкнулся: смешенное содержимое на сайте, который изначально был создан на HTTPS.

Далее инструкция под Google Chrome, но в других браузерах это должно делаться аналогично, либо откройте ваш сайт в Chrome. Для выяснения причин, какие именно файлы пытаются загрузиться по небезопасному протоколу, нажмите F12 и переключитесь на вкладку Console (консоль):

Найдите там строки с Mixed Content:

Mixed Content: The page at 'https://*****.ru/' was loaded over HTTPS, but requested an insecure stylesheet 'http://fonts.googleapis.com/css?family=Lato%3A300%2C400%2C700%2C900%7CMerriweather%3A400%2C700&ver=5.0.3'. This request has been blocked; the content must be served over HTTPS.

(index):1 Mixed Content: The page at 'https://*****.ru/' was loaded over HTTPS, but requested an insecure stylesheet 'http://fonts.googleapis.com/css?family=Lato%3A300%2C400%2C700%2C900%7CMerriweather%3A400%2C700&ver=5.0.3'. This request has been blocked; the content must be served over HTTPS.

Строки, которые начинаются с (index) означают, что ошибка присутствует в исходном HTML коде (а не в построенной на лету DOM-модели).

Как можно убедиться, идёт попытка загрузить шрифты с http://fonts.googleapis.com. Откройте исходный код веб-страницы (Ctrl+u) и найдите там место, где стоят ссылки на этот файл. В моём случае, это шапка. Я посмотрел код шапки и файл с функциями темы, а также все другие файлы в редакторе исходного кода в админке WordPress, но не нашёл никакого упоминания http://fonts.googleapis.com. Тогда я скачал файлы темы WordPress себе на диск (локальный компьютер), и используя поиск по содержимому файлов нашёл те файлы темы, которые приводят к ошибке:

В моём случае оказался виноват файл functions.php — повторюсь, во встроенном редакторе WordPress никаких упоминаний ссылки на шрифты я не видел.

Если кому-то интересно, на скриншоте Double Commander (бесплатный, с открытым исходным кодом, двухпанельный файловый менедежер, кроссплатформенный, заменитель Total Commander) — рекомендую!

Кстати если у вас (как и у меня) Linux, то можно использовать команду grep в следующем виде:

grep -r 'СТРОКА_ДЛЯ_ПОИСКА' ПУТЬ_ДО_ПАПКИ

Например, у я распаковал файлы с темой в папку /home/mial/Downloads/7/, а найти мне нужно строку http://fonts.googleapis.com, тогда моя команда:

grep -r 'http://fonts.googleapis.com' /home/mial/Downloads/7/

Полученный результат:

/home/mial/Downloads/7/responsiveblogily/functions.php: wp_enqueue_style( 'responsiveblogily-google-fonts', 'http://fonts.googleapis.com/css?family=Lato:300,400,700,900|Merriweather:400,700', false );

/home/mial/Downloads/7/responsiveblogily/readme.txt: - Fira Sans - http://fonts.googleapis.com/css?family=Fira+Sans

/home/mial/Downloads/7/responsiveblogily/readme.txt: * Fira Sans - http://fonts.googleapis.com/css?family=Fira+Sans

/home/mial/Downloads/7/simple-responsiveblogily/readme.txt: - Fira Sans - http://fonts.googleapis.com/css?family=Fira+Sans

/home/mial/Downloads/7/simple-responsiveblogily/readme.txt: * Fira Sans - http://fonts.googleapis.com/css?family=Fira+Sans

На текстовые файлы не обращаем внимания, а в файле functions.php я подправил http://fonts.googleapis.com на https://fonts.googleapis.com. В результате проблема со смешенным контентом исчезла.

Бесплатный SSL сертификат для субдоменов и кириллистических доменов

Кстати про переход на HTTPS. Сейчас уже необязательно платить довольно большие деньги за SSL сертификат. Многие хостеры предоставляют возможность бесплатного подключения SSL. Причём, уже даже отсутствуют ограничения (по крайней мере у некоторых): можно получить SSL сертификат для домена написанного русскими буквами и для всех субдоменов. Причём и получение, и подключение к сайту, и последующие продления выполняются на полном автомате. У моего хостера, где я держу свои сайты именно так.

После подключения SSL сертификата вам достаточно в корневой папке сайта в файле .htaccess добавить строки:

RewriteEngine on
RewriteCond %{HTTPS} !on
RewriteCond %{REQUEST_URI} !^/.well-known/
RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI}

Они нужны для того, чтобы происходила переадресация с HTTP на HTTPS версию сайта.