Re: Cross Origin Web Components: Fixing iframes

On Tue, Nov 26, 2013 at 2:03 PM, Ryosuke Niwa <rniwa@apple.com> wrote:

> Hi,
>
> I have been having informal discussions of our earlier proposal for
> cross-orign use cases and declarative syntax for web components, and I
> realized there was a lot of confusion about our motivations and decision
> decisions.  So I wanted to explain why/how we came up that proposal in this
> email.
>
>
> *Problem*: A lot of websites embed SNS widgets, increasing the security
> surface of embedders.  The old version of techcrunch.com, for example,
> had 5+ social share buttons on each article.  If any one of those SNS
> websites got compromised, then the embedder will also get compromised.
>

This is a valid problem. Does anyone have related use cases that might be
in-scope for this discussion?


> *What if we used iframe?*
> What if we replaced each such instance with an iframe?  That would give us
> a security boundary.
>
> On the other hand, using an iframe for each social button is very
> expensive because each iframe loads a document, creates its own security
> origin, JS global object, and so forth. Initializing new script context
> (a.k.a. "VM", "world", "isolate", etc…) for every single SNS widget on a
> page is quite expensive.  If we had 10 articles, and each article had 5
> social buttons, we'll have 50 iframes, each of which needs to load
> megabytes of JavaScript.
>
> iframe is also heavily restricted in terms of its ability to layout
> itself. Comment widgets (e.g. DISQUS) for example need to stretch
> themselves to the height of its content.
>
> We also need a better mechanism to pass arguments and communicate with
> cross-origin frames than postMessage.
>
>
> *What if we made iframe lighter & used seamless iframe?*
> The cost of iframe could be reduced substantially if we cached and
> internally shared each page's JavaScript.  However, we still have to
> instantiate its own script context, document, and window objects.
>
> We can also use seamless iframe to address the comment widget use case.
>
>
> *What if we let each iframe create multiple "views"?*
> The problem with using an iframe for a cross-origin widget is that each
> iframe creates its own document, window, etc… even if there are multiple
> widgets from the same origin.  e.g. if we had a tweet button on 10
> different articles, we have to create its own document ,window, etc… for
> each tweet button.
>
> We can reduce this cost if we could share the single frame, and have it
> render multiple "views".  Naturally, each such view will be represented as
> a separate DOM tree.  In this model, a single iframe owns multiple DOM
> trees, each of which will be displayed at different locations in the host
> document.  Each such a DOM tree is inaccessible from the host document, and
> the host document is inaccessible from the iframe.
>
> This model dramatically reduces the cost of having multiple widgets from
> the same origin.  e.g. if we have 10 instances of widgets from 5 different
> social networks, then we'll have only 5 iframes (each of which will have 10
> "views") as opposed to 50 of them.
>
>
> *What if we provided a declarative syntax to create such a view?*
> Providing a better API proved to be challenging.  We could have let page
> authors register a custom element for each cross-origin widget but that
> would mean that page authors have to write a lot of script just to embed
> some third-party widgets.  We need some declarative syntax to let authors
> wrap an iframe.
>
> Furthermore, if we wanted to use the multiple-views-per-iframe, then we'll
> need a mechanism to declare where each instance of such a view is placed in
> the host document with arguments/configuration options for each view.
>
> A custom element seemed like a natural fit for this task but the
> prototype/element object cannot be instantiated in the host document since
> the cross-origin widgets' script can't run in the host document and
> prototype objects, etc… cannot be shared between the host document and the
> shared iframes.  So we'll need some mechanism for the shared iframe to
> define custom element names, and have the host document explicitly import
> them as needed.
>
>
> At this point, the set of features we needed looked very similar to the
> existing custom element and shadow DOM.  Each "view" of the shared iframe
> was basically a shadow DOM with a security boundary sitting between the
> host element and the shadow root.  The declarative syntax for the "view"
> was basically a declarative syntax of a custom element that happens to
> instantiate a shadow DOM with a caveat that the shadow host is inaccessible
> form the component, and the shadow DOM is inaccessible from the host
> document.  It also seemed natural for such an "shared iframe" to be loaded
> using HTML imports.
>
>
> You can think of our proposal as breaking iframe down into two pieces:
>
>    1. Creating a new document/window
>    2. Creating a new view
>
> I think decomposing the problem this way is a good step.

Re: creating a new document/window, purely in terms of *mechanics*, IFRAME
does this already. Is anything else required?

Re: creating a new view, this is really interesting to me. It seems there
are a few different parts, I think most of these are needed for the use
case above; I've also noted where we might break out and "explain" some
existing part of the platform.

- Arranging the rendering of a DOM (sub)tree into a "view". IFRAME,
ShadowRoot and indeed just "rendering in general" do this.
- Arranging the rendering of something else into a "view". Replaced
elements like OBJECT and IMG do this. Maybe this is just trivially "arrange
the rendering of a DOM containing CANVAS" though.
- Communicating or blocking layout across the "view" boundary. Cases where
information flows outside-in: the viewport-document relationship; IFRAME.
Cases where information flows two ways: seamless IFRAME, Shadow DOM, layout
in general.
- Something about laying things out/rendering outside the bounds of the
"view". Shadow DOM and does this (you can rel/abs/fixed position stuff
outside of the host element bounds.) This is a tricky one... in scope or
does Shadow DOM remain a special case? Would some embedders trust a
component enough to let them clickjack them, just not steal their cookies,
etc.?
- Event retargeting. Seamless IFRAME and Shadow DOM do this.


> and providing a mechanism to do 2 without doing 1 (or that doing
> 2 multiple times after doing 1 once), and making it usable with a
> declarative syntax.
>

This definitely deserves to be bullet 3--usable with declarative syntax.

To clarify that I understand--the importance of succinct declarative syntax
is so that the embedder doesn't end up including the "shim" script for
Foo's widget from foo.com, which means trusting foo.com which was the whole
point! Right?

It would be nice if we could solve this problem in a layered way. For
example, I think the "view" stuff above is a lower-level primitive, and the
declarative syntax should be explained in terms of (something for getting a
window+document--IFRAME?) plus "view" plus (extremely small alpha that
explains how the stuff is wired up.)

I guess it is OK if the API is not declarative on the widget side? If we
assume the widget enjoys the isolation of an IFRAME, is performance the
primary motivator on this side? It would be nice if the widget author could
get something rendered very quickly.

I think this "declarative" part of the problem breaks down this way:

- How the page author "invokes" something in the embedded component. How is
it named and how does the author mention the name?
- How does the embedding page understand that there's an "instance" of
their stuff contributing to the main page now?
- How does the author configure an instance from the embedded component?
Presumably the button needs to know something things from its embedder,
like API keys, etc.

We should study existing web buttons, etc. to see what's missing from the
above list.


> - R. Niwa
>