feature #2251 [LiveComponent] Remove CSRF tokens - rely on same-origin/CORS instead (nicolas-grekas)

This PR was merged into the 2.x branch.

Discussion
----------

[LiveComponent] Remove CSRF tokens - rely on same-origin/CORS instead

| Q             | A
| ------------- | ---
| Bug fix?      | no
| New feature?  | could be
| Issues        | Fixes #2177
| License       | MIT

This PR replaces token-based CSRF-protection by same-origin/CORS policies.
It replaces #2250

Commits
-------

e3c0ef5 [LiveComponent] Remove CSRF tokens - rely on same-origin/CORS instead

Author: kbond

src/LiveComponent/CHANGELOG.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## 2.22.0
+
+-   Remove CSRF tokens - rely on same-origin/CORS instead
+
+## 2.19.0
+
 -   Add `submitForm()` to `TestLiveComponent`.
 -   Add `live_action` Twig function
 

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

@@ -13,21 +13,19 @@ export interface BackendInterface {
     }, files: {
         [key: string]: FileList;
     }): BackendRequest;
-    updateCsrfToken(csrfToken: string): void;
 }
 export interface BackendAction {
     name: string;
     args: Record<string, string>;
 }
 export default class implements BackendInterface {
     private readonly requestBuilder;
-    constructor(url: string, method?: 'get' | 'post', csrfToken?: string | null);
+    constructor(url: string, method?: 'get' | 'post');
     makeRequest(props: any, actions: BackendAction[], updated: {
         [key: string]: any;
     }, children: ChildrenFingerprints, updatedPropsFromParent: {
         [key: string]: any;
     }, files: {
         [key: string]: FileList;
     }): BackendRequest;
-    updateCsrfToken(csrfToken: string): void;
 }

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

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

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

@@ -25,7 +25,6 @@ export default class LiveControllerDefault extends Controller<HTMLElement> imple
             type: ObjectConstructor;
             default: {};
         };
-        csrf: StringConstructor;
         listeners: {
             type: ArrayConstructor;
             default: never[];
@@ -59,7 +58,6 @@ export default class LiveControllerDefault extends Controller<HTMLElement> imple
     readonly urlValue: string;
     readonly propsValue: any;
     propsUpdatedFromParentValue: any;
-    readonly csrfValue: string;
     readonly listenersValue: Array<{
         event: string;
         action: string;

src/LiveComponent/assets/dist/live_controller.js

@@ -2052,9 +2052,6 @@ 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) {
@@ -2255,10 +2252,9 @@ class BackendRequest {
 }
 
 class RequestBuilder {
-    constructor(url, method = 'post', csrfToken = null) {
+    constructor(url, method = 'post') {
         this.url = url;
         this.method = method;
-        this.csrfToken = csrfToken;
     }
     buildRequest(props, actions, updated, children, updatedPropsFromParent, files) {
         const splitUrl = this.url.split('?');
@@ -2295,9 +2291,6 @@ class RequestBuilder {
             if (hasFingerprints) {
                 requestData.children = children;
             }
-            if (this.csrfToken && (actions.length || totalFiles)) {
-                fetchOptions.headers['X-CSRF-TOKEN'] = this.csrfToken;
-            }
             if (actions.length > 0) {
                 if (actions.length === 1) {
                     requestData.args = actions[0].args;
@@ -2328,22 +2321,16 @@ class RequestBuilder {
         const urlEncodedJsonData = new URLSearchParams(propsJson + updatedJson + childrenJson + propsFromParentJson).toString();
         return (urlEncodedJsonData + params.toString()).length < 1500;
     }
-    updateCsrfToken(csrfToken) {
-        this.csrfToken = csrfToken;
-    }
 }
 
 class Backend {
-    constructor(url, method = 'post', csrfToken = null) {
-        this.requestBuilder = new RequestBuilder(url, method, csrfToken);
+    constructor(url, method = 'post') {
+        this.requestBuilder = new RequestBuilder(url, method);
     }
     makeRequest(props, actions, updated, children, updatedPropsFromParent, files) {
         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 {
@@ -3203,7 +3190,6 @@ LiveControllerDefault.values = {
     url: String,
     props: { type: Object, default: {} },
     propsUpdatedFromParent: { type: Object, default: {} },
-    csrf: String,
     listeners: { type: Array, default: [] },
     eventsToEmit: { type: Array, default: [] },
     eventsToDispatch: { type: Array, default: [] },
@@ -3212,6 +3198,6 @@ LiveControllerDefault.values = {
     requestMethod: { type: String, default: 'post' },
     queryMapping: { type: Object, default: {} },
 };
-LiveControllerDefault.backendFactory = (controller) => new Backend(controller.urlValue, controller.requestMethodValue, controller.csrfValue);
+LiveControllerDefault.backendFactory = (controller) => new Backend(controller.urlValue, controller.requestMethodValue);
 
 export { Component, LiveControllerDefault as default, getComponent };

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

@@ -15,7 +15,6 @@ export interface BackendInterface {
         updatedPropsFromParent: { [key: string]: any },
         files: { [key: string]: FileList }
     ): BackendRequest;
-    updateCsrfToken(csrfToken: string): void;
 }
 
 export interface BackendAction {
@@ -26,8 +25,8 @@ export interface BackendAction {
 export default class implements BackendInterface {
     private readonly requestBuilder: RequestBuilder;
 
-    constructor(url: string, method: 'get' | 'post' = 'post', csrfToken: string | null = null) {
-        this.requestBuilder = new RequestBuilder(url, method, csrfToken);
+    constructor(url: string, method: 'get' | 'post' = 'post') {
+        this.requestBuilder = new RequestBuilder(url, method);
     }
 
     makeRequest(
@@ -53,8 +52,4 @@ export default class implements BackendInterface {
             Object.keys(updated)
         );
     }
-
-    updateCsrfToken(csrfToken: string) {
-        this.requestBuilder.updateCsrfToken(csrfToken);
-    }
 }

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

@@ -3,12 +3,10 @@ import type { BackendAction, ChildrenFingerprints } from './Backend';
 export default class {
     private url: string;
     private method: 'get' | 'post';
-    private csrfToken: string | null;
 
-    constructor(url: string, method: 'get' | 'post' = 'post', csrfToken: string | null = null) {
+    constructor(url: string, method: 'get' | 'post' = 'post') {
         this.url = url;
         this.method = method;
-        this.csrfToken = csrfToken;
     }
 
     buildRequest(
@@ -64,10 +62,6 @@ export default class {
                 requestData.children = children;
             }
 
-            if (this.csrfToken && (actions.length || totalFiles)) {
-                fetchOptions.headers['X-CSRF-TOKEN'] = this.csrfToken;
-            }
-
             if (actions.length > 0) {
                 // one or more ACTIONs
 
@@ -117,8 +111,4 @@ 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,11 +329,6 @@ 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/src/live_controller.ts

@@ -36,7 +36,6 @@ export default class LiveControllerDefault extends Controller<HTMLElement> imple
         url: String,
         props: { type: Object, default: {} },
         propsUpdatedFromParent: { type: Object, default: {} },
-        csrf: String,
         listeners: { type: Array, default: [] },
         eventsToEmit: { type: Array, default: [] },
         eventsToDispatch: { type: Array, default: [] },
@@ -50,7 +49,6 @@ export default class LiveControllerDefault extends Controller<HTMLElement> imple
     declare readonly urlValue: string;
     declare readonly propsValue: any;
     declare propsUpdatedFromParentValue: any;
-    declare readonly csrfValue: string;
     declare readonly listenersValue: Array<{ event: string; action: string }>;
     declare readonly eventsToEmitValue: Array<{
         event: string;
@@ -79,7 +77,7 @@ export default class LiveControllerDefault extends Controller<HTMLElement> imple
     private pendingFiles: { [key: string]: HTMLInputElement } = {};
 
     static backendFactory: (controller: LiveControllerDefault) => BackendInterface = (controller) =>
-        new Backend(controller.urlValue, controller.requestMethodValue, controller.csrfValue);
+        new Backend(controller.urlValue, controller.requestMethodValue);
 
     initialize() {
         this.mutationObserver = new MutationObserver(this.onMutations.bind(this));

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

@@ -2,7 +2,7 @@ import RequestBuilder from '../../src/Backend/RequestBuilder';
 
 describe('buildRequest', () => {
     it('sets basic data on GET request', () => {
-        const builder = new RequestBuilder('/_components?existing_param=1', 'get', '_the_csrf_token');
+        const builder = new RequestBuilder('/_components?existing_param=1', 'get');
         const { url, fetchOptions } = builder.buildRequest(
             { firstName: 'Ryan' },
             [],
@@ -23,7 +23,7 @@ describe('buildRequest', () => {
     });
 
     it('sets basic data on POST request', () => {
-        const builder = new RequestBuilder('/_components', 'post', '_the_csrf_token');
+        const builder = new RequestBuilder('/_components', 'post');
         const { url, fetchOptions } = builder.buildRequest(
             { firstName: 'Ryan' },
             [
@@ -42,7 +42,6 @@ describe('buildRequest', () => {
         expect(fetchOptions.method).toEqual('POST');
         expect(fetchOptions.headers).toEqual({
             Accept: 'application/vnd.live-component+html',
-            'X-CSRF-TOKEN': '_the_csrf_token',
             'X-Requested-With': 'XMLHttpRequest',
         });
         const body = <FormData>fetchOptions.body;
@@ -58,7 +57,7 @@ describe('buildRequest', () => {
     });
 
     it('sets basic data on POST request with batch actions', () => {
-        const builder = new RequestBuilder('/_components', 'post', '_the_csrf_token');
+        const builder = new RequestBuilder('/_components', 'post');
         const { url, fetchOptions } = builder.buildRequest(
             { firstName: 'Ryan' },
             [
@@ -101,7 +100,7 @@ describe('buildRequest', () => {
 
     // when data is too long it makes a post request
     it('makes a POST request when data is too long', () => {
-        const builder = new RequestBuilder('/_components', 'get', '_the_csrf_token');
+        const builder = new RequestBuilder('/_components', 'get');
         const { url, fetchOptions } = builder.buildRequest(
             { firstName: 'Ryan'.repeat(1000) },
             [],
@@ -129,7 +128,7 @@ describe('buildRequest', () => {
     });
 
     it('makes a POST request when method is post', () => {
-        const builder = new RequestBuilder('/_components', 'post', '_the_csrf_token');
+        const builder = new RequestBuilder('/_components', 'post');
         const { url, fetchOptions } = builder.buildRequest(
             {
                 firstName: 'Ryan',
@@ -161,7 +160,7 @@ describe('buildRequest', () => {
     });
 
     it('sends propsFromParent when specified', () => {
-        const builder = new RequestBuilder('/_components?existing_param=1', 'get', '_the_csrf_token');
+        const builder = new RequestBuilder('/_components?existing_param=1', 'get');
         const { url } = builder.buildRequest({ firstName: 'Ryan' }, [], { firstName: 'Kevin' }, {}, { count: 5 }, {});
 
         expect(url).toEqual(
@@ -216,7 +215,7 @@ describe('buildRequest', () => {
     };
 
     it('Sends file with request', () => {
-        const builder = new RequestBuilder('/_components', 'post', '_the_csrf_token');
+        const builder = new RequestBuilder('/_components', 'post');
 
         const { url, fetchOptions } = builder.buildRequest(
             { firstName: 'Ryan' },
@@ -231,7 +230,6 @@ describe('buildRequest', () => {
         expect(fetchOptions.method).toEqual('POST');
         expect(fetchOptions.headers).toEqual({
             Accept: 'application/vnd.live-component+html',
-            'X-CSRF-TOKEN': '_the_csrf_token',
             'X-Requested-With': 'XMLHttpRequest',
         });
         const body = <FormData>fetchOptions.body;
@@ -241,7 +239,7 @@ describe('buildRequest', () => {
     });
 
     it('Sends multiple files with request', () => {
-        const builder = new RequestBuilder('/_components', 'post', '_the_csrf_token');
+        const builder = new RequestBuilder('/_components', 'post');
 
         const { url, fetchOptions } = builder.buildRequest(
             { firstName: 'Ryan' },
@@ -256,7 +254,6 @@ describe('buildRequest', () => {
         expect(fetchOptions.method).toEqual('POST');
         expect(fetchOptions.headers).toEqual({
             Accept: 'application/vnd.live-component+html',
-            'X-CSRF-TOKEN': '_the_csrf_token',
             'X-Requested-With': 'XMLHttpRequest',
         });
         const body = <FormData>fetchOptions.body;