Azure App Services and Pre-render IO when using Azure Front Door

Written by Brett Andrew 4th June 2021

I have recently been using Azure front door alot, and loving it. It handles SSL for you and many other things.

My websites use prerender.io - a caching service for bots and I wanted to implement rewriting through the web.config.

This was working fine without Azure Front Door, but when you add Azure Front Door, the web.config can only see the current HTTP_HOST and not the real url name.

Prerender® Docs

Website developers use Prerender® to serve static HTML to JavaScript crawling Googlebots.

Get more information on Prerender® for React/Vue and other middlewares

So to solve this problem I had to pretty much spend a day stitching the X-FORWARDED-HOST name (which is the originating domain name) to the pre-render.io service, and it took me so long I wanted to save you the pain.

To enable URL Rewriting on an Azure App Service, you also need to put in a applicationHost.xdt file in the Azure App Service Site folder (not the wwwroot folder but the one above it!).

This allows us to read the header record, notice the format has HTTP_ added and its all uppercase and the "-" are changed to "_" - yep this is the format it changes to and it took me forever to guess that and work it out, your welcome!

The contents of this file should be:

<?xml version="1.0"?>
<configuration xmlns:xdt="http://schemas.microsoft.com/XML-Document-Transform">
  <system.webServer>
    
    <proxy xdt:Transform="InsertIfMissing" enabled="true" preserveHostHeader="false"
    reverseRewriteHostInResponseHeaders="false" />
    <cache enabled="false" />
    <rewrite>      
      <allowedServerVariables  xdt:Transform="Replace">
        <add name="HTTP_X_PRERENDER_TOKEN" xdt:Transform="InsertIfMissing" />        
 	<add name="HTTP_X_FORWARDED_HOST" xdt:Transform="InsertIfMissing" />
      </allowedServerVariables>
    </rewrite>
  </system.webServer>
</configuration>

Here is the entire web.config (dont forget to put your own prerender.io code in)

<?xml version="1.0"?>
<configuration>
  <system.webServer>
  <rewrite>
      <rules>

  <!--generic rule for pre-render.io WITH Azure Front Door if there is an X_FORWARDED_HOST we use that as the correct url name -->
        <rule name="Prerender.io rewrite rule with AZure Front Door" stopProcessing="true">
          <match url="(\.js|\.json|\.css|\.xml|\.less|\.png|\.jpg|\.jpeg|\.gif|\.pdf|\.doc|\.txt|\.ico|\.rss|\.zip|\.mp3|\.rar|\.exe|\.wmv|\.doc|\.avi|\.ppt|\.mpg|\.mpeg|\.tif|\.wav|\.mov|\.psd|\.ai|\.xls|\.mp4|\.m4a|\.swf|\.dat|\.dmg|\.iso|\.flv|\.m4v|\.torrent|\.ttf|\.woff|\.woff2|\.svg)" negate="true" />
          <conditions logicalGrouping="MatchAll">
            <add input="{HTTP_USER_AGENT}" pattern="googlebot|bingbot|yandex|baiduspider|facebookexternalhit|twitterbot|rogerbot|linkedinbot|embedly|quora\ link\ preview|showyoubot|outbrain|pinterest\/0\.|pinterestbot|slackbot|vkShare|W3C_Validator|whatsapp|duckduck|duckduckbot|slurp" />
            <add input="{HTTP_X_FORWARDED_HOST}" pattern="(.*[^/])$" />            
          </conditions>
          <serverVariables>
            <set name="HTTP_X_PRERENDER_TOKEN" value="PuTYourPreRenderCodeInHere" />
          </serverVariables>
          <action type="Rewrite" url="https://service.prerender.io/https://{HTTP_X_FORWARDED_HOST}{REQUEST_URI}" logRewrittenUrl="true" />
        </rule>
        
        <rule name="Prerender.io rewrite rule without AZure Front Door" stopProcessing="true">
          <match url="(\.js|\.json|\.css|\.xml|\.less|\.png|\.jpg|\.jpeg|\.gif|\.pdf|\.doc|\.txt|\.ico|\.rss|\.zip|\.mp3|\.rar|\.exe|\.wmv|\.doc|\.avi|\.ppt|\.mpg|\.mpeg|\.tif|\.wav|\.mov|\.psd|\.ai|\.xls|\.mp4|\.m4a|\.swf|\.dat|\.dmg|\.iso|\.flv|\.m4v|\.torrent|\.ttf|\.woff|\.woff2|\.svg)" negate="true" />
          <conditions logicalGrouping="MatchAll">
            <add input="{HTTP_USER_AGENT}" pattern="googlebot|bingbot|yandex|baiduspider|facebookexternalhit|twitterbot|rogerbot|linkedinbot|embedly|quora\ link\ preview|showyoubot|outbrain|pinterest\/0\.|pinterestbot|slackbot|vkShare|W3C_Validator|whatsapp|duckduck|duckduckbot|slurp" />
            <add input="{HTTP_X_FORWARDED_HOST}" pattern="" />            
          </conditions>
          <serverVariables>
            <set name="HTTP_X_PRERENDER_TOKEN" value="PuTYourPreRenderCodeInHere" />
          </serverVariables>
          <action type="Rewrite" url="https://service.prerender.io/https://{HTTP_HOST}{REQUEST_URI}" logRewrittenUrl="true" />
        </rule>


  </rules>
        </rewrite>
  </system.webServer>
</configuration>

Hope this helps! Leave me a comment if this works or you want to add to this

Prerender® Docs

Contact us