Дано: веб-сервер с блогом на wordpress, запущенный на виртуальной машине во внутренней сети, nginx в качестве reverse proxy, который направляет запросы извне на этот блог.

На машине с nginx настроен https с сертификатом Let’s Encrypt. Также этот nginx проксирует запросы до некоторых других сервисов, развернутых в локальной сети.

Все работало замечательно пока работа с блогом шла внутри локальной сети с обращением по ip-адресу. Проблемы начались после того, как был настроен внешний nginx. Неожиданно страницы блога стали отображаться без css-стилей.

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

Затем была мысль, что проблема с веб-сервером, на котором крутится блог. На тот момент там стоял Apache. Apache был заменен на nginx, но результата это не дало.

Далее последовала переустановка блога — подумал, что что то в самом wordpress было изначально настроено неверно. Эта идея также потерпела крах.

Я решил посмотреть, а какиее ссылки до css-стилей я получаю в браузере? Может быть они некорректны и потому стили не грузятся? Ниже скрин с исходным кодом одной из страниц блога.

В первую очередь показалось странным, что сам блог доступен по протоколу https, а в адресе стилей указан http. Дело в том, https настроен только на машине с внешним nginx, а на nginx, который обслуживает блог, сертификаты не установлены. Само проксирование осуществляется на http-адрес во внутренней сети.

proxy_pass http://192.168.1.224;

При этом, если открыть ссылку напрямую в браузере, то ее содержимое отображается. Значит, дело не в проксировании как таковом!

Дальнейшие раскопки привели меня в раздел «Инструменты разработчика» в браузере. Обновив страницу, я сразу же заметил, что некоторые файлы не были загружены. В столбце статус значилась фраза «Заблокировано: mixed-content». Я не сразу понял, что это означает и как вылечить, ведь я нигде не настраивал никаких фильтров и блокеров!

Погуглив, я наткнулся на статью на хабре, в которой объясняется о том, что такое mixed-content и почему он блокируется. Если кратко — браузер на основе Chromium требует, чтобы главная страница и подгружаемые ресурсы (js-скрипты и css-стили) загружались по https. Для проверки этой идеи я отключил вручную такую проверку в браузере и (о, чудо!) блог заиграл стилями! Но браузер при этом стал ругаться, что страница не защищена.

Дальнейшие поиски информации натолкнули меня на похожий вопрос на Stackoverflow, где было предложено при проксировании передавать дополнительный http-заголовок. И это возымело действие! Вот этот заголовок

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

Заголовок добавляется в ту секцию location, где происходит proxy_pass.