732: Thomas Steiner on New Cross-Origin Storage APIs

The podcast discusses the evolution and challenges of cross-origin resource sharing on the web, focusing on a proposed new API called Cross-Origin Storage. This API aims to restore efficient caching of large, shared resources - such as web fonts, AI models, and libraries - across different websites while addressing past security and privacy concerns. These concerns previously led browsers to disable cross-origin caching due to risks like timing attacks, which could expose user behavior by detecting cached files. The discussion highlights how modern web needs, especially with the rise of multi-gigabyte AI models, have renewed the demand for shared caching to reduce redundant downloads and improve performance.

The proposed Cross-Origin Storage API uses content hashes (e.g., SHA-256) to securely identify and share resources across origins, allowing browsers to verify integrity and avoid tampering. It supports both imperative and declarative integrations for scripts, stylesheets, fonts, and AI models, functioning as a progressive enhancement that doesn't break existing functionality. Use cases include global sharing (e.g., Google Fonts) and origin-specific sharing (e.g., CodePen subdomains). The API is being developed with privacy safeguards, such as tying access to third-party cookie permissions, and is under consideration for standardization across browsers. However, challenges remain around potential misuse for tracking, browser fragmentation, and balancing performance gains with privacy protection.

• What if you pre-cache shared AI models for your SaaS using Cross-Origin Storage?
  • Move: Identify a commonly used open-source AI model (e.g., BERT or Gemma 2B) in your niche. Use the crossOriginStorage.requestFileHandle() API in a dev trial build to fetch and store it by SHA-256 hash on first user visit, then reuse locally across sessions.
  • Why Now?: Chrome's dev trial and available extensions let you test this today; early adopters can reduce AI load latency before competitors.
  • Expected Upside: Cut AI initialization time by 60 - 80% for returning users, improve UX, and reduce cloud inference costs by favoring local execution when possible.
• What if you offload web font loading to Cross-Origin Storage for faster rendering?
  • Move: Replace standard @font-face URLs with a script that checks crossOriginStorage for a known hash of your primary font (e.g., Inter or Google's Roboto). If missing, fetch and store it with integrity verification; if present, create a blob URL for immediate use.
  • Why Now?: Google Fonts and Chromium engineers are already exploring this use case - early implementation gives you a performance edge while contributing real-world feedback.
  • Expected Upside: Achieve near-instant font loading across your site and subdomains, boosting Core Web Vitals scores and SEO ranking.
• What if you build a CoST-aware bundler plugin to eliminate redundant dependency downloads?
  • Move: Create a lightweight Vite or Rollup plugin that detects common dependencies (e.g., Lodash, Vue, React) and emits script tags with cross-origin-storage attributes and integrity hashes, enabling shared caching across origins.
  • Why Now?: Nuxt and other frameworks are already exploring CoST-aware tooling - solo devs can publish niche plugins that gain traction fast in the ecosystem.
  • Expected Upside: Reduce average bundle size by 20 - 40% for users visiting multiple sites using your plugin, increasing your tool's adoption and establishing authority in performance optimization.

• Research and experiment with the Cross-Origin Storage API using available browser extensions or dev builds to understand its impact on resource caching.
• Implement integrity attributes (e.g., SHA-256 hashes) in script and link tags for critical dependencies to enable secure, shared caching across origins.
• Optimize web font loading by testing declarative cross-origin attributes with global providers like Google Fonts to reduce redundant downloads.
• Audit your web application's large dependencies (e.g., AI models, WebAssembly modules) and explore using content hashes to leverage potential cross-origin cache sharing.
• Advocate for or contribute to bundler plugins (e.g., Vite, Nuxt) that preserve common dependency boundaries to support future cross-origin caching optimizations.