проблема
Я занимаюсь разработкой веб-сайта, использующего протокол HTTP. В разработке я использую Webpack с ним webpack-dev-server, который обслуживает страницу локально на http://localhost:9090
.
Я был удивлен, увидев в Firefox 58 следующую ошибку смешанного содержимого о загрузке файла шрифта. Это странно для меня, потому что страница обслуживается с использованием HTTP, а не HTTPS, и я думал, что ошибки смешанного контента ограничены только страницами HTTPS.
'Blocked loading mixed active content "http://localhost:9090/b1aa06d82e70bbd5a14259a94c9bbb40.ttf"
Я узнал, что источником ошибки является видеоролик YouTube, встроенный в <iframe>
на странице (<iframe src="https://www.youtube.com/embed/...>
). Как только я удаляю встраивание YouTube, ошибка исчезает с консоли.
Я не понимаю этого поведения, потому что он не вложен HTTPS iframe, который делает этот запрос шрифта, а внешнюю страницу HTTP (контекст просмотра на верхнем уровне)!
Резюме
Внешняя страница (контекст просмотра верхнего уровня) используется с использованием HTTP. Только встроенный iframe извлекается с использованием HTTPS. HTTP-запрос для файла шрифта, который делает внешняя страница (а не встроенного iframe), создает ошибку смешанного содержимого в консоли Firefox 58.
Примеры кода
Чтобы дать рабочий пример, я создал 2 ручки на Plunker, которые обслуживаются через HTTP и импорт (сам сайт Plunker, а не мой код). Шрифт WOFF шрифт Awesome через HTTP.
Пример. С ошибкой, в которой встроен YouTube iframe, встроенный поверх HTTPS, возникает следующая ошибка в консоли Firefox 58: Blocked loading mixed active content "http://plnkr.co/css/font/Font-Awesome-More.woff"
.
Пример Без ошибки, который является тем же самым кодом, который только удаляет iframe, не вызывает ошибок.
Вопросы
- Как вы можете иметь смешанный контент на веб-сайте, загружаемом с использованием протокола HTTP? Я думал, что смешанный контент может существовать только на сайтах, загружаемых с помощью HTTPS. Требует ли какой-либо ресурс через HTTPS (например, встраивание YouTube) делает весь контент необходимым для смешанного содержимого HTTP?
- Как я могу исправить ошибку? Я не планирую обслуживать веб-сайт через HTTPS, и я хочу, чтобы мои шрифты правильно загружались на рабочем HTTP-сервере.