Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Simple bot protection that should elimiminate most of the spam on our forms #3350

Merged
merged 5 commits into from
May 14, 2024
+1,122 −726
Merged

feat: Simple bot protection that should elimiminate most of the spam on our forms #3350

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b7a5d49
Add simple bot protection
istarkov May 13, 2024
85e0e59
Add fixtures
istarkov May 13, 2024
1a5e44e
Fix types
istarkov May 13, 2024
ba8100c
Fix
istarkov May 13, 2024
147dff7
Fix
istarkov May 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
126 changes: 75 additions & 51 deletions fixtures/webstudio-cloudflare-template/app/routes/_index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,11 @@ import {
} from "@remix-run/server-runtime";
import { useLoaderData } from "@remix-run/react";
import { ReactSdkContext } from "@webstudio-is/react-sdk";
import { n8nHandler, getFormId } from "@webstudio-is/form-handlers";
import {
n8nHandler,
formIdFieldName,
formBotFieldName,
} from "@webstudio-is/form-handlers";
import {
Page,
siteName,
Expand Down Expand Up @@ -240,66 +244,86 @@ const getMethod = (value: string | undefined) => {
}
};

export const action = async ({ request, context }: ActionFunctionArgs) => {
const formData = await request.formData();
export const action = async ({
request,
context,
}: ActionFunctionArgs): Promise<
{ success: true } | { success: false; errors: string[] }
> => {
try {
const formData = await request.formData();

const formId = getFormId(formData);
if (formId === undefined) {
// We're throwing rather than returning { success: false }
// because this isn't supposed to happen normally: bug or malicious user
throw json("Form not found", { status: 404 });
}
const formId = formData.get(formIdFieldName);

const formProperties = formsProperties.get(formId);
if (formId == null || typeof formId !== "string") {
istarkov marked this conversation as resolved.
Show resolved Hide resolved
throw new Error("No form id in FormData");
}

// form properties are not defined when defaults are used
const { action, method } = formProperties ?? {};
const formBotValue = formData.get(formBotFieldName);

if (contactEmail === undefined) {
return { success: false };
}
if (formBotValue == null || typeof formBotValue !== "string") {
throw new Error("Form bot field not found");
}

// wrapped in try/catch just in cases new URL() throws
// (should not happen)
let pageUrl: URL;
try {
pageUrl = new URL(request.url);
const submitTime = parseInt(formBotValue, 16);
istarkov marked this conversation as resolved.
Show resolved Hide resolved
// Assumes that the difference between the server time and the form submission time,
// including any client-server time drift, is within a 5-minute range.
// Note: submitTime might be NaN because formBotValue can be any string used for logging purposes.
// Example: `formBotValue: jsdom`, or `formBotValue: headless-env`
if (
Number.isNaN(submitTime) ||
Math.abs(Date.now() - submitTime) > 1000 * 60 * 5
) {
throw new Error(`Form bot value invalid ${formBotValue}`);
}

const formProperties = formsProperties.get(formId);

// form properties are not defined when defaults are used
const { action, method } = formProperties ?? {};

if (contactEmail === undefined) {
throw new Error("Contact email not found");
}

const pageUrl = new URL(request.url);
pageUrl.host = getRequestHost(request);
} catch {
return { success: false };
}

if (action !== undefined) {
try {
// Test that action is full URL
new URL(action);
} catch {
return json(
{
success: false,
error: "Invalid action URL, must be valid http/https protocol",
},
{ status: 200 }
);
if (action !== undefined) {
try {
// Test that action is full URL
new URL(action);
} catch {
throw new Error(
"Invalid action URL, must be valid http/https protocol"
);
}
}
}

const formInfo = {
formData,
projectId,
action: action ?? null,
method: getMethod(method),
pageUrl: pageUrl.toString(),
toEmail: contactEmail,
fromEmail: pageUrl.hostname + "@webstudio.email",
} as const;

const result = await n8nHandler({
formInfo,
hookUrl: context.N8N_FORM_EMAIL_HOOK,
});
const formInfo = {
formData,
projectId,
action: action ?? null,
method: getMethod(method),
pageUrl: pageUrl.toString(),
toEmail: contactEmail,
fromEmail: pageUrl.hostname + "@webstudio.email",
} as const;

const result = await n8nHandler({
formInfo,
hookUrl: context.N8N_FORM_EMAIL_HOOK,
});

return result;
return result;
} catch (error) {
console.error(error);

return {
success: false,
errors: [error instanceof Error ? error.message : "Unknown error"],
};
}
};

const Outlet = () => {
Expand Down
126 changes: 75 additions & 51 deletions fixtures/webstudio-custom-template/app/routes/[script-test]._index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,11 @@ import {
} from "@remix-run/server-runtime";
import { useLoaderData } from "@remix-run/react";
import { ReactSdkContext } from "@webstudio-is/react-sdk";
import { n8nHandler, getFormId } from "@webstudio-is/form-handlers";
import {
n8nHandler,
formIdFieldName,
formBotFieldName,
} from "@webstudio-is/form-handlers";
import {
Page,
siteName,
Expand Down Expand Up @@ -240,66 +244,86 @@ const getMethod = (value: string | undefined) => {
}
};

export const action = async ({ request, context }: ActionFunctionArgs) => {
const formData = await request.formData();
export const action = async ({
request,
context,
}: ActionFunctionArgs): Promise<
{ success: true } | { success: false; errors: string[] }
> => {
try {
const formData = await request.formData();

const formId = getFormId(formData);
if (formId === undefined) {
// We're throwing rather than returning { success: false }
// because this isn't supposed to happen normally: bug or malicious user
throw json("Form not found", { status: 404 });
}
const formId = formData.get(formIdFieldName);

const formProperties = formsProperties.get(formId);
if (formId == null || typeof formId !== "string") {
throw new Error("No form id in FormData");
}

// form properties are not defined when defaults are used
const { action, method } = formProperties ?? {};
const formBotValue = formData.get(formBotFieldName);

if (contactEmail === undefined) {
return { success: false };
}
if (formBotValue == null || typeof formBotValue !== "string") {
throw new Error("Form bot field not found");
}

// wrapped in try/catch just in cases new URL() throws
// (should not happen)
let pageUrl: URL;
try {
pageUrl = new URL(request.url);
const submitTime = parseInt(formBotValue, 16);
// Assumes that the difference between the server time and the form submission time,
// including any client-server time drift, is within a 5-minute range.
// Note: submitTime might be NaN because formBotValue can be any string used for logging purposes.
// Example: `formBotValue: jsdom`, or `formBotValue: headless-env`
if (
Number.isNaN(submitTime) ||
Math.abs(Date.now() - submitTime) > 1000 * 60 * 5
) {
throw new Error(`Form bot value invalid ${formBotValue}`);
}

const formProperties = formsProperties.get(formId);

// form properties are not defined when defaults are used
const { action, method } = formProperties ?? {};

if (contactEmail === undefined) {
throw new Error("Contact email not found");
}

const pageUrl = new URL(request.url);
pageUrl.host = getRequestHost(request);
} catch {
return { success: false };
}

if (action !== undefined) {
try {
// Test that action is full URL
new URL(action);
} catch {
return json(
{
success: false,
error: "Invalid action URL, must be valid http/https protocol",
},
{ status: 200 }
);
if (action !== undefined) {
try {
// Test that action is full URL
new URL(action);
} catch {
throw new Error(
"Invalid action URL, must be valid http/https protocol"
);
}
}
}

const formInfo = {
formData,
projectId,
action: action ?? null,
method: getMethod(method),
pageUrl: pageUrl.toString(),
toEmail: contactEmail,
fromEmail: pageUrl.hostname + "@webstudio.email",
} as const;

const result = await n8nHandler({
formInfo,
hookUrl: context.N8N_FORM_EMAIL_HOOK,
});
const formInfo = {
formData,
projectId,
action: action ?? null,
method: getMethod(method),
pageUrl: pageUrl.toString(),
toEmail: contactEmail,
fromEmail: pageUrl.hostname + "@webstudio.email",
} as const;

const result = await n8nHandler({
formInfo,
hookUrl: context.N8N_FORM_EMAIL_HOOK,
});

return result;
return result;
} catch (error) {
console.error(error);

return {
success: false,
errors: [error instanceof Error ? error.message : "Unknown error"],
};
}
};

const Outlet = () => {
Expand Down
Loading
Loading