demo · v131
The CDN-injected speculation rules use case
The planning use case wasn't sites that author their own speculation rules. It was edge CDNs (Cloudflare Workers, Fastly Compute, Akamai EdgeWorkers) that want to inject prefetch/prerender rules on behalf of customers without being whitelisted in the customer's CSP. Walk through the flow below.
app server
Ships HTML with strict CSP:
script-src 'self'
cdn edge
Appends a
Speculation-Rules: "/edge/prefetch.json" header on the response
browser
Pre-131: header silently dropped because
'unsafe-inline' isn't in CSP. Post-131: header honoured because speculation rules are CSP-exempt.
cdn edge
Browser fetches
/edge/prefetch.json (also subject to connect-src) and starts prefetching the listed URLs.edge strategy comparison
the api
// Edge response sets Speculation-Rules header pointing at an off-app URL
Speculation-Rules: "/edge/prefetch.json"
// The body of /edge/prefetch.json
{
"prefetch": [
{ "source": "list",
"urls": ["/article/1", "/article/2"] }
]
}