How to serve a TimelineJS iframe over a secure HTTPS connection

A minor niggle, but one that it took me an inordinate amount of time to find the answer to today – if you’re using Knight Labs’ excellent Timeline JS plugin to power an interactive timeline on your site, you’ll find the iframe loads over a standard HTTP connection – so if your site HTTPS, the iframe won’t load and you’ll be left with a giant void where your lovely timeline would have been.

Unfortunately Knight Labs themselves don’t offer an option to serve the timeline over HTTPS, so you need to be a bit sneaky and use the full URL of the embedded widget which, thankfully, is hosted on an Amazon S3 bucket and can be accessed over a secure connection.

Basically – and it’s actually a really simple fix – you need to append https://s3.amazonaws.com/ to the source URL in your iframe code. The provided address for the embed is:

http://cdn.knightlab.com/libs/timeline/latest/embed

Which you need to edit to become:

https://s3.amazonaws.com/cdn.knightlab.com/libs/timeline/latest/embed/

So simply do a find + replace for “http://cdn.knightlab.com/” to “https://s3.amazonaws.com/cdn.knightlab.com/” and you should find your timelines loading over an HTTPS connection with no problem.

The same rules apply for other Knight Labs tools, like StoryMap or Juxtapose, meaning you can serve things like before and after pictures of your dog’s haircut…

…over a secure connection.

You can see the full, annoying-to-find-on-Google discussion thread on the issue here.

Leave a Reply

Your email address will not be published. Required fields are marked *