Closed lukeraymonddowning closed 3 years ago
In order to make the Livewire component as clean as possible, and to reduce the complexity of form submission vs requests not placed in a form, I've opted to change the reCaptcha input to work on a time based refresh interval. This can be configured in the config file.
It allows for Livewire integration with basically 0 form changes:
<form wire:submit.prevent="submit" method="POST">
@csrf
<x-honey recaptcha/>
<input type="text" name="name">
<input type="email" name="email"
<input type="submit" value="Submit">
</form>
Further changes. There are now 2 traits to separate out honey from recaptcha.
class AnotherExample extends Component
{
use WithHoney, WithRecaptcha;
public function submit()
{
abort_unless($this->honeyPassed);
$this->saveThing();
}
public function render()
{
return <<<'blade'
<div>
<x-honey recaptcha/>
</div>
blade;
}
}
Currently, there are two dynamic properties that can be checked: honeyPassed
and recaptchaPassed
. If you're using both traits, honeyPassed
will actually also test recaptcha too.
In order to support Livewire, a few things need consideration. I've quite quickly gotten it to the point of the standard honeytrap inputs working.
By including a new
HoneyForm
trait on a Livewire component and the<x-honey/>
tag in your component blade file, you have the same protection as when using it in standard REST requests, albeit that Honey doesn't run the checks for you (it doesn't know at which point you're actually "submitting" the form).The challenge comes in the reCaptcha integration. Obviously, Honey needs to get in the way of the form submission and request a token first. Only then should it submit the form. The other solution would be to send a request for a new token every 2 minutes (the reCaptcha token timeout). That way, we can submit the form as normal, and it would become a standard part of the request.