Anchor for Header

Azure Apps | Pre-render.io | Azure Front Door

Anchor for Text


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.

Anchor for Icon Card 2.0

 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 

Anchor for Text

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:


Anchor for DisplayCode
<?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>
Anchor for Text

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

Anchor for DisplayCode
<?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>
Anchor for Text


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

Anchor for Contact Us

Contact us