Skip to content

Commit

Permalink
Add non-iframe example
Browse files Browse the repository at this point in the history
Addresses #4.
  • Loading branch information
cfredric committed Jan 30, 2024
1 parent 1719b10 commit 57147ac
Show file tree
Hide file tree
Showing 2 changed files with 16 additions and 2 deletions.
18 changes: 16 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,9 @@ These costs and constraints can be avoided by supporting a few new headers.

## Example

### Status quo
### Embedded `<iframe>`

#### Status quo

As an illustrative example, consider a calendar widget on calendar.com, embedded in example.com. During the user's first-ever visit to the example.com page, the flow of events is the following:

Expand All @@ -48,7 +50,7 @@ This is working as intended, since the user agent may choose to delegate the dec

However, consider a subsequent visit to the example.com page, after the `storage-access` permission has already been granted by the user or user agent. Without this proposal, the flow on the subsequent visit looks exactly the same as the flow on the first visit. However, the user does not need to grant permission this time, since they have already granted permission. This means that the latency and network traffic incurred by the first iframe load, the `document.requestStorageAccess()` script execution, and the subsequent reload are entirely unnecessary.

### New flow
#### New flow

Instead, we can imagine a different flow, where the user agent recognizes that the calendar widget already has `storage-access` permission and somehow knows that the widget wants to opt in to using it, so it loads the iframe with access to unpartitioned cookies. This would avoid unnecessary latency and power drain due to network traffic and script execution, leading to a better user experience. So, the flow could be:

Expand All @@ -67,6 +69,18 @@ This flow avoids loading the widget twice, and avoids executing script solely fo

Additionally, the use of HTTP headers removes the requirement for JavaScript execution. This enables non-iframe resources to take full advantage of existing `storage-access` permission grants.

### Embedded non-`<iframe>`

Consider a document that includes an image (e.g.) which happens to be served by a different (unrelated) site.

At present, no web platform API allows loading this image via a credentialed fetch in browsers that block third-party cookies by default. So, if the image requires the user's credentials (i.e. unpartitioned cookies), then this is broken.

However, if the browser supports the headers described below (and if the user has already granted the `storage-access` permission to the appropriate `<site, site>` pair somehow - e.g. via an iframe at some point in the recent past), then this scenario is supported by the browser as in the following sequence:

![sequence diagram of network requests with Storage Access request and response headers for an embedded cross-site image](./images/embedded_image.png)

Browsers that do not support the proposed headers will still receive the appropriate `401 Unauthorized` response. However, browsers that do support the proposed headers are able to retry the fetch and can send the user's credentials, since the user has already given permission for this (by assumption).

## Proposed headers

### Request headers
Expand Down
Binary file added images/embedded_image.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

1 comment on commit 57147ac

@myok12
Copy link

@myok12 myok12 commented on 57147ac Jan 31, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, thank you.

Please sign in to comment.