Background

I am using an Azure Function as backend for processing forms submissions from a Hugo static website, to process a simple contact form.

I wanted to add reCAPTCHA support, as the site was generating too many spam emails. I also wanted to show a different confirmation pages depending on whether the reCAPTCHA check passed or failed

There a good few posts about using an Azure Function as backend for a static web site form. But what I could not find was how to handle the return value from the Azure Function.

So as I have a solution, I thought a blog post would be a good idea to share it.

The solution

On my contact form Hugo layout page, I have a hidden iframe, this is used as the target for the HTML form i.e. where the Azure Function posts back too. The Azure function returns a simple string, either “OK” or an error message depending on the outcome of the processing. The hidden target iframe has an onload event handler that checks the return value and redirects the user to a different page depending on the outcome.

<script type="text/javascript">var submitted = false;</script>

<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="
    if(submitted) {
        const res = document.getElementById( 'hidden_iframe' ).contentWindow.document.body.innerText +']';
        if (res.includes('OK')) {
          window.location='/confirmation/enquiry';
        } else {
          window.location='/confirmation/error';
        }
    }
    ">
</iframe>

<form name="contact" action="/api/GenericFormsHandler" method="POST" target="hidden_iframe" onsubmit="submitted=true;">

    <input id="g-recaptcha-response" name="g-recaptcha-response" type="hidden" value="" />
    <script src="https://www.google.com/recaptcha/api.js?render={{.Site.Data.reCAPCHA.key}}&hl=en"  ></script>
    <script>
        if (typeof grecaptcha !== 'undefined') {
            grecaptcha.ready(function () {
                grecaptcha.execute('{{.Site.Data.reCAPCHA.key}}', { 'action': 'submit' }).then(function (token) {
                    document.getElementById('g-recaptcha-response').value = token;
                });
            });
        }
    </script>
    <!-- all my input fields -->
    <input type="submit" id="submitButton" value="Submit" />
</form>

My Azure Static WebSite is configured to contain a managed Azure Function with an HTTP trigger ‘/api/GenericFormsHandler’ to handle the forms processing.

import { AzureFunction, Context, HttpRequest } from "@azure/functions"
import fetch from "node-fetch"; // needs to be installed with npm i node-fetch@2.6.1 

const httpTrigger: AzureFunction = async function (context: Context, req: HttpRequest): Promise<void> {
    context.log('An HTTP POST trigger function to processed enquiry forms');
    var object = {};
    var returnValue = "OK";
    object["events"] = [];
    var status = 200;

    // a very basic HTML form to object parser
    req.body.split('&').forEach(field => {
        var pair = field.split("=")
        object[pair[0]] = decodeURIComponent(pair[1]).replace(/\+/g, " ")
    }

    context.log("Validating recaptcha token");
    
    // the secret key is stored in the Azure Function App settings
    var postData = `secret=${process.env.RECAPTCHA_SECRETKEY}&response=${object["g-recaptcha-response"]}`

    context.log(`reCAPTCHA request payload: ${JSON.stringify(postData)}`);

    // recaptcha validation only accepts POST requests using 'application/x-www-form-urlencoded' content type
    const response = await fetch("https://www.google.com/recaptcha/api/siteverify", {
        method: 'POST',
        body: postData,
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'Content-Length': `${JSON.stringify(postData).length}`
        }
    });

    if (!response.ok) {
        context.log("Error calling reCAPTCHA");
        returnValue = "Error"
    }
    else if (response.status >= 400) {
        context.log('HTTP Error from to reCAPTCHA: ' + response.status + ' - ' + response.statusText);
        returnValue = "HTTPError"
    }
    else {
        context.log("Successful call to reCAPTCHA");
        const data = await response.json();
        context.log(`reCAPTCHA response: ${JSON.stringify(data)}`);

        // if the score is less than the minimum score (App settings) then we don't process the form
        if (data.success && data.score >= parseFloat(process.env.RECAPTCHA_MINSCORE)) {
            context.log("Sending email as reCAPTCHA detected a human");
        
            const sgMail = require('@sendgrid/mail')
            sgMail.setApiKey(process.env.SENDGRID_API_KEY)
            const msg = {
                // App Settings use for the from and to addresses
                to: process.env.ENQUIRY_TOADDRESS, 
                from: process.env.ENQUIRY_FROMADDRESS, 
                html: // add in the content generate from th form content
            }

            await sgMail
                .send(msg)
                .then((response) => {
                    context.log(`Send Email returned  ${response[0].statusCode}`)
                    context.log(response[0].headers)
                    returnValue = "OK"
                })
                .catch((error) => {
                    context.log(`ERROR sending email ${error}`)
                    returnValue = error;
                })
		
		} else {
           context.log("Not sending email as reCAPTCHA detected a bot");
            returnValue = "reCAPTCHA Error"
        }
    }

    context.log(`Setting return value as ${returnValue}`);
    context.res = {
        body: returnValue
    };
};

export default httpTrigger;

Important

The key thing to note with this solution is that you get the Azure Function to write it’s return value into the hidden iFrame on the calling page.

The only reason that this iFrame content (the return value) can read (using JavaScript on the form page) is because the Hugo static pages and managed Azure Function are in the same domain. So there are no cross site scripting issues blocking the reading of the iFrame contents e.g. your get no console error messages in the form:

SecurityError: Blocked a frame with origin “http://www.example.com” from accessing a cross-origin frame.

Hence, the logic on the onload function can pick the correct confirmation page based on the value returned by the Azure Function.

Conclusion

So, not the most elegant solution, but it works.

Hope this post save some other people some time