[Live Components] is writeable:false realy safe?

[tito10047]

Hi, I have component

class Captcha{
	#[LiveProp(writable: false)]
	public ?bool $recaptchaVerified = null;
	
	#[LiveAction]
	public function checkCaptcha(GoogleCaptcha $captcha,#[LiveArg] $token): void {
		$this->recaptchaVerified = $captcha->captchaverify($token);
	}
}

My question is:

It is property $recaptchaVerified realy readonly and can't be modified from fronted?

If is, How do you save state of this property on server?

Thanks

[tito10047]

Anybody know this? its realy important to use all this things. @smnandre did you know?

Thanks

[smnandre]

A "quick" response that simplifies many aspects but could still be useful for others. 🙂

How Does This Work?

1. User Visits → First Render

A user navigates to a page like /foo/bar using a browser that includes a LiveComponent, such as a “Captcha.”
The PHP code renders a complete HTML page containing the LiveComponent during the first render. This includes HTML tags with the component’s props (the “state”), serialized with a checksum.

2. Server Response → Browser

When the browser receives the page, the LiveComponent JavaScript extracts the props from the HTML and updates any necessary values (though typically not needed during the first render). It also retains a copy of the state returned by the server.

3. User Action → Server

When the user interacts (e.g., clicks a live action or types in an input field), the JavaScript records these changes and maintains a map of “updated data.”
The LiveComponent JavaScript then sends this information to the server. The server processes these changes and re-renders the LiveComponent to update the front end accordingly.
This cycle continues as long as the user doesn’t reload the page or navigate to another one.

No Trust

For this system to function, when the browser sends changes to the server, it must also send the previous “state” since the server doesn’t inherently know what occurred on the client side.

Therefore, the server needs to trust the data coming from the browser. Multiple security measures are in place to ensure the data appears legitimate (not corrupted) and can be reused.

However, this is in no way a security measure.

LiveComponents facilitate interactions with users, but any modified data must be validated before being persisted or used to grant user privileges, access, etc.

As with controllers, it’s the developer’s responsibility to implement authentication and authorization checks within their application.

Pragmatic Usage

Ultimately, it’s about balancing risks and costs. To address your question:

• High-Security Contexts: If you’re using a Captcha to grant access to sensitive accounts, such as NASDAQ financial managers accessing their company accounts, I wouldn’t recommend relying solely on live props. Hackers with malicious intent could potentially alter them.
• Low-Risk Scenarios: If you’re using a Captcha to prevent bots from spamming a forum, it’s very safe. In fact, nowadays, Captchas are likely a higher priority concern for security.

Good Practices

Use LiveComponent Actions Only with POST

Ensure that actions triggered by LiveComponents use only POST requests. This enhances security by preventing sensitive actions from being exposed via GET requests.

Follow Symfony Security Recommendations

Adhere to Symfony’s best security practices, such as strict input validation, protection against CSRF (Cross-Site Request Forgery) attacks, and utilizing built-in authentication and authorization mechanisms.

Keep Dependencies Updated

Regularly update your Composer packages to benefit from the latest security fixes and performance improvements. Use composer update routinely and check for vulnerabilities with tools like composer audit.

Never Trust External Sources

Always treat data from external sources as untrusted. Validate and sanitize all incoming data before using or storing it to prevent injections and other attacks.

---

I hope this answers your question :)