Skip to content

Instantly share code, notes, and snippets.

@Nooshu

Nooshu/index.js

Created Jan 23, 2021
Embed
What would you like to do?
Cloudflare worker script for modifying the White House page's HTML and CSS (https://nooshu.github.io/blog/2021/01/23/the-importance-of-font-face-source-order-when-used-with-preload/)
// set the site we are modifying
const site = 'www.whitehouse.gov';
// do this on a fetch
addEventListener('fetch', event => {
const request = event.request
const url = new URL(request.url)
event.respondWith(handleRequest(request))
});
// default CSS for the White House website
let pageStyling = `<style>[WHITE_HOUSE_CSS_HERE]</style>`
// font face rules removed from above CSS for easy modification
let fontFaces = `<style>
@font-face{
font-family:MercurySSm-Medium-Pro_Web;
src:url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/MercurySSm-Medium-Pro_Web.svg#MercurySSm-Medium-Pro_Web) format("svg"),
url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/MercurySSm-Medium-Pro_Web.woff2) format("woff2"),
url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/MercurySSm-Medium-Pro_Web.woff) format("woff");
font-weight:400;
font-style:normal;
font-display:block
}
@font-face{
font-family:MercurySSm-MediumItalic-Pro_Web;
src:url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/MercurySSm-MediumItalic-Pro_Web.svg#MercurySSm-MediumItalic-Pro_Web) format("svg"),
url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/MercurySSm-MediumItalic-Pro_Web.woff2) format("woff2"),
url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/MercurySSm-MediumItalic-Pro_Web.woff) format("woff");
font-weight:400;
font-style:normal;
font-display:block
}
@font-face{
font-family:MercurySSm-Book-Pro_Web;
src:url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/MercurySSm-Book-Pro_Web.svg#MercurySSm-Book-Pro_Web) format("svg"),
url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/MercurySSm-Book-Pro_Web.woff2) format("woff2"),
url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/MercurySSm-Book-Pro_Web.woff) format("woff");
font-weight:400;
font-style:normal;
font-display:block
}
@font-face{
font-family:MercurySSm-BookItalic;
src:url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/MercurySSm-BookItalic.svg#MercurySSm-BookItalic) format("svg"),
url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/MercurySSm-BookItalic.woff2) format("woff2"),
url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/MercurySSm-BookItalic.woff) format("woff");
font-weight:400;
font-style:normal;
font-display:block
}
@font-face{
font-family:MercurySSm-Bold-Pro_Web;
src:url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/MercurySSm-Bold-Pro_Web.svg#MercurySSm-Bold-Pro_Web) format("svg"),
url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/MercurySSm-Bold-Pro_Web.woff2) format("woff2"),
url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/MercurySSm-Bold-Pro_Web.woff) format("woff");
font-weight:400;
font-style:normal;
font-display:block
}
@font-face{
font-family:MercurySSm-BoldItalic-Pro_Web;
src:url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/MercurySSm-BoldItalic-Pro_Web.svg#MercurySSm-BoldItalic-Pro_Web) format("svg"),
url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/MercurySSm-BoldItalic-Pro_Web.woff2) format("woff2"),
url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/MercurySSm-BoldItalic-Pro_Web.woff) format("woff");
font-weight:400;
font-style:normal;
font-display:block
}
@font-face{
font-family:MercuryTextG2-Semibold-Pro_Web;
src: url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/MercuryTextG2-Semibold-Pro_Web.woff2) format("woff2"),
url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/MercuryTextG2-Semibold-Pro_Web.woff) format("woff");
font-weight:400;
font-style:normal;
font-display:block
}
@font-face{
font-family:MercuryTextG2-Roman-Pro_Web;
src: url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/MercuryTextG2-Roman-Pro_Web.woff2) format("woff2"),
url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/MercuryTextG2-Roman-Pro_Web.woff) format("woff");
font-weight:400;
font-style:normal;
font-display:block
}
@font-face{
font-family:Decimal-Book;
src:url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/Decimal-Book.svg#Decimal-Book) format("svg"),
url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/Decimal-Book.woff2) format("woff2"),
url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/Decimal-Book.woff) format("woff");
font-weight:400;
font-style:normal;
font-display:block
}
@font-face{
font-family:Decimal-BookItalic;
src:url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/Decimal-BookItalic.svg#Decimal-BookItalic) format("svg"),
url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/Decimal-BookItalic.woff2) format("woff2"),
url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/Decimal-BookItalic.woff) format("woff");
font-weight:400;
font-style:normal;
font-display:block
}
@font-face{
font-family:Decimal-Medium_Web;
src: url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/Decimal-Medium_Web.woff2) format("woff2"),
url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/Decimal-Medium_Web.woff) format("woff");
font-weight:400;
font-style:normal;
font-display:block
}
@font-face{
font-family:Decimal-MediumItalic_Web;
url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/Decimal-MediumItalic_Web.woff2) format("woff2"),
src:url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/Decimal-MediumItalic_Web.woff) format("woff");
font-weight:400;
font-style:normal;
font-display:block
}
@font-face{
font-family:Decimal-Semibold;
src:url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/Decimal-Semibold.svg#Decimal-Semibold) format("svg"),
url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/Decimal-Semibold.woff2) format("woff2"),
url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/Decimal-Semibold.woff) format("woff");
font-weight:400;
font-style:normal;
font-display:block
}
@font-face{
font-family:Decimal-SemiboldItalic;
src:url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/Decimal-SemiboldItalic.svg#Decimal-SemiboldItalic) format("svg"),
url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/Decimal-SemiboldItalic.woff2) format("woff2"),
url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/Decimal-SemiboldItalic.woff) format("woff");
font-weight:400;
font-style:normal;
font-display:block
}
@font-face{
font-family:Decimal-Bold;
src:url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/Decimal-Bold.svg#Decimal-Bold) format("svg"),
url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/Decimal-Bold.woff2) format("woff2")'
url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/Decimal-Bold.woff) format("woff");
font-weight:400;
font-style:normal;
font-display:block
}
@font-face{
font-family:Decimal-BoldItalic;
src:url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/Decimal-BoldItalic.svg#Decimal-BoldItalic) format("svg"),
url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/Decimal-BoldItalic.woff2) format("woff2"),
url(https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/Decimal-BoldItalic.woff) format("woff");
font-weight:400;
font-style:normal;
font-display:block
}
</style>`;
// the modified preloads to be added back into the head
var preloads = `
<link rel="preload" href="https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/Decimal-Book.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/Decimal-Semibold.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/Decimal-Medium_Web.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/MercuryTextG2-Roman-Pro_Web.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/MercuryTextG2-Semibold-Pro_Web.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="https://wh-worker.nooshu.workers.dev/wp-content/themes/whitehouse/assets/fonts/MercurySSm-Medium-Pro_Web.woff2" as="font" type="font/woff2" crossorigin="anonymous">
`
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()
// remove the original preloads
.on('link[rel="preload"]', new removeElement())
// add the new, modified preloads
.on('head', new addPreloads())
// remove the original CSS
.on('#theme_css-css', new removeElement())
// add the modified `@font-face` rules
.on('head', new addFontStyling())
// add the rest of the page styling
.on('head', new addPageStyling())
// apply above modifications to the response
.transform(oldResponse)
// return the modified page
return newResponse
}
}
// otherwise just proxy the request unmodified
return fetch(url.toString(), request)
}
class removeElement {
element(element) {
element.remove();
}
}
class addPreloads {
element(element) {
element.prepend(preloads, {html: true});
}
}
class addFontStyling {
element(element) {
element.append(fontFaces, {html: true});
}
}
class addPageStyling {
element(element) {
element.append(pageStyling, {html: true});
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment