How can I embed an Instagram Video or Picture using SSL?

Question

I need to embed Instagram Video or Photo using the SSL protocol, so I can show it in a facebook app.

If I insert an iframe with the following URL https://instagram.com/p/hvisAyBQZ0/embed/ it will load all resources in http, but not https.

UPDATE:
This is the HTTPS Response, it's a 302 response.

Connection: keep-alive
Content-Length: 154
Content-Type: text/html
Date: Tue, 10 Dec 2013 15:58:20 GMT
Location: http://instagram.com/p/hvisAyBQZ0/embed/
Server: nginx

Answer 1

According to this old Google Groups post by Mike Krieger, you can get the URL via the API, then substitute the beginning of the url with distillery.s3.amazonaws.com.

For example: http://images.ak.instagram.com/profiles/profile_539562_75sq_1386973442.jpg can become //distillery.s3.amazonaws.com/profiles/profile_539562_75sq_1386973442.jpg which works fine on https.

It appears Instagram now uses various CDNs, so you have to be a little smarter with the rewrite rules. Here's my code

def sslify_instagram_cdn_url(url):
    """Intercept IG CDN urls and serve using a SSL-friendly CDN instead"""
    replace_prefixes = (
        ('^http://images.ak.instagram.com(.*)$', '//distillery.s3.amazonaws.com%s'),
        ('^http://distilleryimage([0-9]*).ak.instagram.com(.*)$', '//distilleryimage%s.s3.amazonaws.com%s'),
        ('^http://origincache-([a-z]*).fbcdn.net(.*)$', '//origincache-%s.fbcdn.net%s'),
        ('^http://distilleryimage([0-9]*).s3.amazonaws.com(.*)$', '//distilleryimage%s.s3.amazonaws.com%s'),
        ('^http://scontent-([a-z]).cdninstagram.com(.*)$', '//scontent-%s.cdninstagram.com%s'),
        ('^http://photos-[a-z].ak.instagram.com/hphotos-ak-[0-9a-z]{3,4}/(.*)$', '//origincache-frc.fbcdn.net/%s'),
    )
    for prefix, replacement in replace_prefixes:
        results = re.findall(prefix, url)
        if not results:
            continue
        return replacement % results[0]
    return url

Be warned, this may break when/if Instagram changes their CDN setup. But it's a workable hack for now.

Answer 2

Unfortunately Instagram does not support HTTPS for traditional <iframe> embedding. All they do is respond with a redirect to http as you found out yourself.

Alternatively you could embed the picture itself with an <img> tag. The pictures can be served via HTTPS with a valid SSL certificate.

Examples:

<img src="//instagram.com/p/hvisAyBQZ0/media/?size=t" alt="Thumbnail (150x150)">
<img src="//instagram.com/p/hvisAyBQZ0/media/?size=m" alt="Medium (305x306)">
<img src="//instagram.com/p/hvisAyBQZ0/media/?size=l" alt="Large (640x640)">

All these URLs are actually redirects, but the target URL seems to support HTTPS although it's not mentioned in the official documentation.

This is of course not a satisfying substitute for a regular embed, because Instagram videos cannot be served like this (only the preview images). But maybe it's better than nothing for some.

Answer 3

For this, you'll need to implement Instagram's Developer API.

You will notice that all of their endpoints are available over https, in particular...

https://api.instagram.com/v1/media/3?access_token=[redacted]

...which will retrieve a particular photo or video.

Answer 4

The EFF has a great resource with Instagram cdn rewrite rules in their HTTPS Everywhere Atlas: https://www.eff.org/https-everywhere/atlas/domains/instagram.com.html

Using these you could make a somewhat more robust system for generating instagram https image links.