防止我的 React / Gatsby 联系表被劫持

Question

I've a Gatsby (React) page with a contact-form which sends the params to an API endpoint. The form is on the browsers client side.

That Api Endpoint sends to an Email service provider, so far so good.

BUT how can I prevent people from sending emails directly to that endpoint /api/contact-form, in my contact-form I have a ReCaptcha to do that, but the API endpoint is not "secured".

First I thought I can do that with a "host"-check... but the page is on the client side...

Is it the right approach to create a token, when the page is delivered to the client, and check it then against on the API endpoint?

Answer 1

I assume you're talking about CSRF token. It is definitely one way to prevent CSRF attacks. The other option could be setting cors to allow only specific origins to access your API endpoints.