Home > Software engineering >  How to remove a custom header field while fetching webfonts?
How to remove a custom header field while fetching webfonts?

Time:06-02

I stumbled upon a CORS error while trying to fetch a font from Google.

I currently have an express.js server serving html files for puppeteer bots. I need to authenticate users sending requests to this server by using a custom header field. However, when the html file fetches a font from Google, it uses that custom header and the request fails with the following error:

Access to font at 'http://fonts.gstatic.com/s/allura/v18/9oRPNYsQpS4zjuA_iwgW.woff2' from origin 'http://localhost:5000' has been blocked by CORS policy: Request header field test-token is not allowed by Access-Control-Allow-Headers in preflight response.

I replicated the issue in a much smaller script below:

const puppeteer = require('puppeteer');
const express = require('express');
const app = express();
//middleware
app.use((req,res,next)=>{
    //verify token
    if(req.header("test-token") === "foobarbaz") return next();
})
app.use(express.static("public"));
app.listen(5000);


(async()=>{
    const browser = await puppeteer.launch({
        ignoreHTTPSErrors:true,
        headless:true,
    });
    const page = await browser.newPage();
    //for debug purposes
    page.on("console",console.log);
    
    page.setExtraHTTPHeaders({
        "test-token":"foobarbaz"
    })
    await page.goto("http://localhost:5000/index.html");
    const content = await page.content();
    console.log(content);
})()

My sample HTML file with web fonts loaded:

<html>
    <head>
        <link rel="preconnect" href="//fonts.googleapis.com">
        <link rel="preconnect" href="//fonts.gstatic.com" crossorigin>
        <link href="//fonts.googleapis.com/css2?family=Allura&family=Bebas Neue&family=Bree Serif&family=Twinkle Star&display=swap" rel="stylesheet">
        <style>
            body{
                font-family: 'Allura', cursive;
            }
        </style>
    </head>
    <body>
        Hello world
    </body>
</html>

I tried somehow removing the custom header on express.js request but with no luck, like this:

app.use((req,res,next)=>{
    //verify token
    if(req.header("test-token") === "foobarbaz"){
        res.removeHeader("text-token");
        next();
    }
})

How do I authenticate users on this custom header but then remove it from further requests that html might do (in this case, to load external webfonts)?

CodePudding user response:

Instead of page.setExtraHTTPHeaders, consider using page.setRequestInterception in order to set the extra header only for requests to your server, not to Google servers.

  • Related