Image src isn't displaying after a time but link works in browser

Question

I have an application where I show Instagram posts with their attributes (like/comment count, post thumbnail etc.). I use a private API with python to get those attributes.

I was using <img> tag and src attribute for showing post thumbnails, by giving this sample URL which is from API response:

https://scontent-iad3-1.cdninstagram.com/v/t51.2885-15/sh0.08/e35/p640x640/178658519_464414754779708_8788669411129849985_n.jpg?tp=1&_nc_ht=scontent-iad3-1.cdninstagram.com&_nc_cat=108&_nc_ohc=rB2avtcYIpAAX_iuOn2&edm=ABmJApABAAAA&ccb=7-4&oh=efc659fa98302f5da1b68c0552e43278&oe=60B65A2D&_nc_sid=6136e7&ig_cache_key=MjU2MTE4MzMwMzE4NjgxODMxOA%3D%3D.2-ccb7-4

These post thumbnails were visible on my app as they should be, but after a time suddenly they are not visible anymore. I thought URL signatures are expired but that is not the reason, when I click the link I gave above I can succesfully see thumbnail of the post.

I also see in my console: "Failed to load resource: net::ERR_BLOCKED_BY_RESPONSE"

To simplify:

My app is on django if it's relative. What is the thing that I'm missing out, it should be something simple I believe?

Answer 1

iframed image probably sends correct referer header to Instagram CDN.

Instagram now sets cross-origin-resource-policy: same-origin if it doesn't like the "referer" which your browser sends to cdninstagram domain when loading image.

One of ways to mitigate this might be to create a simple image proxy which will work on your domain, download the image from instagram server to your server, and then output it to the browser.

Examples of implementation are available here: https://stackoverflow.com/a/67293454/15404876