SSL-сертификат нарушает работу CSS (в комбинации с W3TC)

Содержание

Вопрос или проблема
Ответ или решение
Шаги для устранения проблемы:
Связь с поддержкой CDN:
Заключение:

Вопрос или проблема

Уважаемое сообщество StackExchange,

Я сталкиваюсь со следующей проблемой и просто не могу найти решение:

Я установил SSL-сертификат, но он вызывает проблемы с CSS моего веб-сайта, когда плагин “W3TC” активирован (пример: https://www.planetofsuccess.com/blog/).

Вот как я установил сертификат и пытался решить проблему:

Деактивировал W3TC
Обновил URL моего сайта на https в панели управления WordPress (Настройки » Основные и обновление полей адресов WordPress и сайта)
Перенаправил http на https через файл .htaccess с помощью следующего кода:

RewriteEngine On
RewriteCond %{SERVER_PORT} 80
RewriteRule ^(.*)$ https://www.myurlofcourse.com/$1 [R,L]

На данном этапе всё работает. Однако, как только я активирую плагин W3TC, CSS ломается (даже после очистки кэша страницы). По этой причине я попробовал установить следующие плагины:

WordPress HTTPS (SSL)
SSL insecure content fixer

Однако эти плагины не решили проблему.

На следующем шаге я проверил, была ли активирована опция “Кэшировать SSL (https) запросы” в W3TC, и она была активирована. Также я отключил “Минификация CSS” и “Минификация JS”, но это ничего не изменило после очистки кэша страницы.

Я использую Amazon CDN, поэтому я изменил настройки поддержки SSL в W3TC с “авто” на “всегда HTTP”, но это также не повлияло на изменения.

В моей учетной записи Cloudflare я переключился с простого SSL на полный SSL, но это тоже не решило проблему.

Я также прочитал следующий вопрос и его полезные ответы (здесь: SSL ломает CSS WordPress), но, к сожалению, это не помогло мне решить проблему.

Аналогично, чтение форумов поддержки моего провайдера шаблонов по поводу проблем с SSL не помогло мне найти потенциальную проблему с шаблоном.

В кратце, я думаю, что всё сводится к одной конкретной проблеме с плагином W3TC, но я не могу её найти.

(Я отменил все изменения перенаправления, которые сделал)

У вас есть другие идеи, как я мог бы решить проблему?

Я проверил ваш веб-сайт, и проблема, похоже, связана с файлами, обслуживаемыми с https://files.planetofsuccess.com/….

Если вы отключаете функцию CDN в W3 Total Cache, всё должно работать нормально. Так что проблема не в плагине, а в соединении с CDN, которое вызывает проблемы.

Чтобы исправить эту проблему, вам нужно связаться с командой поддержки Amazon CDN и попросить их посмотреть на параметры SSL для вашего веб-сайта. Это больше похоже на проблему настройки, на мой взгляд.

С Новым годом!

Ответ или решение

Дорогое сообщество StackExchange,

Проблема, с которой вы столкнулись, действительно распространенная и может быть решена несколькими шагами. Я постараюсь предложить решение вашего вопроса касательно конфликтов между SSL-сертификатом и плагином W3 Total Cache (W3TC).

Шаги для устранения проблемы:

Проверка конфигурации CDN:
Как вы уже заметили, проблема может быть связана с настройками Amazon CDN. Убедитесь, что ваш CDN поддерживает SSL и что все ресурсы (CSS, JS, изображения) подгружаются по HTTPS. Настройка SSL на CDN должна соответствовать протоколу, используемому на вашем сайте. Если вы используете Cloudflare в качестве прокси-сервера для вашего CDN, убедитесь, что конфигурация SSL выставлена на "Full" или "Full (Strict)", что обеспечит надлежащую и безопасную работу сайта.
Настройки W3 Total Cache:
- Перейдите в раздел "General Settings" плагина W3TC и убедитесь, что опция Cache SSL (https) requests активирована.
- В разделе "CDN" проверьте, правильно ли указаны пути к статическим ресурсам, и отключите временно кэширование CDN, чтобы проверить, исчезает ли проблема.
- Также попробуйте отключить опции минфикации CSS и JS, которые могут влиять на корректность отображения стилей.
Проверка смешанного контента:
Убедитесь, что все ссылки на ресурсы (изображения, скрипты, таблицы стилей) не используются в формате HTTP. Для этого выполните следующие действия:
- Установите и активируйте плагин "Really Simple SSL", который поможет автоматически корректировать URL-адреса на вашем сайте.
- Займитесь ручной проверкой: откройте консоль браузера (обычно F12) и проверьте наличие ошибок смешанного содержимого (mixed content errors).
Настройки .htaccess:
Проверьте ваш .htaccess на наличие правил, которые могут вызывать конфликты. Убедитесь, что ваши правила редиректа настроены правильно и не конфликтуют с настройками SSL.
Кэширование и проверка:
- После внесения всех изменений обязательно очистите кэш плагина W3TC. Также полезно очистить кэш вашего CDN, если это возможно.
- Попробуйте проверить ваш сайт в режимах "инкогнито" или использовать другой браузер, чтобы исключить проблемы кэширования на клиентской стороне.

Связь с поддержкой CDN:

Если все вышеперечисленное не решает проблемы, я рекомендую обратиться в службу поддержки Amazon CDN. Убедитесь, что они проверили ваши настройки SSL и на серверной стороне, а также все соответствующие параметры кэширования.

Заключение:

С учетом всех вышеперечисленных моментов, вы, скорее всего, сможете определить и устранить проблему с вашим CSS при активации плагина W3TC. Если возникнут дополнительные вопросы или трудности, пожалуйста, дайте знать, и я с радостью помогу вам.

Удачи с вашим проектом!