WIP: Demos | BackEnd / EndPoints anti forgery

apps/demos/Demos/DataGrid/BatchUpdateRequest/jQuery/index.js

@@ -1,12 +1,49 @@
+const BASE_PATH = 'http://localhost:5555';
+// const BASE_PATH = 'https://js.devexpress.com/Demos/NetCore';
+
 $(() => {
-  const URL = 'https://js.devexpress.com/Demos/NetCore/api/DataGridWebApi';
+  const URL = `${BASE_PATH}/api/DataGridBatchUpdateWebApi`;
+
+  function fetchAntiForgeryToken() {
+    return $.ajax({
+      url: `${BASE_PATH}/api/Common/GetAntiForgeryToken`,
+      method: 'GET',
+      xhrFields: { withCredentials: true },
+      cache: false,
+    }).fail((xhr) => {
+      const error = xhr.responseJSON?.message || xhr.statusText || 'Unknown error';
+      throw new Error(`Failed to retrieve anti-forgery token: ${error}`);
+    });
+  }
+
+  function getAntiForgeryTokenValue() {
+    const tokenMeta = document.querySelector('meta[name="csrf-token"]');
+    if (tokenMeta) {
+      const headerName = tokenMeta.dataset.headerName || 'RequestVerificationToken';
+      const token = tokenMeta.getAttribute('content');
+      return $.Deferred().resolve({ headerName, token });
+    }
+
+    return fetchAntiForgeryToken().then((tokenData) => {
+      const meta = document.createElement('meta');
+      meta.name = 'csrf-token';
+      meta.content = tokenData.token;
+      meta.dataset.headerName = tokenData.headerName;
+      document.head.appendChild(meta);
+      return tokenData;
+    });
+  }
 
   $('#gridContainer').dxDataGrid({
     dataSource: DevExpress.data.AspNet.createStore({
       key: 'OrderID',
       loadUrl: `${URL}/Orders`,
-      onBeforeSend(method, ajaxOptions) {
-        ajaxOptions.xhrFields = { withCredentials: true };
+      async onBeforeSend(__method, ajaxOptions) {
+        const tokenData = await getAntiForgeryTokenValue();
+        ajaxOptions.xhrFields = {
+          withCredentials: true,
+          headers: { [tokenData.headerName]: tokenData.token },
+        };
       },
     }),
     pager: {
@@ -26,11 +63,11 @@ $(() => {
 
       if (e.changes.length) {
         const changes = normalizeChanges(e.changes);
-        e.promise = sendBatchRequest(`${URL}/Batch`, changes).done(() => {
-          e.component.refresh(true).done(() => {
+        e.promise = getAntiForgeryTokenValue().then((tokenData) => sendBatchRequest(`${URL}/Batch`, changes, { [tokenData.headerName]: tokenData.token }))
+          .then(() => e.component.refresh(true))
+          .then(() => {
             e.component.cancelEditData();
           });
-        });
       }
     },
     columns: [{
@@ -77,17 +114,19 @@ $(() => {
     });
   }
 
-  function sendBatchRequest(url, changes) {
+  function sendBatchRequest(url, changes, headers) {
     const d = $.Deferred();
 
     $.ajax(url, {
       method: 'POST',
       data: JSON.stringify(changes),
+      headers,
       cache: false,
       contentType: 'application/json',
       xhrFields: { withCredentials: true },
     }).done(d.resolve).fail((xhr) => {
-      d.reject(xhr.responseJSON ? xhr.responseJSON.Message : xhr.statusText);
+      const errorMessage = xhr.responseJSON?.Message || xhr.statusText || 'Unknown error';
+      d.reject(new Error(`Batch save failed: ${errorMessage}`));
     });
 
     return d.promise();

apps/demos/Demos/DataGrid/CollaborativeEditing/jQuery/index.js

@@ -1,3 +1,7 @@
+const BASE_PATH = 'http://localhost:5555';
+//const BASE_PATH = 'https://js.devexpress.com/Demos/NetCore';
+let csrf = null;
+
 $(() => {
   $.type = $.type || function (obj) {
     if (obj == null) {
@@ -7,8 +11,7 @@ $(() => {
     return typeof obj;
   };
 
-  const BASE_PATH = 'https://js.devexpress.com/Demos/NetCore/';
-  const url = `${BASE_PATH}api/DataGridCollaborativeEditing/`;
+  const url = `${BASE_PATH}/api/DataGridCollaborativeEditing/`;
   const groupId = new DevExpress.data.Guid().toString();
 
   const createStore = function () {
@@ -20,6 +23,12 @@ $(() => {
       deleteUrl: url,
       onBeforeSend(method, ajaxOptions) {
         ajaxOptions.data.groupId = groupId;
+        ajaxOptions.xhrFields = { withCredentials: true };
+        if (method === 'insert') {
+          ajaxOptions.headers = {
+            [csrf['headerName']]: csrf['token']
+          };
+        }
       },
     });
   };
@@ -59,7 +68,7 @@ $(() => {
           lookup: {
             dataSource: DevExpress.data.AspNet.createStore({
               key: 'ID',
-              loadUrl: `${BASE_PATH}api/DataGridStatesLookup`,
+              loadUrl: `${BASE_PATH}/api/DataGridStatesLookup`,
             }),
             displayExpr: 'Name',
             valueExpr: 'ID',
@@ -90,7 +99,7 @@ $(() => {
   createDataGrid('grid1', store1);
   createDataGrid('grid2', store2);
 
-  const hubUrl = `${BASE_PATH}dataGridCollaborativeEditingHub?GroupId=${groupId}`;
+  const hubUrl = `${BASE_PATH}/DataGridCollaborativeEditingHub?GroupId=${groupId}`;
   const connection = new signalR.HubConnectionBuilder()
     .withUrl(hubUrl, {
       skipNegotiation: true,
@@ -114,3 +123,11 @@ $(() => {
       });
     });
 });
+
+(async () => {
+  const response = await fetch(`${BASE_PATH}/api/Common/GetAntiForgeryToken`, {
+    credentials: 'include'
+  });
+  const data = await response.text();
+  csrf = JSON.parse(data);
+})();