jsanahuja / InstagramFeed

Vanilla JavaScript Instagram Feed without access token. Not using the Instagram API
MIT License
318 stars 128 forks source link

Error Cross-Origin Read Blocking (CORB) #56

Open RomainDW opened 3 years ago

RomainDW commented 3 years ago

The CORS fix creates a new problem for me: Cross-Origin Read Blocking (CORB) blocked cross-origin response https://www.instagram.com/p/CL7rMUKDOaR/ with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.

Images don't display and have a URL like this instead: "https://lookaside.instagram.com/seo/google_widget/crawler/?media_id=2520798378721076881"

image

I just used the basic configuration with username: "google".

I added a callback to see the data received:

image

All urls start with "https://lookaside.instagram.com/seo/google_widget/crawler/".

I tried to enter the URL of the host in the browser: "https://images391-focus-opensocial.googleusercontent.com/gadgets/proxy?container=none&url=https://www.instagram.com/google" and "https://images391-focus-opensocial.googleusercontent.com/gadgets/proxy?container=none&url=https://www.instagram.com/google/p/CL7Iiq7ly55", I get an error: "your computer or network may be sending automated queries. To protect our users, we can't process your request right now."

image

I tried to reload the page on my phone in 4g (in case it's an ip ban), but I have the same error.

jsanahuja commented 3 years ago

Have you been able to reproduce this with any other account than google?

RomainDW commented 3 years ago

Have you been able to reproduce this with any other account than google?

Yes, i tried with multiple accounts, same error :/

RomainDW commented 3 years ago

I tested on a new web site, with the host "https://images" + ~~(Math.random() * 3333) + "-focus-opensocial.googleusercontent.com/gadgets/proxy?container=none&url=https://www.instagram.com/", The query runs 8 times and fails 8 times with the same CORS policy error: Access to XMLHttpRequest at 'https://images1101-focus-opensocial.googleusercontent.com/gadgets/proxy?container=none&url=https://www.instagram.com/violette_fr/' from origin 'https://violettefr-store.myshopify.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

aekanshd commented 3 years ago

Same error for me. Access to XMLHttpRequest at 'https://www.instagram.com/******/' from origin 'https://******.herokuapp.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

thomashdk commented 3 years ago

Any fix for this ??

davyk7 commented 3 years ago

in fact, it seems to depend on the user, and I really don't understand why... For example, the error can be reproduced with the instagram user "motogp"

arnoutdc commented 3 years ago

Getting the same error here: Access to XMLHttpRequest at 'https://www.instagram.com/******/' from origin '*****' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

basile-code commented 3 years ago

Hello everyone,

I have the same issue than @RomainDW: Cross-Origin Read Blocking (CORB) blocked cross-origin response https://www.instagram.com/p/*/ with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.

It is impossible to read media from this type of url (what is lookaside?) https://lookaside.instagram.com/seo/google_widget/crawler/?media_id=2524343234902980347 (it is the display_url of the first media of the timeline)

But it's working for these url https://scontent-sea1-1.cdninstagram.com/v/t51.2885-19/s320x320/19120568_1538053702936454_1095478567585710080_a.jpg?tp=1&_nc_ht=scontent-sea1-1.cdninstagram.com&_nc_ohc=6MMjl4HN_nYAX8ei34b&oh=01be23e91bcf5a09bfcf8c9c5fec9693&oe=606F1656 (it is the profile pic url)

@kerr325 I tried to add crossorigin in my script tag but it doesn't change anything...

It is related to specific account because violette_fr has this error for all medias (video and image are from lookaside.instagram.com), motogp has this error only for image (video are from scontent-sea1-1.cdninstagram.com and image are from lookaside.instagram.com) but rpbw_architects is working well (all medias are from scontent-sea1-1.cdninstagram.com)

I have no clue why this is happening to some accounts/medias and why is it ok with some others... If someone find a solution for that, and an explication, it would be very helpfull! :)

basile-code commented 3 years ago

To complete my previous message, these are extracts of JSON objects edge_owner_to_timeline_media for the 3 accounts.

violette_fr

violette_fr.txt

motogp

motogp.txt

rpbw_architects

rpbw_architects.txt

davyk7 commented 3 years ago

I have what I believe is a simple fix that worked for me if you simply add the argument of crossorigin to your script tag it resolves the issue, for example:

<script src="assets/js/insta-min.js" crossorigin></script>

unfortunately it doesn't work in my case Note that the script works for me with certain Instagram users, even without the @kerr325 "crossorigin fix" Thank you for having tried !

davyk7 commented 3 years ago

up 😉

basile-code commented 3 years ago

Hello,

New discovery today: The latest picture of violette_fr (13th March) is ok, it's on scontent-sea1-1.cdninstagram.com But not the other ones, so it may be media related and not account related like we thought. Here, is two extracts of images from violette_fr account, one on scontent-sea1-1.cdninstagram.com and the other on lookaside.instagram.com: image.violette_fr.20210313.txt image.violette_fr.20210311.txt

The only difference I see is the dimensions but every other images have also different dimensions...

marianabhud commented 3 years ago

Same error for me. Access to XMLHttpRequest at 'https://www.instagram.com/**/' from origin 'https://******.herokuapp.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource...

crossorigin in / doesnt work for me..

how did you solve this problem?

deeneshchowdhary commented 3 years ago

Did you guys try increasing the cache time? It did work for me for now xD. 'cache_time':660

marianabhud commented 3 years ago

Where you add thnis cache_time .. in var defaults options? If yes, for me does't work :/

deeneshchowdhary commented 3 years ago

@marianabhud I tested again and it works on some browser and some don't. Are you using the latest version of code? https://cdnjs.cloudflare.com/ajax/libs/jquery.instagramFeed/3.0.4/jquery.instagramFeed.min.js

marianabhud commented 3 years ago

OK.. thanks.. one time its OK and next time No 'Access-Control-Allow-Origin'

deeneshchowdhary commented 3 years ago

@marianabhud yes it is so inconsistent. let's see if someone has any fix for it.

Federico-Iglesias commented 3 years ago

Hey there how are you? I thought the "host" option would fix this. In same cases i see it and in others not (after several attempts made by the JS plugin) https://github.com/jsanahuja/jquery.instagramFeed/issues/127

MatheusBarem commented 3 years ago

Same error here, I have tried to use the host parameter, cache_time too but doesn't work, any fix?

drewbaker commented 3 years ago

If I had to guess what is going on here, it's that IG is picking up on the repeated access from one IP and putting on a "must be logged in" page for that account from that IP.

fennecinspace commented 3 years ago

This is what the URL is redirecting to :

image

Sandr0x00 commented 3 years ago

Hi, are you using uMatrix or any other browser extension which might block the connection? For me, it did not work since uMatrix blocked the connection. Now working fine.

hussein-pintu commented 3 years ago

Did you guys try increasing the cache time? It did work for me for now xD. 'cache_time':660

Guys, I am using the latest code from here: https://github.com/jsanahuja/InstagramFeed/blob/master/src/InstagramFeed.js I just changed the existing cache_time to 660 property which was originally set to 360 and the insta feed works fine now.

xchopin commented 3 years ago

Getting CORS error with Safari on Mac as well

Edit: ok mine got fixed with the previous solution

 host': "https://images" + ~~(Math.random() * 3333) + "-focus-opensocial.googleusercontent.com/gadgets/proxy?container=none&url=https://www.instagram.com/",
RosalieWessels commented 3 years ago

Having the same issue here:

Access to XMLHttpRequest at '******' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I am testing on Google Chrome. I also have a little bit older version of this InstagramFeed live on a website and when I access that website on Safari I get the same error.