Смешанный контент и отзывчивые изображения.

Источник: Mixed Content and Responsive Images.
Автор:  Jonathan Snook.
Перевод: .

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

Немного покопавшись, я заметил, что изображения, которые отказывались загружаться, были определены с помощью элемента <picture>. Довольно неожиданное поведение, не правда ли? Как оказалось оно вполне объяснимо.

В данном случае правила устанавливаются спецификацией Mixed Content. Именно она определяет какой контент подлежит блокированию, если он доставляется из незащищенной среды в защищенную. Речь идет о ситуации, когда https страница пытается загрузить изображения и другие ресурсы по http протоколу.

Изображения относятся к пассивному содержимому. И как следствие, браузеры прекрасно отображают их, даже если они доставляются в незашифрованном виде. В противоположность им скрипты являются активным контентом и поэтому подлежат блокировке по умолчанию.

Интересно то, что упоминаемая выше спецификация содержит вот такую строку: «Доставка разрешается в том случае, если выполняется одно или несколько из следующих условий: […] когда типом запрашиваемых данных является image и инициатором не является imageset».

Элемент picture как раз таки представляет собой «набор данных изображения» или imgset. А это в свою очередь означает, что незашифрованные изображения, определенные посредством элемента <picture> или с помощью атрибута srcset, будут заблокированы.

И как же быть?

Все, что я могу сказать по данному вопросу, так это то, что у вас всего два варианта: выполнять доставку изображений по https, либо не использовать отзывчивые изображения. Я советую воспользоваться первым способом решения проблемы.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *