Sites don't reliably show up in iframe

[ChialiT]

on the submit URL interface, we should let user to quickly check if the URL can render properly.

the interface should contain a small message to let user know if the URL didn't load into the iFrame, means it's not working.

[tpantpan]

Should we not allow the site to be submitted if it doesn't pass the iFrame test? Otherwise we will still need to remove the content for UX purposes?

I'm documenting websites that have an iframe issue on the 'site list' tab here, will have 'IFRAME ISSUE' in columns A and B: https://docs.google.com/spreadsheets/d/1eBMImYmmqA8_JxlsGw-2Gv5Pcvcx4XOPsv0nLHfpIog/edit#gid=1172839891

I'll be updating the list as I come across more until a tool or fix is implemented.

[tpantpan]

Went through the list of websites that have been submitted!

30% (33 out of 108) of websites have iFrame issues.

Types of rendering issues:

1. Website refuses to render any content

https://9gag.com/

https://i.redd.it/9tysquw33d161.jpg

https://agar.io/

2. A portion of the website doesn't render content, impacting a user's understanding of the website

https://www.incredibox.com/demo/

3. Website pops up but elements of the website aren't rendered properly (eg: background is in black so can't read the website content)

https://www.fon.hum.uva.nl/rob/Courses/InformationInSpeech/CDROM/Literature/LOTwinterschool2006/szabo.best.vwh.net/smart_contracts_2.html

https://neueux.com/apps

Types of websites that result in iFrame rendering issues

• Social platforms: Any content from Reddit, Twitter, Youtube, etc.
• Sites with games: agar.io, wordle
• Sites with large amounts of content (news, research, maybe related to their website elements to render the content?):

https://www.mayoclinic.org/healthy-lifestyle/adult-health/in-depth/bone-health/art-20045060
https://www.nature.house/
https://www.houzz.com/hznb/projects/hillside-views-watertown-pj-vj~2702921
https://www.nature.com/articles/s41586-023-06291-2
https://www.buzzfeed.com/mackenziekruvant/things-you-should-never-say-on-a-first-date

[tpantpan]

8/8: Discussion of issue with team

• Jay for Issue 3: Site theme specific?
• Nico: Instead of iFrame, consider popup? Might impact UX in different ways though

Beyonder: integrate iFrame tester tool in the website and add as part of the 'add site' user flow. If it's not compatible, create a popup and notify user?

[tpantpan]

Testing feedback with X-frame bypass https://jsfiddle.net/w3bod6s5/

https://www.nature.house/
old: refused to connect
new: works well!

https://www.houzz.com/hznb/projects/hillside-views-watertown-pj-vj~2702921
old: refused to connect
new:

Error 403 Not Allowed
Not Allowed

Error 54113
Details: cache-par-lfpg1960028-PAR 1692985249 1787166720

Varnish cache server

https://www.nature.com/articles/s41586-023-06291-2
old: refused to connect
new: works well!

https://www.buzzfeed.com/mackenziekruvant/things-you-should-never-say-on-a-first-date
old: refused to connect
new: core content shows up, comments and 'more from buzzfeed' section don't show up. I would consider this pretty good

https://www.mayoclinic.org/healthy-lifestyle/adult-health/in-depth/bone-health/art-20045060
old: refused to connect
new: text loads! but banner ad elements are messed up. it's good enough, probably looks better larger screen

https://neueux.com/apps
old: loaded fine but background colors messed up
new: worse, images don't load

https://www.fon.hum.uva.nl/rob/Courses/InformationInSpeech/CDROM/Literature/LOTwinterschool2006/szabo.best.vwh.net/smart_contracts_2.html
old: loaded fine but background color messed up
new: works well!

https://www.incredibox.com/demo/
old: site loaded fine but interactive element didn't load
new: seems to work? But test window too small so can't tell

https://agar.io/
old: refused to connect
new: doesn't load anything

10: https://i.redd.it/9tysquw33d161.jpg
old: refused to connect
new: loads stuff like this �����JFIF�������4ICC_PROFILE���$appl�mntrRGB XYZ ���� � acspAPPLAPPL����-appl����%��M8������� desc�ecprt�d#wtpt���rXYZ���gXYZ���bXYZ���rTRC�� chad��,bTRC�� gTRC�� desc�Display P3textCopyright Apple Inc., 2017XYZ �Q����XYZ ��=�����XYZ J��7 �XYZ (8��ȹpara��ff� Y�� [sf32�B�����&���������������n��C���������� � � ��������������� $.' ",#��(7),01444�'9=82<.342��C� �� �2!�!2222222222222222222222222

9gag.com
old: refused to connect
new: a3Zp8y1,a5XyznL,a4orAxy,amAbx8y,aPgdPOn,a3Zp0g3,axonOm2,a7q69Mm,anzWxX5,aDYN8ew

[hackertron]

inital iframe bypass using proxy https://jsfiddle.net/w3bod6s5/

[tpantpan]

@jp4g feedback - aligned on feedback, seems like this is the best workaround to move forward with

@thebeyondr - to support more on this since high prio for UX

@NicoSerranoP - idea to open new popup for each new channel, esp. if there is an iframe issue? However, this disrupts the in-app experience

[thebeyondr]

Summarizing the approach to tackling this major issue

• Updating URL submission
  On the submit URL interface ( Users can add URLs without assigning tags #25 [FE] Submit URL #33 ), we should let user to quickly check if the URL can render properly.
  the interface should contain a small message to let user know if the URL didn't load into the iFrame, means it's not working.

• Using a proxy (Feat/use-proxy #30)
  I'll update the front-end to use a proxy to get the url. I'll investigate the reliability and security of some public proxy options to this end, based on the fiddle by @hackertron 🫡

• Flagging content
  In case our first two don't work it would be nice to allow users to report sites that fail