justinmahar / react-social-media-embed

📰 Easily embed social media posts from Facebook, Instagram, LinkedIn, Pinterest, TikTok, X (Twitter), and YouTube in React.
https://justinmahar.github.io/react-social-media-embed/
MIT License
215 stars 30 forks source link

There is a bug rendering instagram on safari. #42

Open dmorreale opened 1 year ago

dmorreale commented 1 year ago

When loading an instagram embed in safari, the embed just hangs.

Screenshot 2023-05-17 at 11 51 50 AM

In the console I get:

[Error] SyntaxError: Unexpected token '<'

mikaeljan commented 1 year ago

I am experiencing the same problem with the same console error.

I am logged in to IG on Safari if that is relevant (but should it be? )

Is there a workaround that can be applied ?

Even the demo page has the same issue.

Screenshot 2023-05-19 at 15 14 53

@justinmahar is this something that can be handled on lib's side ?

dsdannynikravesh commented 1 year ago

Can confirm I am also experiencing this issue on my end.

mikaeljan commented 1 year ago

Also encountered following error on Safari 16.2

Refused to execute https://www.instagram.com/embed.js as script because "X-Content-Type-Options: nosniff" was given and its Content-Type is not a script MIME type.

Screenshot 2023-05-23 at 14 09 28

@justinmahar

mikaeljan commented 1 year ago

@justinmahar I have managed to narrow down some info to reproduce the issue and also show a working case.

Opening demo site in Safari (private or not) shows the above issue.

Working case: If any VPN (I am using NordVPN) regardless of region is turned on the post renders and loads correctly.

If it was the other way around (default working and not on VPN ) I would not worry about it, but forcing a user to have a VPN on to have it functional feels weird.

Setting debug property to true results in following.

Screenshot 2023-05-28 at 17 07 05

while the same result in Chrome where it works.

Screenshot 2023-05-28 at 17 09 11
ing-norante commented 1 year ago

Any news on this?

LMulvey commented 1 year ago

Just adding some additional information here–this seems to be 100% a change on Meta's end and unrelated to this plugin. Their developer "forums" are a bit of a mess and I haven't been able to find a concrete answer, however, I made a minimal reproduction of the issue using Instagram's own embed code here: https://emq1jd.csb.app/ <- this also will not load in Safari - and that's using the embed directly from IG.

I've tried to find a workaround and have yet to do so sadly. Hoping a few more sets of eyes on it may find a solution 🤞🏻

Rayraz commented 1 year ago

I am running into the same issue, have not yet managed to find out what's causing it, but would like to keep an eye on this thread in case a solution is found.

mrhemsing commented 1 year ago

I was having a similar issue on my iPhone Safari yesterday but today I've noticed it is working fine. Can anybody else verify?

I used https://live.browserstack.com/ to test other version of iPhone and it also seems to be working there. Could it be Meta/Instagram published a fix? Or is the problem intermitent and will come back?

mikaeljan commented 1 year ago

Most likely intermittent. Worked on my iPhone as well today but failed on Desktop. Not a reliable.

city17 commented 1 year ago

Same issue here on Safari, has found a solution yet?