Block generated domains by Azure Static Web Apps

Please note: This post applies for Hybrid Next.js Azure Static Web Apps

Azure Static Web Apps automatically creates a domain like blue-river-096abc21e.2.azurestaticapps.net. Even when you have created a custom domain for your Azure Static Web App it’s not possible to disable or block this domain.

In a current Sitecore JSS Next.js project we are applying IP restrictions on our custom domains, but these automatically generated URLs can’t be blocked using Web Application Firewall or Azure Frontdoor. So how do we make sure these URLs are not publicly accessible?

Luckily with Next.js you can use middleware for a while now. So my idea was to apply a redirect to the custom domain when I detect a .azurestaticapps host header. But, when you inspect all the headers on a request, no host header was present when an azurestaticapps.net domain is used.

When you access the site using a custom domain, you DO get a header with the hostname in it. Using that you can create a redirect with a few lines of code in your _middleware.ts file:

const host = req.headers.get('x-forwarded-host');

const blockedHostRedirect = process.env.BLOCKED_HOST_REDIRECT || 'https://www.erwinsmit.com';

// When x-forwarded-host header is not set, a default URL is used (e.g. blue-river-096abc21e.2.azurestaticapps.net)
// so redirect to blockedHostRedirect
if (!host && process.env.BLOCK_SWA_DEFAULT_HOST) {
    return NextResponse.redirect(blockedHostRedirect);
}

I like to switch features on or off using environment variables, process.env.BLOCK_SWA_DEFAULT_HOST is used to switch the redirect on or off. process.env.BLOCKED_HOST_REDIRECT is used for specifying a domain it should redirect to.

There you go, using Nextjs middelware it is possible to block access to the automatically generated URLs.