Skip to content

[css-values-5] Proposal for a new <request-url-modifier> called <cross-origin-storage> #14056

Description

@tomayac

Background

On the Chrome team, we're considering a new browser API and storage mechanism called Cross-Origin Storage (COS), which would allow for resources (like huge AI models but also large Web fonts) that are identified by their hashes to be shared across origins. This proposed API is imperative (navigator.crossOriginStorage.requestFileHandles()), but we reckon an additional declarative way to tap into this new storage mechanism from CSS would make sense, specifically, for Google Fonts (CC: @rsheeter, @davelab6, @tomasdev; for CSS WG: @tabatkins).

Proposal

Add a new <request-url-modifier> to <url>:

cross-origin-storage() = cross-origin-storage( [ '*' | <string># ] )

This new modifier would be dependent on the existing <integrity-modifier>. With the <cross-origin-storage-modifier> present, this would be the processing flow:

  • If a resource matching the hash from integrity is found in COS and the origin is allowed, it is obtained from there.
  • Else, the resource is obtained from the network and stored in COS for the future, iff the origin limitations allow so (see the following example). If the integrity doesn't match the fetched resource, the browser already refuses to use it, and thus also doesn't store it in COS

Usage example

Allowing any origin to pull a resource from COS, falling back to the url():

@font-face {
  font-family: "Popular Emoji Font";
  src: url(
           "https://example.com/popular-emoji.woff2" 
           integrity("sha256-xyz789...") 
           cross-origin-storage(*)
       );
}

Allowing only specific origins to pull a resource from COS, falling back to the url():

@font-face {
  font-family: "ACME Inc Corporate Font";
  src: url(
           "acme-inc-corporate.woff2" 
           integrity("sha256-abc123...") 
           cross-origin-storage("https://acme-inc.example.com", "https://acme-cdn.example.com", "https://acme-inc-marketing-site.example.com")
       );
}

Origin limitation

The origin limitation is not meant as a security feature, but as a performance opt-in. It is useful for sharing resources between a set of related origins without making the resources globally available. This option is thought for proprietary resources or resources for which global COS cache hits are not anticipated. For example, if an office suite company has two related app sites, write.example.com and calculate.example.com, that both use the same corporate font, they can store the model in COS and restrict access to just these two origins. This way, the font is not globally available to all sites that use COS, but only to the two related sites that need it. Origins not on the list can only obtain the font from the network.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions