bug #2537 [LiveComponent] Prevent __component property to be serial…

…ized when called `JSON.stringify()` (Kocal)

This PR was merged into the 2.x branch.

Discussion
----------

[LiveComponent] Prevent `__component` property to be serialized when called `JSON.stringify()`

| Q             | A
| ------------- | ---
| Bug fix?      | yes
| New feature?  | no <!-- please update src/**/CHANGELOG.md files -->
| Issues        | Fix #... <!-- prefix each issue number with "Fix #", no need to create an issue if none exist, explain below instead -->
| License       | MIT

<!--
Replace this notice by a description of your feature/bugfix.
This will help reviewers and should be a good start for the documentation.

Additionally (see https://symfony.com/releases):
 - Always add tests and ensure they pass.
 - For new features, provide some code snippets to help understand usage.
 - Features and deprecations must be submitted against branch main.
 - Changelog entry should follow https://symfony.com/doc/current/contributing/code/conventions.html#writing-a-changelog-entry
 - Never break backward compatibility (see https://symfony.com/bc).
-->

Following https://symfony-devs.slack.com/archives/C01FN4EQNLX/p1738238525455439

With some RUM tools that listen user interactions, some of them can `JSON.stringify()` their payload. But if their payload contains an HTML element with the property `__component` (which represents a `Proxy` to the `LiveComponent` instance), then it tries to be serialized and lead to an error by trying to call an action `toJSON` and trigger an XHR request to `/toJSON`:
![image](https://github.com/user-attachments/assets/0538ebe7-8fff-4104-aacd-5954661cea0d)

Let's change the property assignment with `Object.defineProperty()`, so the property is not enumarable and so not serialized when `JSON.stringify()` is called:
<img width="648" alt="image" src="https://github.com/user-attachments/assets/dc18c06b-0793-424c-b561-b72647ec4d93" />

cc `@jwage`

Commits
-------

e04f8f0 [LiveComponent] Prevent `__component` property to be serialized when called `JSON.stringify()`

src/LiveComponent/CHANGELOG.md

@@ -3,6 +3,7 @@
 ## 2.23.0
 
 -   Allow configuring the secret used to compute fingerprints and checksums.
+-   Prevent `__component` property to be serialized when called `JSON.stringify()`
 
 ## 2.22.0
 

src/LiveComponent/assets/dist/live_controller.js

@@ -3059,7 +3059,10 @@ class LiveControllerDefault extends Controller {
         const id = this.element.id || null;
         this.component = new Component(this.element, this.nameValue, this.propsValue, this.listenersValue, id, LiveControllerDefault.backendFactory(this), new StimulusElementDriver(this));
         this.proxiedComponent = proxifyComponent(this.component);
-        this.element.__component = this.proxiedComponent;
+        Object.defineProperty(this.element, '__component', {
+            value: this.proxiedComponent,
+            writable: true,
+        });
         if (this.hasDebounceValue) {
             this.component.defaultDebounce = this.debounceValue;
         }

src/LiveComponent/assets/src/live_controller.ts

@@ -285,8 +285,10 @@ export default class LiveControllerDefault extends Controller<HTMLElement> imple
         );
         this.proxiedComponent = proxifyComponent(this.component);
 
-        // @ts-ignore Adding the dynamic property
-        this.element.__component = this.proxiedComponent;
+        Object.defineProperty(this.element, '__component', {
+            value: this.proxiedComponent,
+            writable: true,
+        });
 
         if (this.hasDebounceValue) {
             this.component.defaultDebounce = this.debounceValue;