[SD-172] Added support for CAPTCHAs in webforms

packages/nuxt-ripple/components/TideContentRating.vue

@@ -17,6 +17,16 @@ const contentRatingFormId = 'tide_webform_content_rating'
 const isMounted = ref(false)
 const pageUrl = ref('')
 
+const { data: webformData, status: webformFetchStatus } = await useFetch(
+  '/api/tide/webform',
+  {
+    baseURL: '',
+    params: {
+      id: contentRatingFormId
+    }
+  }
+)
+
 onMounted(() => {
   isMounted.value = true
   pageUrl.value = window.location.href
@@ -29,12 +39,13 @@ onMounted(() => {
       <div class="rpl-grid">
         <div class="rpl-col-12 rpl-col-7-m">
           <TideLandingPageWebForm
-            v-if="isMounted"
+            v-if="isMounted && webformFetchStatus === 'success'"
             :formId="contentRatingFormId"
             hideFormOnSubmit
             title="Was this page helpful?"
             successMessageHTML="Thank you! Your response has been submitted."
             errorMessageHTML="We are experiencing a server error. Please try again, otherwise contact us."
+            :captcha-config="webformData?.captchaConfig"
           >
             <template #default="{ value }">
               <div class="tide-content-rating__rating">
@@ -83,7 +94,7 @@ onMounted(() => {
                   <RplContent
                     v-if="contentRatingText"
                     :html="contentRatingText"
-                    class="tide-content-rating__text"
+                    class="tide-content-rating__text rpl-u-margin-b-6"
                   />
                   <FormKit
                     v-if="value.was_this_page_helpful"

packages/nuxt-ripple/server/api/tide/webform_submission/[...].ts → packages/nuxt-ripple/server/api/tide/webform_submission/[formId].ts

@@ -5,6 +5,25 @@ import { createProxyMiddleware } from 'http-proxy-middleware'
 
 export const createWebformProxyHandler = async (event: H3Event) => {
   const { public: config } = useRuntimeConfig()
+  const formId = event.context.params?.formId
+
+  if (!formId) {
+    throw new BadRequestError('Form id is required')
+  }
+
+  try {
+    await verifyCaptcha(event)
+  } catch (error) {
+    logger.error(`CAPTCHA validation error`, error)
+    sendError(
+      event,
+      createError({
+        statusCode: 400,
+        statusMessage: 'Unable to verify CAPTCHA'
+      })
+    )
+    return
+  }
 
   const proxyMiddleware = createProxyMiddleware({
     target: config.tide.baseUrl,

packages/nuxt-ripple/server/utils/verifyCaptcha.ts

@@ -0,0 +1,172 @@
+import { useRuntimeConfig } from '#imports'
+import { logger } from '@dpc-sdp/ripple-tide-api'
+import {
+  ApplicationError,
+  UnauthorisedError
+} from '@dpc-sdp/ripple-tide-api/errors'
+
+import type { H3Event } from 'h3'
+import {
+  CaptchaType,
+  MappedCaptchaConfig
+} from '@dpc-sdp/ripple-tide-webform/types'
+
+const genericCaptchaVerify = async (
+  verifyUrl: string,
+  secretKey: string,
+  responseToken: string,
+  responseCallback: (response: any) => boolean
+) => {
+  try {
+    const formData = new FormData()
+
+    formData.append('secret', secretKey)
+    formData.append('response', responseToken)
+
+    const verifyResponse = await $fetch(verifyUrl, {
+      method: 'POST',
+      body: formData
+    })
+
+    const isValid = responseCallback(verifyResponse)
+
+    if (!isValid) {
+      logger.error('CAPTCHA verification failed, response was:', verifyResponse)
+    }
+
+    return isValid
+  } catch (error) {
+    return false
+  }
+}
+
+const verifyGoogleRecaptchaV3 = async (
+  secretKey: string,
+  captchaConfig: MappedCaptchaConfig,
+  captchaResponse: string
+) => {
+  const defaultScoreThreshold = 0.5
+
+  const scoreThreshold =
+    typeof captchaConfig?.scoreThreshold === 'number'
+      ? captchaConfig?.scoreThreshold
+      : defaultScoreThreshold
+
+  return await genericCaptchaVerify(
+    'https://www.google.com/recaptcha/api/siteverify',
+    secretKey,
+    captchaResponse,
+    (verifyResponse) => {
+      return (
+        !!verifyResponse?.success && verifyResponse?.score >= scoreThreshold
+      )
+    }
+  )
+}
+
+const verifyGoogleRecaptchaV2 = async (
+  secretKey: string,
+  captchaResponse: string
+) => {
+  return await genericCaptchaVerify(
+    'https://www.google.com/recaptcha/api/siteverify',
+    secretKey,
+    captchaResponse,
+    (verifyResponse) => {
+      return !!verifyResponse?.success
+    }
+  )
+}
+
+const verifyCloudfareTurnstile = async (
+  secretKey: string,
+  captchaResponse: string
+) => {
+  return await genericCaptchaVerify(
+    'https://challenges.cloudflare.com/turnstile/v0/siteverify',
+    secretKey,
+    captchaResponse,
+    (verifyResponse) => {
+      return !!verifyResponse?.success
+    }
+  )
+}
+
+const verify = async (
+  secretKey: string,
+  captchaConfig: MappedCaptchaConfig,
+  captchaResponse?: string
+) => {
+  if (!captchaResponse) {
+    return false
+  }
+
+  switch (captchaConfig?.type) {
+    case CaptchaType.RECAPTCHA_V3:
+      return await verifyGoogleRecaptchaV3(
+        secretKey,
+        captchaConfig,
+        captchaResponse
+      )
+    case CaptchaType.RECAPTCHA_V2:
+      return await verifyGoogleRecaptchaV2(secretKey, captchaResponse)
+    case CaptchaType.TURNSTILE:
+      return await verifyCloudfareTurnstile(secretKey, captchaResponse)
+    default:
+      return false
+  }
+}
+
+const verifyCaptcha = async (event: H3Event) => {
+  const config = useRuntimeConfig()
+  const captchaResponse = getHeader(event, 'x-captcha-response')
+  const formId = event.context.params?.formId
+  let webform
+
+  try {
+    webform = await $fetch('/api/tide/webform', {
+      baseURL: config.apiUrl || '',
+      params: {
+        id: formId
+      }
+    })
+  } catch (error) {
+    throw new ApplicationError(
+      `Couldn't get webform data, unable to continue because we don't know if a captcha is required`,
+      { cause: error }
+    )
+  }
+
+  if (!webform) {
+    throw new ApplicationError(
+      `Couldn't get webform data, unable to continue because we don't know if a captcha is required`
+    )
+  }
+
+  const formHasCaptcha = webform?.captchaConfig?.enabled
+
+  if (!formHasCaptcha) {
+    return true
+  }
+
+  const secretKey =
+    config.tide.captchaSecret[webform?.captchaConfig?.siteIdentifier]
+
+  if (!secretKey) {
+    throw new ApplicationError(
+      `Secret key missing for site identifier: ${webform?.captchaConfig?.siteIdentifier} (site key: ${webform?.captchaConfig?.siteKey})`
+    )
+  }
+
+  const isValid = await verify(
+    secretKey,
+    webform?.captchaConfig,
+    captchaResponse
+  )
+
+  if (!isValid) {
+    throw new UnauthorisedError('Failed to verify CAPTCHA response token')
+  }
+}
+
+export default verifyCaptcha

packages/ripple-tide-landing-page/components/global/TideLandingPage/WebForm.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { FormKitSchemaNode } from '@formkit/core'
 import { computed, nextTick, ref, watch } from 'vue'
+import type { MappedCaptchaConfig } from '@dpc-sdp/ripple-tide-webform/types'
 
 interface Props {
   title?: string
@@ -11,19 +12,26 @@ interface Props {
   errorMessageTitle?: string
   errorMessageHTML: string
   schema?: Array<FormKitSchemaNode>
+  captchaConfig?: MappedCaptchaConfig | null
 }
 
 const props = withDefaults(defineProps<Props>(), {
   title: undefined,
   hideFormOnSubmit: false,
   successMessageTitle: 'Form submitted',
   errorMessageTitle: 'Form not submitted',
-  schema: undefined
+  schema: undefined,
+  captchaConfig: null
 })
 
 const honeypotId = `${props.formId}-important-email`
 
-const { submissionState, submitHandler } = useWebformSubmit(props.formId)
+const { submissionState, submitHandler } = useWebformSubmit(
+  props.formId,
+  props.captchaConfig
+)
+
+const { captchaWidgetId } = useCaptcha(props.formId, props.captchaConfig)
 
 const serverSuccessRef = ref(null)
 
@@ -36,6 +44,9 @@ watch(
       if (serverSuccessRef.value) {
         serverSuccessRef.value.focus()
       }
+
+      // Need to reset captcha because some captchas won't allow using the same captcha challenge token twice
+      useResetCaptcha(captchaWidgetId.value, props.captchaConfig)
     }
   }
 )
@@ -103,7 +114,7 @@ customInputs.library = (node: any) => {
         :customInputs="customInputs"
         :schema="schema"
         :submissionState="submissionState as any"
-        @submit="submitHandler(props, $event.data)"
+        @submit="submitHandler(props, $event.data, captchaWidgetId)"
       >
         <template #belowForm>
           <div class="tide-webform-important-email">

packages/ripple-tide-landing-page/mapping/components/webforms/webforms-mapping.ts

@@ -1,7 +1,10 @@
 import type { TideDynamicPageComponent } from '@dpc-sdp/ripple-tide-api/types'
 import { TidePageApi } from '@dpc-sdp/ripple-tide-api'
 import type { TideWebform, ApiField } from '@dpc-sdp/ripple-tide-webform/types'
-import { getFormSchemaFromMapping } from '@dpc-sdp/ripple-tide-webform/mapping'
+import {
+  getFormSchemaFromMapping,
+  getCaptchaSettings
+} from '@dpc-sdp/ripple-tide-webform/mapping'
 
 const componentMapping = async (field: ApiField, tidePageApi: TidePageApi) => {
   return {
@@ -22,7 +25,8 @@ const componentMapping = async (field: ApiField, tidePageApi: TidePageApi) => {
     schema: await getFormSchemaFromMapping(
       field.field_paragraph_webform,
       tidePageApi
-    )
+    ),
+    captchaConfig: getCaptchaSettings(field.field_paragraph_webform)
   }
 }
 export const webformMapping = async (

packages/ripple-tide-webform/composables/use-webform-submit.ts

@@ -1,8 +1,16 @@
 import { $fetch } from 'ofetch'
 import { ref, useRuntimeConfig } from '#imports'
-
-export function useWebformSubmit(formId: string) {
-  const postForm = async (formId: string, formData = {}) => {
+import { MappedCaptchaConfig } from '../types'
+
+export function useWebformSubmit(
+  formId: string,
+  captchaConfig?: MappedCaptchaConfig | null
+) {
+  const postForm = async (
+    formId: string,
+    formData = {},
+    maybeCaptchaResponse: string | null
+  ) => {
     const { public: config } = useRuntimeConfig()
 
     const formResource = 'webform_submission'
@@ -29,7 +37,8 @@ export function useWebformSubmit(formId: string) {
         site: config.tide.site
       },
       headers: {
-        'Content-Type': 'application/vnd.api+json;charset=UTF-8'
+        'Content-Type': 'application/vnd.api+json;charset=UTF-8',
+        'x-captcha-response': maybeCaptchaResponse || undefined
       }
     })
 
@@ -67,7 +76,11 @@ export function useWebformSubmit(formId: string) {
     return honeypotElement && !!honeypotElement.value
   }
 
-  const submitHandler = async (props: FormConfig, data: any) => {
+  const submitHandler = async (
+    props: FormConfig,
+    data: any,
+    captchaWidgetId?: string
+  ) => {
     submissionState.value = {
       status: 'submitting',
       title: '',
@@ -87,8 +100,30 @@ export function useWebformSubmit(formId: string) {
       return
     }
 
+    let maybeCaptchaResponse = null
+
+    try {
+      maybeCaptchaResponse = await getCaptchaResponse(
+        formId,
+        captchaConfig,
+        captchaWidgetId,
+        window
+      )
+    } catch (e) {
+      console.error(e)
+
+      submissionState.value = {
+        status: 'error',
+        title: props.errorMessageTitle,
+        message: 'Invalid CAPTCHA',
+        receipt: ''
+      }
+
+      return
+    }
+
     try {
-      const resData = await postForm(props.formId, data)
+      const resData = await postForm(props.formId, data, maybeCaptchaResponse)
 
       const [code, note] = resData.attributes?.notes?.split('|') || []