Instafeed.js: Invalid URL signature

[sarthakss]

I am accessing Instagram and it was working fine till yesterday. But now I am only getting some images and not all. I am attaching a screenshot of my screen and success and failure network headers. Trying to solve this for half day but I am unable to understand the issue as it is saying Invalid URL signature.

Please help.

[sarthakss]

Error I am getting is this: Failed to load resource: the server responded with a status of 403 ()

And this is my sample code: JS file

var userFeed1= new Instafeed({
get: 'user',
target: 'instafeed1',
userId: '25*49',
accessToken: '2549.97085bc.60ae*449bfbb77c75aeb',
limit: '2',
resolution: 'square',
sortBy:'least-recent',
success: function(response){
response.data.forEach(function(e){
// Now insert the 'square' size into each image's data:
e.images.square = {
url: e.images.thumbnail.url.replace('150x150', '600x600'),
width: 600,
height: 600
};
});
},
after: function(){
var images = $("#instafeed1").find('div');
$(images.slice(1,images.length)).remove();
},
template: '

'
});

userFeed1.run();

[rondog]

This just started happening to one of our web sites yesterday as well. Spent a couple hours researching this and nothing has come up. I even reauthenticated the client. If I refresh, they work, refresh again, all 403, refresh they work, refresh again 403. Not sure what is happening.

If you inspect the js call that goes to api.instagram.com and open up data[0].images.thumbnail.url and copy/paste that url in the browser the images loads just fine.

[rondog]

I think I am on to something. In our code someone on my team wrote

      $('#instafeed img').each(function(){
        var scaledThumb = $(this).attr('src').replace('s150x150/', 's280x280/');
        $(this).attr('src', scaledThumb)
      })

That scale changes the url from:
https://scontent.cdninstagram.com/vp/c8a7388543e3736daaf5bec4cb406f6e/5AF06DEC/t51.2885-15/s150x150/e35/c180.0.720.720/25022219_780623148792533_7302721279797231616_n.jpg

to:
https://scontent.cdninstagram.com/vp/c8a7388543e3736daaf5bec4cb406f6e/5AF06DEC/t51.2885-15/s280x280/e35/c180.0.720.720/25022219_780623148792533_7302721279797231616_n.jpg

If I remove the scale it works. I noticed that they work now.

[sarthakss]

I have also used replace method in my code. But are you sure that is the reason for this unexpected behavior?
I have used that function to get square images.

[rondog]

It has to be an issue on instagrams side. They maybe no longer accept those scaling values. We require square images for our design as well.

[sarthakss]

That is possible.
@stevenschobert or anyone else have any updates on this problem?

[rondog]

My temp fix was use resolution: 'low_resolution' via the instafeedjs option, not scale the image via url and then set the "low_resolution" image as a backround image with background-size: cover. In my case, our images needed to 280x280.

the docs regarding resolution don't really make sense anymore as they are all different now (except thumbnail, that is still 150x150) that instagram accepts any size image. They no longer have to be square.

[sarthakss]

Thank you for sharing this. I was also using low_resolution before but I wanted images to be squared hence I used that function. In my case, I want images to be responsive and should take size according to screen width and that why I cannot give fix width and height to my image.

[saturday1]

Please post if anyone finds a more solid solution then making the images 150x150. I still have no clue what is going on.

[rondog]

@saturday1 You don't have to use the thumbnail size. In the instafeed settings, do resolution: 'standard_resolution' and it will give you the largest image available. Use background-image and background-size: cover to display a square version

[dec23rd1986]

Hi all, I can't seem to figure out how to get the client ID for my client or token. Per all the examples I have seen they are using their own Instagram ID. Can someone tell me how to obtain this? Do I have to have the client request it and then send it to me?

I'm trying to put an Instagram feed carousel on the homepage of their website.

[saturday1]

@rondog Thanks.

I found out that background-position: center and background-size: 100% fitted me the best using this template:

<div class="insta-obj">
  <div class="img-container">
    <a href="{{link}}" class="img-link" data-type="{{model.type}}" style="background: url(\'{{image}}\') no-repeat;"></a>
  </div>
  <div class="meta-data">
    <span class="likes">{{likes}}</span>
    <span class="comments">{{comments}}</span>
    <p>{{caption}}</p>
  </div>
</div>

Result is visible here: https://arenagodemo.axiell.com/web/arena

[JamoDevNich]

I think the errors are a result of Instagram recently adding signatures to their URLs. By removing the signature the replace operations should work again.

So from this

https://scontent.cdninstagram.com/vp/c8a7388543e3736daaf5bec4cb406f6e/5AF06DEC/t51.2885-15/s150x150/e35/c180.0.720.720/25022219_780623148792533_7302721279797231616_n.jpg

to this

https://scontent.cdninstagram.com/t51.2885-15/s150x150/e35/c180.0.720.720/25022219_780623148792533_7302721279797231616_n.jpg

I wouldn't treat this as a proper fix however as I'm sure Instagram will eventually make signed URLs compulsory

[sarthakss]

@JamoDevNich Is there any way to remove those signatures from URL?

[JamoDevNich]

@sarthakss Running this regex on the URL vp.*\/.{32}\/.{8}\/ will match the signature, so replacing that with nothing will get rid of the signature from the URL.

I don't use the Instagram API so I'm not sure if they have a specific way of requesting the URL without signatures since this change

[sarthakss]

@JamoDevNich Okay, I will try to implement that. Thanks. Can you share code sample of your implementation for a reference.

[JamoDevNich]

@sarthakss This should work

e.images.thumbnail.url.replace(/vp.*\/.{32}\/.{8}\//, '').replace('150x150', '600x600')

[sarthakss]

Thank you so much @JamoDevNich. Its working for me.

[just-omarj]

@JamoDevNich You're a hero man, thank you so much!!!!

[joeygallegos]

Thanks to @JamoDevNich I was able to fix this error too. I spent about an hour or two trying to fix this on my own.

[ssuhas855]

replacing url -- vp.*\/.{32}\/.{8}\/ worked for me as well, @JamoDevNich thank you!

[arnoholzer]

Same problem, and the url returned by the api start with https://instagram.fgva1-1.fna.fbcdn.net/

[sarthakss]

Yes Instagram changed their URL again and its breaking the code. Any solutions here?

[JamoDevNich]

@sarthakss I think the next step would probably be to try and crack the signatures, I'll have a closer look when I get back onto a desktop system. I hope they're not salted...

It appears to be an API restriction in place now prohibiting the use of unsigned URLs.

[sarthakss]

Yes we will need a new regex again i think. @JamoDevNich Please help us out (like last time), I am also working on this.

[prateek707]

Have you got any solution?

[sarthakss]

Not yet. Anyone has any updates on this issue? @JamoDevNich @stevenschobert

[JamoDevNich]

@sarthakss No solutions as of yet, I've been investigating the hashes though and how Instagram's website works. The first part of the url hash is MD5, the other part CRC-32.

Higher resolution pictures are loaded on the website when the user's device has a low screen resolution such as this and lower resolution images are returned when the user's device has a high screen resolution. However, the higher resolution images are not the same quality as the ones we were previously able to retrieve from the API with the regex.

I'm trying to find the script being used to check device screen resolution in an attempt to reverse engineer it, and hopefully find a way to workaround the hashed URLs or generate them ourselves.

[jduncanator]

You'll never be able to generate the hashes yourself (assuming Instagram have actually implemented this correctly). They'll almost certainly be signatures, rather than hashes, and you'll need to have access to Instagram's private key to generate the signatures yourself. For the time being, assuming they are now signing the image URLs, there isn't really any other option to get alternate versions of the images provided by the API.

[sjsagar001]

So I was scrolling down the reddit and I found this http://wizblogger.com/instadp/
It actually worked.I don't know how they did it, I am hoping you guys can figure out?

[iHelp101]

I did find a solution for profile icons. However, unofficial API's are being shutdown. So I have no idea how long this will stay working. If you get the users ID (You can from the first link below) you can use the mobile API (Without token) to get the user profile icon in all it's sizes. Like mentioned by others, the actual signature generation is unlikely to be cracked. Instagram has been working on this for many months (Originally started with disappearing/direct messages).

https://www.instagram.com/natgeo/?__a=1
https://i.instagram.com/api/v1/users/787132/info/

[benjamin-hull]

@sjsagar001 - the tool you linked works because they don't attempt to rewrite the size of the image, they just use the URL as provided by the API. This means the signature matches the options provided on the URL, so everything works.

If you attempt to request a non-standard size for that URL, you get the 403 response as with the other images.

[sjsagar001]

@benjamin-hull Now I understood. Thank You

[datio]

The first part of @iHelp101 's solution has also stopped working. We cannot get a user's id from their username anymore.

The second v1 API link still returns the expected full resolution profile picture.

[benjamin-hull]

@datio is right - the ?__a=1 JSON endpoint is no longer provided.

[datio]

As a closing note, it is currently still possible to get a user's profile id through the source HTML of their page.

[siddhartharora02]

One possible solution that is working right now is to use official Instagram API suggested way.

So if the link of the video is - https://www.instagram.com/p/Bv3fbKGnmNK/

You can get Thumbnail here - https://www.instagram.com/p/Bv3fbKGnmNK/media?size=m

Change size=l for larger images

Let me know if it works!!