Обход проблемы "Mixed Content" в AJAX через PHP и cURL

Быстрый ответ

Для избавления от ошибки "Блокировка смешанного содержимого", выполните AJAX-запросы по протоколу HTTPS, в случае, если используете страницу по HTTPS. Браузеры блокируют загрузку HTTP-содержимого на HTTPS-страницах. Если целевой сервис не поддерживает HTTPS, можно наладить работу через прокси-сервер. Ваши AJAX-запросы могут выглядеть вот так:

$.ajax({
  url: "https://your-secure-api.com/data",
  success: function(data) {
    console.log(data);
  },
  error: function() {
    console.error("Не удалось выполнить запрос");
  }
});

Если вам не удалось пересадить внешний источник на использование HTTPS, возможно создание прокси на вашем сервере для передачи HTTP-ответов по HTTPS-соединению.

Создание прокси на сервере для обеспечения безопасности

Серверный скрипт, как, например, PHP-прокси, позволяет серверу безопасно совершать HTTP-API-запросы. Он оказывает услуги посредника между клиентом и HTTP-ресурсом, перенаправляя данные через HTTPS.

Улучшение безопасности за счёт заголовков

Включение заголовков безопасности HTTP, таких как Content-Security-Policy, значительно улучшает уровень защиты. Использование директивы upgrade-insecure-requests через тег <meta> укажет браузерам на автоматическую конвертацию HTTP в HTTPS:

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

Можно также внести коррективы в настройки сервера, например, в nginx:

add_header Content-Security-Policy "upgrade-insecure-requests";

В итоге браузеры автоматически "улучшат" незащищенные запросы без Вашего участия.

Подробнее об этом расскажет наш спикер на видео

Согласование протоколов для API

Для достижения требуемой совместимости убедитесь, что ваш сайт и API используют HTTPS:

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

Инициативы по улучшению безопасности

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

Обеспечение безопасности при доставке контента

Директивы add_header и proxy_set_header в nginx помогают гарантировать безопасную доставку контента, выступая в роли охраны для VIP-траектории вашего сервиса.

Визуализация

Воплотите в представлении страницу HTTPS как защищённый эксклюзивный сад (🏰🌸), в то время как HTTP AJAX схож с ненадёжным разводным мостом (🌉):

🏰🌸 Защищённый сад (Страница HTTPS)
            |
          (X)  Вход воспрещён!
            | 
🌉 Ненадёжный разводной мост (HTTP AJAX)

Охрана сада (🛡️) не пропускает ничего, что пожелало пройти по ненадёжному мосту.

🏰🌸(HTTPS) 🛡️ Блокирует 🚫 🌉(HTTP AJAX)

Выход – построить надёжный мост (🌁):

🏰🌸 Защищённый сад (Страница HTTPS)
            |
          ✅  Вход разрешён!
            |
🌁 Надёжный мост (HTTPS AJAX)

Теперь HTTPS AJAX надёжно преодолевает мост и проложил путь прямо в сад! 🔒

Настройка использования HTTPS в API

Убедитесь, что эндпоинт API функционирует через HTTPS. Для пользователей nginx это влечёт за собой правильную настройку SSL-сертификатов и работу серверного блока для корректной обработки HTTPS-запросов.

Анализ сигналов браузера

Используйте инструменты для разработчиков в браузере, непременно вкладку «Сеть», чтобы выявлять проблемы смешанного содержимого и быстро решать их.

Безопасность превыше всего

Оценивайте возможные последствия для безопасности перед применением таких схем, как upgrade-insecure-requests, чтобы не столкнуться с непредвиденными уязвимостями.

Полезные материалы

1. Смешанное содержимое – Безопасность в интернете | MDN — подробное руководство по решению проблем со смешанным содержимым в HTML.
2. Как заставить Chrome разрешить смешанное содержимое? – Stack Overflow — дискуссии о методах устранения предупреждений о смешанном содержимом в Chrome.
3. Обновление небезопасных запросов — черновик стандарта от W3C, повышающий безопасность сайтов путём обновления небезопасных запросов.
4. Cross-Origin Resource Sharing (CORS) – HTTP | MDN — описание применения CORS для решения проблем смешанного содержимого и безопасных кросс-доменных запросов.
5. Политика безопасности содержимого | Статьи | web.dev — статья об использовании Политики безопасности содержимого для предотвращения смешанного содержимого и других уязвимостей.