{{ __t('aposForm:widgetNoScript') }}
+ Please confirm you are not a robot. +
- {{ __t('aposForm:widgetCaptchaError') }} -
{ } }; +const submitRouteHandler = function (self) { + return async function (req, res) { + try { + const formData = req?.body?.data ?? null; + if (!formData) { + return res.status(400).json({ error: 'Invalid form data' }); + } + + const globalDoc = await self.apos.global.find(req).toObject(); + const recaptchaToken = formData['g-recaptcha-response']; + if (globalDoc.useRecaptcha && globalDoc.recaptchaSecret) { + const result = await verifyRecaptcha({ + secret: globalDoc.recaptchaSecret, + token: recaptchaToken, + remoteip: + req.headers['x-forwarded-for']?.split(',').shift().trim() || req.ip, + }); + if (!result.success) { + return res.status(400).json({ error: result.error }); + } + } + + const result = await self.formSubmissionHandler.handle(formData); + if (!result) { + return res.status(500).json({ error: 'Form submission failed' }); + } + + return res.json({ success: true }); + } catch (error) { + self.apos.util.error('Form submission error:', error); + return res.status(500).json({ error: 'An error occurred' }); + } + }; +}; + module.exports = { improve: '@apostrophecms/form', fields: { @@ -86,24 +122,7 @@ module.exports = { routes(self) { return { post: { - submit: async (req, res) => { - try { - const formData = req?.body?.data ?? null; - if (!formData) { - return res.status(400).json({ error: 'Invalid form data' }); - } - - const result = await self.formSubmissionHandler.handle(formData); - if (!result) { - return res.status(500).json({ error: 'Form submission failed' }); - } - - return res.json({ success: true }); - } catch (error) { - self.apos.util.error('Form submission error:', error); - return res.status(500).json({ error: 'An error occurred' }); - } - }, + submit: submitRouteHandler(self), }, }; }, diff --git a/website/modules/@apostrophecms/form/lib/formatForSpreadsheet.js b/website/modules/@apostrophecms/form/lib/formatForSpreadsheet.js index 69d8a124..f26263d3 100644 --- a/website/modules/@apostrophecms/form/lib/formatForSpreadsheet.js +++ b/website/modules/@apostrophecms/form/lib/formatForSpreadsheet.js @@ -5,7 +5,9 @@ const generateHeaders = (formData) => { const { _id, ...formFields } = formData; for (const key of Object.keys(formFields)) { - headers.push(formatHeaderName(key)); + if (key !== 'g-recaptcha-response') { + headers.push(formatHeaderName(key)); + } } return headers; @@ -18,11 +20,13 @@ const generateRowData = (formData) => { const { _id, ...formFields } = formData; - for (const value of Object.values(formFields)) { - if (Array.isArray(value)) { - rowData.push(value.join(', ')); - } else { - rowData.push(value); + for (const [key, value] of Object.entries(formFields)) { + if (key !== 'g-recaptcha-response') { + if (Array.isArray(value)) { + rowData.push(value.join(', ')); + } else { + rowData.push(value); + } } } diff --git a/website/modules/@apostrophecms/form/lib/verifyRecaptcha.js b/website/modules/@apostrophecms/form/lib/verifyRecaptcha.js new file mode 100644 index 00000000..0508982a --- /dev/null +++ b/website/modules/@apostrophecms/form/lib/verifyRecaptcha.js @@ -0,0 +1,70 @@ +const fetch = require('node-fetch'); +const AbortController = require('abort-controller'); + +const validateRecaptchaParams = function ({ secret, token, remoteip }) { + if (!secret || secret.trim() === '') { + return { success: false, error: 'Missing reCAPTCHA secret.' }; + } + if (!token || token.trim() === '') { + return { success: false, error: 'Missing reCAPTCHA token.' }; + } + if (!remoteip || remoteip.trim() === '') { + return { success: false, error: 'Missing remote IP address.' }; + } + return null; +}; + +const sendRecaptchaRequest = async function ({ secret, token, remoteip }) { + const params = new URLSearchParams(); + params.append('secret', secret); + params.append('response', token); + params.append('remoteip', remoteip); + + const controller = new AbortController(); + const timeoutId = setTimeout(() => controller.abort(), 5000); + + try { + const response = await fetch( + 'https://www.google.com/recaptcha/api/siteverify', + { + method: 'POST', + headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, + body: params, + signal: controller.signal, + }, + ); + clearTimeout(timeoutId); + + if (!response.ok) { + return { + success: false, + error: `HTTP error! status: ${response.status}`, + }; + } + const data = await response.json(); + if (!data.success) { + return { + success: false, + error: 'reCAPTCHA verification failed.', + details: data, + }; + } + return { success: true, details: data }; + } catch (error) { + clearTimeout(timeoutId); + if (error.name === 'AbortError') { + return { success: false, error: 'reCAPTCHA verification timed out.' }; + } + return { success: false, error: `Network error: ${error.message}` }; + } +}; + +const verifyRecaptcha = function ({ secret, token, remoteip }) { + const validationError = validateRecaptchaParams({ secret, token, remoteip }); + if (validationError) { + return validationError; + } + return sendRecaptchaRequest({ secret, token, remoteip }); +}; + +module.exports = { verifyRecaptcha }; diff --git a/website/modules/@apostrophecms/form/lib/verifyRecaptcha.test.js b/website/modules/@apostrophecms/form/lib/verifyRecaptcha.test.js new file mode 100644 index 00000000..1e170928 --- /dev/null +++ b/website/modules/@apostrophecms/form/lib/verifyRecaptcha.test.js @@ -0,0 +1,82 @@ +const { verifyRecaptcha } = require('./verifyRecaptcha'); + +jest.mock('node-fetch'); +const fetch = require('node-fetch'); + +describe('verifyRecaptcha', () => { + beforeEach(() => { + fetch.mockReset(); + }); + + it('should fail if token is missing', async () => { + const result = await verifyRecaptcha({ + secret: 'test', + token: '', + remoteip: '127.0.0.1', + }); + expect(result.success).toBe(false); + expect(result.error).toBe('Missing reCAPTCHA token.'); + }); + + it('should fail if Google returns error', async () => { + fetch.mockResolvedValueOnce({ + ok: true, + json: () => ({ success: false }), + }); + const result = await verifyRecaptcha({ + secret: 'test', + token: 'sometoken', + remoteip: '127.0.0.1', + }); + expect(result.success).toBe(false); + expect(result.error).toBe('reCAPTCHA verification failed.'); + }); + + it('should succeed if Google returns success', async () => { + fetch.mockResolvedValueOnce({ + ok: true, + json: () => ({ success: true }), + }); + const result = await verifyRecaptcha({ + secret: 'test', + token: 'sometoken', + remoteip: '127.0.0.1', + }); + expect(result.success).toBe(true); + }); + + it('should fail if Google returns HTTP error', async () => { + fetch.mockResolvedValueOnce({ + ok: false, + status: 500, + json: () => ({}), + }); + const result = await verifyRecaptcha({ + secret: 'test', + token: 'sometoken', + remoteip: '127.0.0.1', + }); + expect(result.success).toBe(false); + expect(result.error).toMatch(/HTTP error/u); + }); + + it('should fail if secret is missing', async () => { + const result = await verifyRecaptcha({ + secret: '', + token: 'sometoken', + remoteip: '127.0.0.1', + }); + expect(result.success).toBe(false); + expect(result.error).toBe('Missing reCAPTCHA secret.'); + }); + + it('should fail if remoteip is missing', async () => { + const result = await verifyRecaptcha({ + secret: 'test', + token: 'sometoken', + remoteip: '', + }); + expect(result.success).toBe(false); + expect(result.error).toBe('Missing remote IP address.'); + }); +}); diff --git a/website/modules/asset/ui/src/js/formValidation.js b/website/modules/asset/ui/src/js/formValidation.js index e594252c..cc6b4c06 100644 --- a/website/modules/asset/ui/src/js/formValidation.js +++ b/website/modules/asset/ui/src/js/formValidation.js @@ -1,5 +1,6 @@ const { validateField } = require('./formValidator'); const { showValidationError, clearValidationError } = require('./domHelpers'); +const { addRecaptchaValidationHandlers } = require('./recaptchaValidation'); // Test-specific DOM helpers const testShowValidationError = (field, message) => { @@ -210,6 +211,28 @@ const sendFormData = (form, formData) => { const handleFormSubmit = (event, form, validateFieldFn) => { event.preventDefault(); + + let hasError = false; + + // ReCAPTCHA validation (client-side) + const recaptchaWidget = form.querySelector('.g-recaptcha'); + const recaptchaError = document.querySelector( + '[data-apos-form-recaptcha-error]', + ); + if ( + typeof window.grecaptcha !== 'undefined' && + recaptchaWidget && + !window.grecaptcha.getResponse() + ) { + if (recaptchaError) { + recaptchaError.classList.remove('apos-form-hidden'); + recaptchaError.scrollIntoView({ behavior: 'smooth', block: 'center' }); + } + hasError = true; + } else if (recaptchaError) { + recaptchaError.classList.add('apos-form-hidden'); + } + // Disable submit button(s) to prevent multiple submissions const submitButtons = form.querySelectorAll( 'button[type="submit"], input[type="submit"]', @@ -217,12 +240,22 @@ const handleFormSubmit = (event, form, validateFieldFn) => { submitButtons.forEach((btn) => (btn.disabled = true)); validateForm(form, validateFieldFn) - .then((isValid) => onValidateForm(isValid, form, validateFieldFn)) + .then((isValid) => { + if (!isValid) { + hasError = true; + } + if (!hasError) { + return onValidateForm(true, form, validateFieldFn); + } + return null; + }) .finally(() => { // Re-enable submit button(s) after processing submitButtons.forEach((btn) => (btn.disabled = false)); }) .catch(() => false); + + return true; }; const initFormWithValidation = (form, validateFieldFn) => { @@ -240,6 +273,9 @@ const initFormWithValidation = (form, validateFieldFn) => { }, true, ); + + // Add reCAPTCHA validation handlers + addRecaptchaValidationHandlers(form); }; module.exports = { initFormValidation }; diff --git a/website/modules/asset/ui/src/js/recaptchaValidation.js b/website/modules/asset/ui/src/js/recaptchaValidation.js new file mode 100644 index 00000000..4e1ade7e --- /dev/null +++ b/website/modules/asset/ui/src/js/recaptchaValidation.js @@ -0,0 +1,79 @@ +const { clearValidationError } = require('./domHelpers'); + +const handleRecaptchaValueChange = ( + recaptchaResponse, + form, + clearValidationErrorFn = clearValidationError, +) => { + if (recaptchaResponse.value) { + clearValidationErrorFn(recaptchaResponse); + const recaptchaError = form.querySelector( + '[data-apos-form-recaptcha-error]', + ); + if (recaptchaError) { + recaptchaError.classList.add('apos-form-hidden'); + } + } +}; + +const observeRecaptcha = (form, cleanupRef, pollIntervalRef) => { + const recaptchaResponse = form.querySelector('#g-recaptcha-response'); + if (recaptchaResponse) { + const handleInput = () => { + handleRecaptchaValueChange(recaptchaResponse, form); + }; + recaptchaResponse.addEventListener('input', handleInput); + let lastValue = recaptchaResponse.value; + pollIntervalRef.current = setInterval(() => { + if (!document.body.contains(recaptchaResponse)) { + clearInterval(pollIntervalRef.current); + recaptchaResponse.removeEventListener('input', handleInput); + return; + } + if (recaptchaResponse.value && recaptchaResponse.value !== lastValue) { + lastValue = recaptchaResponse.value; + handleRecaptchaValueChange(recaptchaResponse, form); + } + }, 500); + cleanupRef.current = () => { + if (pollIntervalRef.current) clearInterval(pollIntervalRef.current); + recaptchaResponse.removeEventListener('input', handleInput); + }; + } +}; + +const pollForRecaptcha = ( + form, + observeFn, + pollForRecaptchaTimeoutRef, + cleanupRef, +) => { + let pollCount = 0; + const poll = function () { + if (form.querySelector('#g-recaptcha-response')) { + observeFn(); + } else if (pollCount < 20) { + pollCount += 1; + pollForRecaptchaTimeoutRef.current = setTimeout(poll, 100); + } + }; + poll(); +}; + +const addRecaptchaValidationHandlers = (form) => { + const pollIntervalRef = { current: null }; + const pollForRecaptchaTimeoutRef = { current: null }; + const cleanupRef = { current: null }; + + const observeFn = () => observeRecaptcha(form, cleanupRef, pollIntervalRef); + pollForRecaptcha(form, observeFn, pollForRecaptchaTimeoutRef, cleanupRef); + + return () => { + if (pollIntervalRef.current) clearInterval(pollIntervalRef.current); + if (pollForRecaptchaTimeoutRef.current) + clearTimeout(pollForRecaptchaTimeoutRef.current); + if (cleanupRef.current) cleanupRef.current(); + }; +}; + +module.exports = { addRecaptchaValidationHandlers, handleRecaptchaValueChange }; diff --git a/website/modules/asset/ui/src/js/recaptchaValidation.test.js b/website/modules/asset/ui/src/js/recaptchaValidation.test.js new file mode 100644 index 00000000..ab85ca34 --- /dev/null +++ b/website/modules/asset/ui/src/js/recaptchaValidation.test.js @@ -0,0 +1,42 @@ +const { handleRecaptchaValueChange } = require('./recaptchaValidation'); + +describe('handleRecaptchaValueChange', () => { + let form = null; + let recaptchaTextarea = null; + let errorMsg = null; + let clearValidationErrorFn = null; + + beforeEach(() => { + document.body.innerHTML = ` +
Error