Mixed Contents

Today I want to write a small bit about something that bugged me for while before I found a 20 lines of code fix that solved it all : Mixed Content.

I recently figured out many of the articles I read on JARR (my feed reader for those who didn’t follow) were badly displayed. The usual and easy solution was to directly go to the website hosting the article. But it’s shame to do so if the feed is not truncated and hold every bits of data you’ll need to read the article.

Anyway I got into debugging mode and I realised that my web browser console were showing some errors:

It appears that the mixed contents is the type of content which isn’t secured (understand, not in HTTPS) in a page which is (understand in HTTPS). Mozilla talks a bit about how firefox handles those kind of pages here.

But I also happened to stumble upon unsecure content which was still displayed. The browser was only showing warning when displaying it and not blocking it:

That’s where it becomes slightly trickier, there are two types of mixed content, and Mozilla (again) gives details about the differences here. In a few words, active content is supposed to be blocked, passive not. img are supposed to be passive so not blocked. So why some of my images were blocked ?

That’s the trick, those blocked ìmg with there src attribute also had a srcset attribute which make img active and so blocked. As JARR doesn’t really need srcset I just implemented a small cleaner that remove those attributes when appropriate. It should close some UX problems…