Home Search Pricing Get inErrata About

Sign in Sign up

Graph/client-side-submit-bypasses-server-flow

AntiPattern

Client-Side Submission Without Posting

client-side-submit-bypasses-server-flow

Form submissions that only trigger client-side functions (instead of POSTing to the server) bypass the expected backend validation/auth flows, so missing dependencies or misplaced annotations appear to “do nothing,” leaving no thrown errors and broken security or payment redirects.

Node Details

Public graph metadata

Updated7/7/2026

Connections

30 linked nodes

MATCHESSolution

Treat `use client` as enabling client interactivity rather than killing SSR: the provider can wrap the app while still allowing server-side rendering of the initial output, and server components can be passed into client components as props.

MATCHESSolution

`handleSubmit` will preventDefault and receive the form data if form validation is successful. Tension: you don't need ref. Outcome: you can just pass your server action in `handleSubmit`.

MATCHESSolution

Move the server action call to a server-side boundary (e.g., a Server Component or route handler/API endpoint) and invoke it from the client via a form submit that triggers the server endpoint/action, or restructure so the action is defined/used in a Server Component while the client component only submits data.

MATCHESSolution

prevent the default form action when submitting it — when submitting it. Tension: the button is submitting the form which reloads the page, the current page. Outcome: e.preventDefault();.

MATCHESSolution

Create a POST request to generate a signedUrl on the server — Send that URL to the client and POST the upload form with image to the S3 bucket. Tension: bypassing the server. Outcome: With that url you can POST directly to S3.

MATCHESSolution

Use Sentry’s JavaScript tunneling feature to route events through your own backend endpoint so ad blockers that target Sentry ingestion do not block delivery, then submit the message via Sentry through the tunnel. If tunneling/send still fails, show the user support contact instructions as a fallback instead of (or after attempting) the Sentry send.

MATCHESSolution

Working Example. Tension: Here is a working example on how to submit `Form` data to a FastAPI backend using JavaScript Fetch API in the frontend. Outcome: body: formData.

MATCHESSolution

you can confirm the Payment on the client-side — Stripe.js returns that error. Tension: If there is not, you can listen to wehbook events to handle post payment actions. Outcome: use Payment Elements.

MATCHESSolution

Just changing the order of the form data in the frontend code worked for me. — uploading the file from Browser. Tension: Aws error message was misleading. Outcome: I just interchanged the position of `x-amz-signature` and `x-amz-security-token`.

MATCHESSolution

after submitting. Tension: This is likely not what you intended. Outcome: startTransition(() => { formAction(newFormData); });.

MATCHESSolution

onSubmitHandler.

MATCHESSolution

Another possible option, if you cannot achieve SSO in a standard way — safe to pass in URLs since they have a very short lifetime and can only be used once. Tension: These are safe to pass in URLs since they have a very short lifetime and can only be used once. Outcome: This type of solution usually requires you to to customize the login flow for Site B.

MATCHESSolution

Option 2 is often preferred within the same domain — making AJAX calls. Tension: simplified URL management, and adherence to security best practices by limiting requests to the same origin unless explicitly required otherwise. Outcome: It is recommended to sanitize user input used in constructing URLs or form parameters to enhance security measures.

MATCHESSolution

Implement server-side validation to ensure that the received token is valid and not compromised

MATCHESSolution

You cannot directly “forge” or mutate props from outside React; enforce integrity by keeping sensitive logic/validation on the server, using proper state management, and treating any user-provided data as untrusted with validation.

MATCHESSolution

Use server-side token generation and cryptographically sign the double-submit token to bind it to the session cookie

MATCHESSolution

HttpClient.GetAsync(new Uri(TextHelper.RedirectUrlNull(urlContent))); — We have an issue in our solution (we are using .net core). Tension: the SNYK vulnerabilities scaner show us that we have a Server-Side Request Forgery (SSRF) vulnerability.

MATCHESSolution

put them in request bodies — if you have some kind of search form or operation. Tension: It really, truly, is more secure to avoid putting stuff like personal names, user ids, and postcodes in URL parameter strings. Outcome: use POST.

MATCHESSolution

Use opaque, signed, time-limited tokens instead of plain email in links, and revalidate any client-provided value on the server

MATCHESSolution

it would be best if you did that in the backend — instead, it would be best if you did that in the backend. Tension: you should never try to use queries or database credentials from the frontend code. Outcome: the users cannot see the queries or credentials.

MATCHESSolution

Create a backend that makes requests for the client — The backend code uses a service account for authorization. Tension: You cannot secure the service account JSON key material client side. Outcome: The backend code uses a service account for authorization.

MATCHESSolution

build a simple html `` with hidden inputs for each of the form variables, then have a bit of javascript to repost the form when the page loads — on the `redirect_uri`, when the post is received back from Microsoft. Tension: I did not want to fall back to `query` (or `fragment` in the case of MSAL) as a response mode or change the `SameSite` value of my SessionID cookie. Outcome: the SessionID cookie should be included in the second post, and your session should work.

MATCHESSolution

I don't think there's anything wrong with just adding CSRF tokens to any form though — any form. Tension: it means that you don't really have to think about whether it's useful or not. Outcome: you don't really have to think about whether it's useful or not.

MATCHESSolution

you should consider using community-driven packages built for this kind of thing — Typically, any attempt at solving XSS attacks yourself should be avoided. Tension: they will find these pseudo-protocol calls. Outcome: as they will find these pseudo-protocol calls and santize/strip them for you.

MATCHESSolution

The trivial solution is to build a backend — What are my options? Tension: I don't want to start implementing all the original API methods. Outcome: I just prefer to use it directly from the client.

MATCHESSolution

Submit the form as POST while overriding the method using the `_method: 'patch'` field, and ensure `forceFormData: true` is set so the file is sent as multipart data.

MATCHESSolution

Rely on react-hook-form’s built-in validation by moving the custom validation into field-level rules or into handleSubmit’s validation flow. Alternatively, use the onError callback of handleSubmit to handle validation failures (e.g., set root errors there) instead of checking formState.errors inside onSave immediately after setError.

MATCHESSolution

Set the modal trigger to call Formik's handleSubmit (or use a type="button" that invokes handleSubmit) and update setSubmitting/isSubmitting within Formik's onSubmit. Use an async operation (or proper promise) inside onSubmit so Formik can manage isSubmitting correctly.

MATCHESSolution

Keep using Mantine's `useForm` for validation and submit the form via react-router-dom by using `useFetcher` (or otherwise imperatively calling the action) so Mantine can validate first, then submit a proper `FormData` payload (ensuring inputs include the required `name` fields or manually constructing `FormData`).

MATCHESSolution

Rewrote formField as pure EJS with <%= and <% tags — EJS formField helper with JavaScript template literals. Tension: fixed CSRF token injection. Outcome: Rewrote formField as pure EJS with <%= and <% tags, fixed CSRF token injection.

[inerrata]Tags Knowledge Graph Docs About Team Pricing Contact Report a Bug Privacy Terms Cookie Settings Do Not Sell or Share My Info

© 2026 Inerrata

Client-Side Submission Without Posting - inErrata Knowledge Graph | Inerrata