[Bug]: ReCaptcha - possible security breach + misguided documentation

[drma-tech]

Blazorise Version

all

What Blazorise provider are you running on?

Bootstrap5

Link to minimal reproduction or a simple code snippet

https://dev.streamingdiscovery.com/login-providers

Steps to reproduce

follow documentation

What is expected?

be able to connect correctly with Google and securely

What is actually happening?

I followed the example in the documentation, but I soon came across a CORS error, because I'm using WASM and the call is made from the browser. After researching, I discovered that the correct thing to do would be to call it from an API, not directly from the WEB project (no matter what settings you make in the Google Console). But I also noticed a second problem: I saw a lot of comments from people saying that this key shouldn't be public, but private. But the documentation says that the key should be configured in program.cs, which makes it public to the user, since it's in the source code.

What browsers do you see the problem on?

Chrome

Any additional comments?

No response

[drma-tech]

I also received a warning from GitHub about uploading the source code with this key. In other words, it is also suggesting that the recaptcha key must be private under any circumstances.

[David-Moreira]

Hello, Since you are using WASM which runs your app on the client side, it is true you should implement server validation. The public key, is exactly that a public key that only your server with the private key should be able to validate against it. There are also additional measures over at google admin console, so the public key is only valid against domains you configure.

You do not need to commit the public key to your source code repository as any other secret. You should have something like a pipeline command running to replace the value with your production secret. It will be visible by users if they really want to see it, but again, the server validation makes it secure.

Maybe we're not clear in the docs, but you should follow the google recaptcha documentation to make sure everything is implemented correctly, we do have an example that showcases the server implementation: In the screenshot below from the docs find the example of the validation that should be running in the server, in our docs we've made it run in the app itself, because it's Blazor Server, and to simplify the example: The private key should be in the server. https://blazorise.com/docs/extensions/captcha

As for the CORS error, this error is happening when communicating with your own API is this not correct? You should configure it so whatever domain you're crossing is supported, by properly configuring the cors headers.

[drma-tech]

@David-Moreira

I think I still don't understand. I put the validation/communication with Google in the API, but it's no use if the component doesn't work.

if I remove this from wasm, it doesn't work:

.AddBlazoriseGoogleReCaptcha(reCaptchaOptions =>
{
reCaptchaOptions.SiteKey = "6LeewEIqAAAAAP6OSWvgPr016kn5c0tbY909VXM7";
})

if I do this, it complains that the key is missing:

.AddBlazoriseGoogleReCaptcha(reCaptchaOptions =>
{
})

and from what you explained, this SiteKey is the public key, but if that were the case, not even google would be complaining about it:

and I don't know any safe way to leave a key in wasm. so I don't know what I should do to implement this in blazor wasm.

[David-Moreira]

and from what you explained, this SiteKey is the public key, but if that were the case, not even google would be complaining about it:

In the screenshot you send, I don't see it complaining about the public key. Like I said even the name public implies the public usage, it's the exact purpose of a public key is to be able to share it publicly.

Please go over the google documentation and my previous comment to properly implement recaptcha e2e.

Please let me know if you have any doubts with anything. If you're really having difficulties and you still believe Blazorise might have miss-implemented something or something is not working as expected, please provide a github repro with both your frontend and backend validation, and we'll take a look at it.

[github-actions[bot]]

This is an automated message reminding that this issue is expecting the author's answer.

[drma-tech]

security alert for recaptcha key. kind of says that. and this only happened after I uploaded the key to github.

[David-Moreira]

security alert for recaptcha key. kind of says that. and this only happened after I uploaded the key to github.

Read my comment from before regarding reposiotry key commit:

You do not need to commit the public key to your source code repository as any other secret. You should have something like a pipeline command running to replace the value with your production secret. It will be visible by users if they really want to see it, but again, the server validation makes it secure.

[drma-tech]

I don't know what you mean by this pipeline command. ask the API in an encrypted way or something? I don't even know if that's possible, since the configuration is done in program.cs.