A user account is required in order to edit this wiki, but we've had to disable public user registrations due to spam.

To request an account, ask an autoconfirmed user on Chat (such as one of these permanent autoconfirmed members).

AllowSeamless

From WHATWG Wiki
Jump to navigation Jump to search

Overview

Currently, seamless iframes work only with same-origin document because otherwise the parent document could steal information from the child document. There are use cases (see below) for using seamless iframes with cross-origin documents. This proposal provides a way for documents to opt into being seamless with cross-origin parents.

Security Concerns

There are two main concerns with allowing seamless to be used across origins:

  1. Seamless iframes adjust their size automatically based on the content inside the iframe. If the height or width of a document contains sensitive information, that information will be leaked to the parent if the document is displayed seamlessly. For example, a shopping cart page might be taller the more items are in the shopping cart.
  2. CSS styles inherit across from the parent document to its seamless children. If a malicious parent is able to inject styles into a cross-origin child, the parent could potentially learn sensitive information. For example, the parent could learn whether elements exist in the child document that match various selectors, including attribute value selectors. An attacker might be able to use this technique to extract the values of HTML input elements, for example.

Use Cases

Dashboard

A dashboard web site wishes to display status indicators that are hosted on a number of different domains. The size of these status indicators varies depending on the status. For example, if a given domain is having difficulty, the status indicator might list the problems the domain is having.

Proposal

Security Analysis

Examples

<html allowseamless>
<body>
If my parent iframe has the seamless attribute, then <a href="http://example.com">this
example link</a> will navigate my parent and the iframe will autosize to the right height
and width.
</body>


<html allowseamless="inherit-style">
<body>
Now in addition to the above, I will inherit styles from my parent. Inheriting styles requires
an additional opt-in because letting my parent style me could leak more information (such
as the value of form input elements) to my parent.
</body>