PayPal Builds 'Zoid' JavaScript Library To 'Make IFrames Cool Again' (medium.com) 85
"Earlier this year I gave a talk at FullStack conference in London about making iFrames cool again," writes a lead engineer at PayPal.
In a nutshell: iframes let you build user experiences into embeddable 'cross-domain components', which let users interact with other sites without being redirected. There are a metric ton of awesome uses for that other than tracking and advertizing. Nothing else comes close for this purpose; and as a result, I feel we're not using iframes to their full potential.
There are big problems, though... My talk went into how at PayPal, we built Zoid to solve some of the major problems with iframes and popups:
- Pre-render to avoid the perception of slow rendering
- Automatically resize frames to fit child content
- Automatically resize frames to fit child content
- Pass down any kind of data and functions/callbacks as props (just like React), and avoid the nightmare of cross-domain messaging between windows.
- Make iframes and popups feel like first class (cross-domain) components.
Zoid goes a long way. But there are certain problems a mere javascript library can not solve. This is my bucket list for browser vendors, to make iframes more of a first class citizen on the web... Because fundamentally: the idea of cross-domain embeddable components is actually pretty useful once you start talking about shareable user experiences, rather than just user-tracking and advertizing which are obviously pills nobody enjoys swallowing.
He acknowledges that he "really likes" the work that's been done on Google Chrome's Portals (which he earlier described as "like iframes, but better, and worse.")
"I just hope iframes don't get left behind."
There are big problems, though... My talk went into how at PayPal, we built Zoid to solve some of the major problems with iframes and popups:
- Pre-render to avoid the perception of slow rendering
- Automatically resize frames to fit child content
- Automatically resize frames to fit child content
- Pass down any kind of data and functions/callbacks as props (just like React), and avoid the nightmare of cross-domain messaging between windows.
- Make iframes and popups feel like first class (cross-domain) components.
Zoid goes a long way. But there are certain problems a mere javascript library can not solve. This is my bucket list for browser vendors, to make iframes more of a first class citizen on the web... Because fundamentally: the idea of cross-domain embeddable components is actually pretty useful once you start talking about shareable user experiences, rather than just user-tracking and advertizing which are obviously pills nobody enjoys swallowing.
He acknowledges that he "really likes" the work that's been done on Google Chrome's Portals (which he earlier described as "like iframes, but better, and worse.")
"I just hope iframes don't get left behind."
Ajax? (Score:5, Insightful)
Re: (Score:1)
I don't think any modern browser will let you make an Ajax call to a third party site from you own frame. That's a cross-site security threat. You need a dedicated iframe for that like the ones google recaptcha and what not use.
On a funny note, from TFS:
... ...
-Automatically resize frames to fit child content
- Automatically resize frames to fit child content
Since they make sure to resize frames to fit child content twice, what could possibly go wrong?
Re: (Score:3, Insightful)
They recursively automatically resize frames to fit child content.
..They recursively automatically resize frames to fit child content.
....They recursively automatically resize frames to fit child content.
Re: (Score:2)
They recursively automatically resize frames to fit child content. ..They recursively automatically resize frames to fit child content. ....They recursively automatically resize frames to fit child content.
...until you are lost in a maze of twisty little frames, all alike.
Re: (Score:3, Informative)
That's what postMessage is for. But, thanks to Microsoft (and now in all browsers), you can only post to a document in a child, not a document in a different tab or window. Plus you have all the needing to serialise objects or differing varieties of copying (no byRef passing) that doesn't guarantee that what you receive is what you sent, same with (Service) Workers. So there's localStorage for that. But, thanks to Private Browsing it doesn't work consistently, if at all, and you still have to serialise obje
Re: (Score:3)
It's almost as if the original idea of web pages was that they were separate entities and they fight tooth and nail against attempts at multi-document integration...
It's almost as if the original idea of web pages was to display static content and not to try to be an application running in a browser.
Re: (Score:2)
It's almost as if the original idea of web pages was that they were separate entities and they fight tooth and nail against attempts at multi-document integration...
It's almost as if the original idea of web pages was to display static content and not to try to be an application running in a browser.
It's almost as if motorized vehicles were meant to transport people and not to ship boxes of arbitrary goods.
The web is useful as a collection of static pages but 10 million times more useful with the ability to run an application in a browser. Like Slashdot, for example. Or a shopping cart or weather report or chat rooms or even pointerpointer.com [pointerpointer.com].
Re: (Score:2)
Certainly it's more useful this way. But the fact that the original design didn't take a lot of the current needs into account is part of why we have so many layers of features fixing holes and/or performance issues from other features.
Re: (Score:2)
Certainly it's more useful this way. But the fact that the original design didn't take a lot of the current needs into account...
I agree; it's hard to prophesize, especially about the future.
Like a lot of things, the internet became far more of a thing than anyone imagined. Tim Berners-Lee was a visionary, but even visionaries can only see so far. (Another factor is a lot of the technology that the web uses now didn't exist when it was first created.)
I've said this before, but when I started out in computers (1980) the very idea that you would someday own an entire gigabyte of mass storage was ludicrously silly. It was like thinking
Re: (Score:2)
That WAS the original Idea. Today your browser is a thin client to network based applications.
Why did this happen?
1. During the late 1990's and early 2000's everyone new how to browse a webpage, but running that application was scary. Put the application on the web page, then people just automatically didn't fret about using it.
2. Lack of standardization withing graphical terminal emulators. X-Terminals were often more expensive then the standard PC, RIP Script was kinda popular, but it stayed in Specia
Re: Ajax? (Score:2)
What? You must be confused. Sites do that all the time. That's the entire point of CORS headers.
Re: (Score:3)
-Automatically resize frames to fit child content - Automatically resize frames to fit child content ...
Since they make sure to resize frames to fit child content twice, what could possibly go wrong?
I'm not sure children should be using paypal.
Re: (Score:2)
-Automatically resize frames to fit child content.
First mobile games, mobile apps, then triple a games on console and pc... Now they wanna give web browsers automatically resizing loot boxes? Argh!
Hehe
Re: (Score:3)
That depends on your requirements. Iframes can be useful for PCI compliance where you don't want any credit card information to go anywhere near your site. Where I live hosted payment pages are the common workaround for this. An issue with this is those that are not used to hosted payment pages may trust them less, and they don't offer as much flexibility to keep the popup "in brand".
Re: (Score:1)
Re: (Score:2)
Not true, the data form containing the credit card information simply has to be submitted directly to the payment processor to avoid having sensitive data handled by your server, and thus greatly simplify PCI requirements. This does not require that the form be presented in an iframe.
Re: (Score:3)
Doesn't Ajax do away with the need for iframes? You take the exact data that you need from wherever and can display it in a container.
No. AJAX is making an HTTP request within Javascript usually to some type of service that can serve data to be rendered like a REST service. iframes are for the situation when the other site doesn't expose this sufficiently enough to do what you're suggesting so you embed the other site within your application. It depends on the situation.
Re: (Score:1)
Re: (Score:2)
Re: (Score:2)
Correct, but the AJAX call can be a loader that returns HTML code to inject into the current web page.
True as long as the AJAX call is back to the originating domain, otherwise you have to open the security blanket to allow the call across sites..
Obviously, neither of you understand web tech from jQuery onward. Whether the XMLHttpRequest returns HTML or some other format like JSON or XML, you manipulate the DOM in JavaScript utilizing that information. JavaScript is unaware of the payload to do a security check as far as I know. The only security checks that I'm aware of in that situation is CORS [wikipedia.org]. Only legacy websites and services don't support pre-flight checks. CORS allows you to control what domains are allowed to call you. So, yes, using C
Re: (Score:2)
The <iframe> element allows some measure of browser-mediated sandboxing so that you don't have to negotiate with the server operator to open CORS to your domain.
Re: (Score:2)
"web tech"
Hahahaha, web tech, thats funny :) Web "throw a load of bad ideas into a bucket of slop called javascript and stir" you mean.
Re: (Score:2)
old dog, unchanged bray (Score:2)
Congratulations. You have, at minimum, demonstrated the social wherewithal of conning the greater fool, though it remains unclear whether you break this chain of greater fool-hood when your paycheck gets spent.
———
The fundamental DNA of web technology was implanted during the dotcom boom. Those of us who were there at the time tend have tended to regard web technology as a cesspool of the greater fool ever
Re: (Score:2)
Re: (Score:2)
Maybe one day you'll learn real progamming and get an even bigger paycheque.
Re: (Score:2)
Re: (Score:2)
To a web developer, technology is figuring out how to do something in spite of the rickety edifice that is web development.
Re: Ajax? (Score:1)
Re: (Score:2)
Doesn't Ajax do away with the need for iframes?
There is no need for iframes, except if you load a while page different from a different domain and/or security reasons.
Re: (Score:1)
Re: (Score:2)
How come when I ask a perfectly reasonable question like this, I only get a question like "FUCK OFF AND DIE, FAGGOT!"
Because there are a significant number of people who are basically just idiots with poor impulse control (IPIC).
IPICs are everywhere- you'll find them in stores, schools, bus stops, parties, movie theaters, beaches, bars, restaurants, offices, parking lots, prisons, at the 7-11, the DMV, and of course, on the internet. Hell, you could probably climb to the top of Mt Everest and find one waiting for you.
Maybe it's always been this way but it seems to me as if it's more of a problem now.
Re:Ajax? (Score:5, Informative)
I wrote a simple email tool which loads the body of the message in an iframe. The reasons for doing so are:
1) The body is (sort of) user supplied data. It's washed when we receive it, so it won't be dangerous per-se, but it might have images too wide for the space or whatever.
2) The inserted content is of unknown size, so the iframe scales it correctly and assigns scroll bars as necessary (yes, you can do with with ajax/css, but it's much harder work)
3) There's really no need for Javascript just to render a page on the screen
Once you accept Javascript, then yes, Ajax does this quite nicely (with a good chunk of HTML sanitisation and lots of CSS to keep it contained in your page). However, you can do it with or without javascript very nicely with an iframe.
In the case of paypal, if they do the same as other payments people where you do the payments flow inside an iframe, then actually a lot of my points apply - Ajax isn't an option, and the HTML you're including is beyond your control, and so you need to be careful with it (accidental scroll bars are better than a fully broken page). Whether any of this makes iframes "cool" is an entirely different question though ;-)
Re: (Score:2)
Re: (Score:2)
Didn't people start moving away from frames when SBC started filing patent infringement claims against them?
Let them die (Score:2, Insightful)
Re: (Score:2, Interesting)
iframes are the current way used to segregate code from different domains in order to prevent cross-site scripting exploits or at least, this is the theory. Otherwise, you have to basically reverse-proxy everything which is my preferate way to go so sites don't look like they load stuff from a zillion domains. Short from reverse-proxying everything or using iframes, what solution do you suggest?
Re: Let them die (Score:2)
Fetch API with CORS headers.
Re: Let them die (Score:2)
The question is... (Score:2)
Re: (Score:3)
No. But it'll send small gnomes to your house to break your fingers so it can never be properly sized a child frame anyway. Sometimes bad ideas are just bad.
Re: (Score:2)
I also need to know if it will automatically resize frames to fit child content. Can we get an editor to clarify if it will automatically resize frames to fit child content, or not?
Re: (Score:2)
Does it automatically resize frames to fit child content?
It looks like it does it twice just to make sure.
Privacy (Score:5, Insightful)
This sounds like an attempt to get around the gains in privacy control in the browser. Not allowed to load in third party cookies? Just load in an entire third party website instead.
Re: (Score:2)
Re: (Score:2)
Some browsers block cookies in iframes from other sites completely. I think Safari started that.
And yes, that practice makes it difficult to embed legitimate content from other sites. All because of the likes of ad agencies, Facebook and similar.
No possible wholesome motive. (Score:2)
Paypal like all other megabusinesses cannot have a wholesome motive. This begs the question of their real motives and Slashdot is an ideal place to ask.
Why do they want this?
What are possible privacy implications?
What are possible security implications?
Re: (Score:2)
Citizen, there are a "metric ton of awesome uses for that other than tracking and advertising [sic]". Do not ask for specifics, as they automatically resize frames to fit child content. The content is obviously "user experiences, rather than just user-tracking and advertising". If tracking and advertising and automatically raising frames to fit child content are important enough to mention twice, why would you think they might want to use iframes for tracking and advertising?
Re: (Score:2)
Argh, stupid keyboard "fixing" typos in cut-and-paste segments. "tracking and advertizing [sic]"
Re: (Score:2)
iframes are for "shareable user experiences".
I want to pay and go. No "shareable user experiences" there.
Re: (Score:3)
I would imagine that they primarily want to make their service more appealing to vendors, and one way of doing that is to make it easier and more seamless. Right now you leave the vendor's site to make a payment, then get sent back to it. What if they just load payment into an iframe? That better gives the appearance of being all one site.
Re: (Score:2)
Language changes, but "begs the question" is almost never what you really meant to say. It now means what you meant, but you're reusing idioms instead of communicating clearly. Communicate clearly. English has far too many options in syntax and grammar, making it rich and rewarding when you find the right combination of words. But a minefield if you don't study it.
Boom you died, stepped on a mine.
If it's a script (Score:2)
then it's wrong.
Re: (Score:2)
then it's wrong.
Guess you better stop using Slashdot then. Here's your sign.
"user experience","cool","awesome" (Score:2)
Yeah, its a web dev in full bullshit flow.
And who spells advertiSing with a Z ffs?
Re: (Score:2)
People who learned the Queens english in school, like me. Or any Aussi or true englishman.
Re: (Score:2)
"People who learned the Queens english in school, like me"
What English dialect you learnt , it didn't come from the queen. Here in England we spell it with an S. Check out the spelling:
https://www.asa.org.uk/ [asa.org.uk]
Re: (Score:2)
Oh, I mixed them up with each other. So I must have adopted the american spelling for that word ^-^ a shame!
https://english.stackexchange.... [stackexchange.com]
Joke's on them (Score:2)
iframes were always cool!
Not helpful for automated testing. (Score:3)
I do a lot of automated testing with Selenium WebDriver and testing iframed sites is an absolute nightmare in comparison to HTML 5 markup.
Re: (Score:2)
You got that right. Nearly as much fun as web frameworks that assign an element a random GUID on page render.
Re: (Score:2)
As each iFrame is its own web site, why don't you test them individually?
Re: (Score:2)
Because integration testing is a thing and testing things individually does not guarantee they work together.
HTML standards (Score:5, Informative)
In HTML5 iframes are "allowed". So I suppose that in a next HTML standard iteration they might get obsolete.
Re: (Score:3)
The concept of iframes will never disappear. The functionality is valid and has real purposes.
The specific tag might evolve into something else, sure, but even then, I doubt <iframe /> will disappear then, at least not in the next 5 years.
Re: (Score:2)
Re: (Score:2, Interesting)
Unlike previous versions, HTML5 isn't a static specification though. They could deprecate iframes in the "evolving" standard.
I'd like to kill HTML5 and go back to an SGML compliant language, even better if XHTML could come back but I know that's widely hated.
Disabled (Score:1)
I have iframes permanently disabled. Seems not to affect much (nothing I care about anyway). Been like this since, oh, I don't know, they were invented?
So it resizes frames to fit child content2x better (Score:2)
- Automatically resize frames to fit child content
- Automatically resize frames to fit child content
Every time you make an IFRAME a kitten dies. (Score:2)
Jeebus, why won't IFRAMEs die already?
Typically an IFRAME represents a poor architectural decision, either to:
Seriously, if a dev says "Oh! We can do it with an IFRAME!", run far and fast.
Re: (Score:2)
Is it a fundamental issue with a design that uses a frame or viewport?
Does the way IFRAME work sucks, and with changes it could be better?
Are web developers misusing an otherwise useful functionality, is the correct application of this tool not being communicated correctly to the industry?
I get that in terms of layout it sucks. If I slice up my website to fit on an 800x600 display (when IFRAMEs were last relevant), and the underlying content changes layout. Well now I have to deal with a bunch of scrollable
Re: Every time you make an IFRAME a kitten dies. (Score:2)
In both cases, it's a punt down the road, to avoid doing the _real_ work well.
In the former (decision not to perform a good integration), the devs choose not to make the system do intelligent work for the user, but instead say "we'll just put up whatever's on the screen and let the other system sort it out".
Certainly this is a decision that bad budgeting forces on developers - so often not their fault directly. But businesses need to learn to take "no you can't do that with that little money" for an answer,
Re: (Score:2)
I'm not aware that there is another way to incorporate another web site int your web page ... please enlighten me how you would do that without an iframe.
Re: Every time you make an IFRAME a kitten dies. (Score:2)
From front-end code exclusively, an IFRAME is pretty much it.
(I'm assuming you could write a screen-scraper in JavaScript, but that'd be a long way to go, and you might have to deal with cross-site scripting limitations, etc).
Where I see a lot of surrender to the expediency of IFRAME awfulness is in corporate software development.
A variety of server-side frameworks and portal software offer capabilities to integrate enterprise systems (i.e put payroll, HR, email, room-reservation, etc. systems on your intra
Re: (Score:2)
Portlets never where a big thing.
I guess 10 years ago everyone was all about "mashups", but they are today not a big thing either.
Great Zoids Upon Us! (Score:2)
I remember when iFrames were cool! (Score:1)
Re: (Score:2)
Yep. Good times. iFrames could solve all sorts of problems, but they introduced so many more. Accessibility was a nightmare. Weird scrollbars in weird places. Page title. What happens if your menu is too long for the screen it's on...
True But .. (Score:1)
True, but this is what the overwhelming majority of them WILL be used for.