Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Example Cloudflare Worker script to add preloads to the `<head>` of a page and enable priority hints
// add this command to the CLI to enable priority hints
--enable-experimental-web-platform-features
// set the site we are modifying
const site = 'www.example-site.com';
// do this on a fetch
addEventListener('fetch', event => {
const request = event.request
const url = new URL(request.url)
event.respondWith(handleRequest(request))
});
// the modified preloads to be added back into the head
var preloads = `
<link rel="preload" href="https://www.example-site.com/css/print-one.css" as="style" importance="low">
<link rel="preload" href="https://www.example-site.com/css/print-two.css" as="style" importance="low">
`;
async function handleRequest(request) {
// store the URL
const url = new URL(request.url);
// disallow crawlers (write a robots.txt file)
if(url.pathname === "/robots.txt") {
return new Response('User-agent: *\nDisallow: /', {status: 200});
}
// when overrideHost is used in a WPT script, WPT sets x-host to original host i.e. site we want to proxy
// store the value of x-host
const xhost = request.headers.get('x-host');
// If this header is missing, abort
if(!xhost) {
return new Response('x-host header missing', {status: 403});
}
// set our hostname to that listed in the xhost header
url.hostname = xhost;
// look for header that allows us to bypass the transform entirely
const bypassTransform = request.headers.get('x-bypass-transform');
// get the accept header to allow us to examine the type of request it is
const acceptHeader = request.headers.get('accept');
// check our x-host header matches the site we are testing and we aren't trying to bypass the transformation
if(xhost === site && (!bypassTransform || (bypassTransform && bypassTransform.indexOf('true') === -1))){
// check to see the request is for the HTML page
if(acceptHeader && acceptHeader.indexOf('text/html') >= 0){
// store this particular request for modification
let oldResponse = await fetch(url.toString(), request)
// create a new response
let newResponse = new HTMLRewriter()
// IMPORTANT: add the preloads to the page
.on('head', new addPreloads())
// modify the HTML
.transform(oldResponse)
// return the modified page
return newResponse
}
}
// otherwise just proxy the request unmodified
return fetch(url.toString(), request)
}
class addPreloads {
element(element) {
// prepend it to the specified element
element.prepend(preloads, {html: true});
}
}
// set any cookies (e.g. accept a cookie banner)
setCookie https://www.example-site.com/ cookies_policy=true
// bypass the transforming the page HTML using a Worker?
addHeader x-bypass-transform:false
// this is the site we are modifying
addHeader x-host:www.example-site.com
// when the test encounters www.example-site.com, overide with the worker URL
overrideHost www.example-site.com my-worker.username.workers.dev
// go to this page and modify the html
navigate https://www.example-site.com/examplepage/here
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment