Instagram.com breaking changes (CORS/Security Policies)

[jamesmoriarty]

Raising this to track issues as it appears there have been some changes in the last few days. e.g.

https://github.com/jsanahuja/InstagramFeed/commit/3fcb4bf7d8e56fc56fc8efe2a3b7d467ab3bcd5c

Fix incoming: https://github.com/jamesmoriarty/react-instagram-authless-feed/pull/18

[jamesmoriarty]

Released v2.0.0 with new workaround. May require further tuning based on reports.

[aetrigg]

Hi, I believe I may be having this issue. When I try to run on localhost and my live production, I get this error in my console: "Access to fetch at 'https://www.instagram.com/username/' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled."

The workaround I did for my development was to disable content blockers, but seeing as this is a machine-only fix, I can't expect everyone to always have their content blockers disabled. I tried a specific batch of code for my deployment service that would allow cross-origin control, but it didn't work. I also updated react-instagram-authless-feed to version 2.0 and am still having the same error. Please advise.

[jamesmoriarty]

Hey @aetrigg, is the CORS/security headers sent from your site? e.g.

example.com --requests-> instagram.com

Where example.com doesn't allow cross origin requests to instagram.com?

[aetrigg]

I believe so. I've been searching around trying to figure out if there's a way to add the authorization header, but so far nothing has worked.

[jamesmoriarty]

I'm not 100% sure but I does sounds related to your local development setup. e.g. the examples work and I've been doing local dev with library.

• https://owasp.org/www-project-secure-headers/#content-security-policy
• https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS