Should I validate reCAPTCHA on frontend or backend?

Question

I am trying to implement Google's reCAPTCHA on a Vue app that has a backend of Java. I started an implementation that validates reCAPTCHA on backend side as shown on the following link:

https://dzone.com/articles/using-google-recaptcha-with-spring-boot-applicatio

However, I am not sure if there is a need to make the validation on backend side or what the difference between using only frontend or frontend + backend for this reCAPTCHA validation. At first glance, I think making the validation on frontend side seems better and there is no need to pass the request to the backend if the reCAPTCHA is nor validated.

So, could you pls clarify me about this issues? And if you have an experience, could you give me an example implementation page or example for Vue and Java (Spring)?

Answer 1

You cannot validate on the frontend as this would expose your reCaptcha secret key. Validation has to be done by a backend service.

You should have a look to reCaptcha documentation, it's relatively straight forward to implement: https://developers.google.com/recaptcha/intro

Answer 2

First of all, you always need backend validation because frontend validation cannot be trusted. However, you should still have client side (frontend) validation so that your server can take a break sometimes.

Secondly, you will get 2 keys from google (reCAPTCHA V2): site-key & secrete-key. NEVER expose secrete-key to frontend (html page), NEVER. It takes only the site-key to do the job on client side validation. Secret-key is for backend validation. It's always more safe there(at the server)