Progress® Telerik® UI for Blazor Feedback Portal
Back to Feed
Request a Feature Report a Bug
Declined
Last Updated: 09 Mar 2022 17:05 by ADMIN
Alexander
Created on: 25 Feb 2022 17:08
Category: Button
Type: Bug Report
0
TelerikButton: disabled state can be circumvented to trigger OnClick

Consider the following Blazor markup:

<TelerikButton OnClick="@MyClickHandler" Enabled="false">Click me!</TelerikButton>

 

This will be rendered as a disabled HTML button with the class k-disabled. If a malicious user edits the DOM to remove the disabled attribute and said class, the button will become enabled. If the user then clicks the button, the registered OnClick EventCallback gets executed, even though Enabled is set to false.

Telerik-REPL link https://blazorrepl.telerik.com/QcumwJPA47xzAake54

Here is a JavaScript function that can be used to enable the disabled button (please make sure to use the correct JavaScript context when using it inside the Browsers DevTools):

function enableButton() {
    const element = document.getElementById("button_2");
    element.disabled = false;
    element.classList.remove("k-disabled");

}

We are not sure if this can be considered a bug or if the registered OnClick EventCallback is supposed to make sure the button is enabled. It would, however, make sense for a Blazor Server environment if the TelerikButton component would check its Enabled state before triggering the EventCallback.

4 comments
ADMIN
Dimo
Posted on: 09 Mar 2022 17:05

Thanks for the PR, Alexander!

I merged it and updated your Telerik points :)

Regards,
Dimo
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Alexander
Posted on: 04 Mar 2022 09:58

I understand your points, but I do not fully agree with them. If I wanted to write plain HTML and be responsible for everything that goes along with that I would not use Telerik UI for Blazor. Maybe I misunderstood and Telerik UI for Blazor is just a UI framework like Bootstrap, in that case your point of view is correct.

 

In any case I think the documentation (https://docs.telerik.com/blazor-ui/components/button/disabled-button) should at least be updated to make it clear that setting "Enabled" to "false" does not necessarily mean what one expects. I created a pull request doing so: https://github.com/telerik/blazor-docs/pull/818 

ADMIN
Svetoslav Dimitrov
Posted on: 04 Mar 2022 09:27

Hello Alexander,

Indeed, this is the expected behavior when inspecting any HTML button in the browser's developer console. The same behavior can be observed to a standard <button> HTML tag. The best resolution to this behavior would be, as Benjamin rightfully said, to conditionally fire the business logic in the OnClick handler. 

That being said, I am marking this bug report as "Declined" as this is not a specific Telerik behavior.  

Regards,
Svetoslav Dimitrov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Benjamin
Posted on: 02 Mar 2022 11:13

This is the intended behaviour in HTML combined with the developer console.

We had the same "issue". Just add an additional check in your OnClick method. Never trust the DOM :)

Create an account Log In
View
Type
Status
Category