feature #2022 [LiveComponent] Update CSRF token after component request (tijnema)

This PR was squashed before being merged into the 2.x branch.

Discussion
----------

[LiveComponent] Update CSRF token after component request

| Q             | A
| ------------- | ---
| Bug fix?      | yes
| New feature?  | yes
| Issues        |
| License       | MIT

When CSRF is enabled on live components, each request will received a new CSRF token in the response. Currently all subsequent requests made by live components will use the initial CSRF token received. This PR solves this, by updating the CSRF token with the one received in the last response.

Commits
-------

52ca1c9 [LiveComponent] Update CSRF token after component request

Author: smnandre

src/LiveComponent/assets/dist/Backend/Backend.d.ts

@@ -13,6 +13,7 @@ export interface BackendInterface {
     }, files: {
         [key: string]: FileList;
     }): BackendRequest;
+    updateCsrfToken(csrfToken: string): void;
 }
 export interface BackendAction {
     name: string;
@@ -28,4 +29,5 @@ export default class implements BackendInterface {
     }, files: {
         [key: string]: FileList;
     }): BackendRequest;
+    updateCsrfToken(csrfToken: string): void;
 }

src/LiveComponent/assets/dist/Backend/RequestBuilder.d.ts

@@ -2,7 +2,7 @@ import type { BackendAction, ChildrenFingerprints } from './Backend';
 export default class {
     private url;
     private method;
-    private readonly csrfToken;
+    private csrfToken;
     constructor(url: string, method?: 'get' | 'post', csrfToken?: string | null);
     buildRequest(props: any, actions: BackendAction[], updated: {
         [key: string]: any;
@@ -15,4 +15,5 @@ export default class {
         fetchOptions: RequestInit;
     };
     private willDataFitInUrl;
+    updateCsrfToken(csrfToken: string): void;
 }

src/LiveComponent/assets/dist/live_controller.js

@@ -2052,6 +2052,9 @@ class Component {
                 return response;
             }
             this.processRerender(html, backendResponse);
+            if (this.element.dataset.liveCsrfValue) {
+                this.backend.updateCsrfToken(this.element.dataset.liveCsrfValue);
+            }
             this.backendRequest = null;
             thisPromiseResolve(backendResponse);
             if (this.isRequestPending) {
@@ -2325,6 +2328,9 @@ class RequestBuilder {
         const urlEncodedJsonData = new URLSearchParams(propsJson + updatedJson + childrenJson + propsFromParentJson).toString();
         return (urlEncodedJsonData + params.toString()).length < 1500;
     }
+    updateCsrfToken(csrfToken) {
+        this.csrfToken = csrfToken;
+    }
 }
 
 class Backend {
@@ -2335,6 +2341,9 @@ class Backend {
         const { url, fetchOptions } = this.requestBuilder.buildRequest(props, actions, updated, children, updatedPropsFromParent, files);
         return new BackendRequest(fetch(url, fetchOptions), actions.map((backendAction) => backendAction.name), Object.keys(updated));
     }
+    updateCsrfToken(csrfToken) {
+        this.requestBuilder.updateCsrfToken(csrfToken);
+    }
 }
 
 class StimulusElementDriver {

src/LiveComponent/assets/src/Backend/Backend.ts

@@ -15,6 +15,7 @@ export interface BackendInterface {
         updatedPropsFromParent: { [key: string]: any },
         files: { [key: string]: FileList }
     ): BackendRequest;
+    updateCsrfToken(csrfToken: string): void;
 }
 
 export interface BackendAction {
@@ -52,4 +53,8 @@ export default class implements BackendInterface {
             Object.keys(updated)
         );
     }
+
+    updateCsrfToken(csrfToken: string) {
+        this.requestBuilder.updateCsrfToken(csrfToken);
+    }
 }

src/LiveComponent/assets/src/Backend/RequestBuilder.ts

@@ -3,7 +3,7 @@ import type { BackendAction, ChildrenFingerprints } from './Backend';
 export default class {
     private url: string;
     private method: 'get' | 'post';
-    private readonly csrfToken: string | null;
+    private csrfToken: string | null;
 
     constructor(url: string, method: 'get' | 'post' = 'post', csrfToken: string | null = null) {
         this.url = url;
@@ -117,4 +117,8 @@ export default class {
         // if the URL gets remotely close to 2000 chars, it may not fit
         return (urlEncodedJsonData + params.toString()).length < 1500;
     }
+
+    updateCsrfToken(csrfToken: string) {
+        this.csrfToken = csrfToken;
+    }
 }

src/LiveComponent/assets/src/Component/index.ts

@@ -329,6 +329,11 @@ export default class Component {
 
             this.processRerender(html, backendResponse);
 
+            // Store updated csrf token
+            if (this.element.dataset.liveCsrfValue) {
+                this.backend.updateCsrfToken(this.element.dataset.liveCsrfValue);
+            }
+
             // finally resolve this promise
             this.backendRequest = null;
             thisPromiseResolve(backendResponse);

src/LiveComponent/assets/test/controller/render.test.ts

@@ -630,4 +630,23 @@ describe('LiveController rendering Tests', () => {
         // verify the selectedIndex of the select option 2 is 0
         expect(selectOption2.selectedIndex).toBe(0);
     });
+
+    it('backend will have a new csrf token', async () => {
+        const test = await createTest(
+            {},
+            (data: any) => `
+            <div ${initComponent(data)} data-live-csrf-value="${data.csrf}">
+            </div>
+        `
+        );
+
+        test.expectsAjaxCall().serverWillChangeProps((data: any) => {
+            // change csrf token
+            data.csrf = 'Hello';
+        });
+
+        await test.component.render();
+
+        expect(test.mockedBackend.csrfToken).toEqual('Hello');
+    });
 });

src/LiveComponent/assets/test/tools.ts

@@ -98,6 +98,8 @@ class FunctionalTest {
 class MockedBackend implements BackendInterface {
     private expectedMockedAjaxCalls: Array<MockedAjaxCall> = [];
 
+    public csrfToken: string | null = null;
+
     addMockedAjaxCall(mock: MockedAjaxCall) {
         this.expectedMockedAjaxCalls.push(mock);
     }
@@ -139,6 +141,10 @@ class MockedBackend implements BackendInterface {
         return matchedMock.createBackendRequest();
     }
 
+    updateCsrfToken(csrfToken: string) {
+        this.csrfToken = csrfToken;
+    }
+
     getExpectedMockedAjaxCalls(): Array<MockedAjaxCall> {
         return this.expectedMockedAjaxCalls;
     }