merge, no commit, ff (DevExpress#32322), put import last, rename files with override, deferred fallback / wg esm vs default

mpreyskurantov · mpreyskurantov · commit 667672a89d9c · 2026-02-17T12:13:32.000+02:00
diff --git a/apps/demos/Demos/DataGrid/BatchUpdateRequest/Angular/app/app.component.ts b/apps/demos/Demos/DataGrid/BatchUpdateRequest/Angular/app/app.component.ts
@@ -4,6 +4,7 @@ import { HttpClient, provideHttpClient, withFetch } from '@angular/common/http';
 import { lastValueFrom } from 'rxjs';
 import * as AspNetData from 'devextreme-aspnet-data-nojquery';
 import { DxDataGridComponent, DxDataGridModule, DxDataGridTypes } from 'devextreme-angular/ui/data-grid';
+import 'anti-forgery';
 
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
diff --git a/apps/demos/Demos/DataGrid/BatchUpdateRequest/React/index.tsx b/apps/demos/Demos/DataGrid/BatchUpdateRequest/React/index.tsx
@@ -2,6 +2,8 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 import App from './App.tsx';
+// eslint-disable-next-line import/no-unresolved
+import 'anti-forgery';
 
 ReactDOM.render(
   <App />,
diff --git a/apps/demos/Demos/DataGrid/BatchUpdateRequest/ReactJs/index.js b/apps/demos/Demos/DataGrid/BatchUpdateRequest/ReactJs/index.js
@@ -1,5 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App.js';
+// eslint-disable-next-line import/no-unresolved
+import 'anti-forgery';
 
 ReactDOM.render(<App />, document.getElementById('app'));
diff --git a/apps/demos/Demos/DataGrid/BatchUpdateRequest/Vue/index.ts b/apps/demos/Demos/DataGrid/BatchUpdateRequest/Vue/index.ts
@@ -1,4 +1,5 @@
 import { createApp } from 'vue';
 import App from './App.vue';
+import 'anti-forgery';
 
 createApp(App).mount('#app');
diff --git a/apps/demos/Demos/DataGrid/BatchUpdateRequest/jQuery/index.html b/apps/demos/Demos/DataGrid/BatchUpdateRequest/jQuery/index.html
@@ -10,6 +10,7 @@
     <link rel="stylesheet" type="text/css" href="styles.css" />
     <script src="../../../../node_modules/devextreme-dist/js/dx.all.js"></script>
     <script src="../../../../node_modules/devextreme-aspnet-data/js/dx.aspnet.data.js"></script>
+    <script src="/shared/anti-forgery/jquery-override.js"></script>
     <script src="index.js"></script>
   </head>
   <body class="dx-viewport">
diff --git a/apps/demos/configs/Angular/config.js b/apps/demos/configs/Angular/config.js
@@ -155,8 +155,10 @@ window.config = {
     'npm:': '../../../../node_modules/',
     'bundles:': '../../../../bundles/',
     'externals:': '../../../../bundles/externals/',
+    'anti-forgery:': '../../../../shared/anti-forgery/',
   },
   map: {
+    'anti-forgery': 'anti-forgery:fetch-override.js',
     'ts': 'npm:plugin-typescript/lib/plugin.js',
     'typescript': 'npm:typescript/lib/typescript.js',
     'jszip': 'npm:jszip/dist/jszip.min.js',
diff --git a/apps/demos/configs/React/config.js b/apps/demos/configs/React/config.js
@@ -46,9 +46,11 @@ window.config = {
     'npm:': '../../../../node_modules/',
     'bundles:': '../../../../bundles/',
     'externals:': '../../../../bundles/externals/',
+    'anti-forgery:': '../../../../shared/anti-forgery/',
   },
   defaultExtension: 'js',
   map: {
+    'anti-forgery': 'anti-forgery:fetch-override.js',
     'ts': 'npm:plugin-typescript/lib/plugin.js',
     'typescript': 'npm:typescript/lib/typescript.js',
     'jszip': 'npm:jszip/dist/jszip.min.js',
diff --git a/apps/demos/configs/ReactJs/config.js b/apps/demos/configs/ReactJs/config.js
@@ -46,9 +46,11 @@ window.config = {
     'npm:': '../../../../node_modules/',
     'bundles:': '../../../../bundles/',
     'externals:': '../../../../bundles/externals/',
+    'anti-forgery:': '../../../../shared/anti-forgery/',
   },
   defaultExtension: 'js',
   map: {
+    'anti-forgery': 'anti-forgery:fetch-override.js',
     'ts': 'npm:plugin-typescript/lib/plugin.js',
     'typescript': 'npm:typescript/lib/typescript.js',
     'jszip': 'npm:jszip/dist/jszip.min.js',
diff --git a/apps/demos/configs/Vue/config.js b/apps/demos/configs/Vue/config.js
@@ -44,8 +44,10 @@ window.config = {
     'npm:': '../../../../node_modules/',
     'bundles:': '../../../../bundles/',
     'externals:': '../../../../bundles/externals/',
+    'anti-forgery:': '../../../../shared/anti-forgery/',
   },
   map: {
+    'anti-forgery': 'anti-forgery:fetch-override.js',
     'vue': 'npm:vue/dist/vue.esm-browser.js',
     '@vue/shared': 'npm:@vue/shared/dist/shared.cjs.prod.js',
     'vue-loader': 'npm:dx-systemjs-vue-browser/index.js',
diff --git a/apps/demos/shared/anti-forgery/fetch-override.js b/apps/demos/shared/anti-forgery/fetch-override.js
@@ -0,0 +1,100 @@
+import ajax from 'devextreme/core/utils/ajax';
+import { Deferred } from 'devextreme/core/utils/deferred';
+
+const sendRequestOrig = ajax.sendRequest;
+const fetchOrig = fetch;
+let antiForgeryGettingPromise = null;
+
+async function fetchAntiForgeryToken() {
+  try {
+    const response = await fetchOrig('https://js.devexpress.com/Demos/NetCore/api/Common/GetAntiForgeryToken', {
+      method: 'GET',
+      credentials: 'include',
+      cache: 'no-cache',
+    });
+
+    if (!response.ok) {
+      const errorMessage = await response.text();
+      throw new Error(`Failed to retrieve anti-forgery token: ${errorMessage || response.statusText}`);
+    }
+
+    return await response.json();
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+    throw new Error(errorMessage);
+  }
+}
+
+async function getAntiForgeryTokenValue() {
+  const tokenMeta = document.querySelector('meta[name="csrf-token"]');
+
+  if (tokenMeta) {
+    const headerName = tokenMeta.dataset.headerName || 'RequestVerificationToken';
+    const token = tokenMeta.getAttribute('content') || '';
+
+    return Promise.resolve({ headerName, token });
+  }
+
+  if (!antiForgeryGettingPromise) {
+    antiForgeryGettingPromise = fetchAntiForgeryToken();
+  }
+
+  const tokenData = await antiForgeryGettingPromise;
+  const meta = document.createElement('meta');
+
+  meta.name = 'csrf-token';
+  meta.content = tokenData.token;
+  meta.dataset.headerName = tokenData.headerName;
+  document.head.appendChild(meta);
+  antiForgeryGettingPromise = null;
+
+  return tokenData;
+}
+
+ajax.sendRequest = (options) => {
+  const deferred = typeof Deferred !== 'undefined' ? new Deferred() : (() => {
+    let resolve;
+    let reject;
+    // eslint-disable-next-line spellcheck/spell-checker
+    const promise = new Promise((res, rej) => { resolve = res; reject = rej; });
+    return { promise: () => promise, resolve, reject };
+  })();
+
+  getAntiForgeryTokenValue().then(({ headerName, token }) => {
+    options.headers = {
+      [headerName]: token,
+      ...(options.headers || {}),
+    };
+
+    options.xhrFields = {
+      withCredentials: true,
+    };
+
+    sendRequestOrig(options).then(
+      (result) => {
+        deferred.resolve(result);
+        if (result.success) {
+          deferred.resolve(result);
+        } else {
+          deferred.reject(result);
+        }
+      },
+      (e) => deferred.reject(e),
+    );
+  });
+
+  return deferred.promise();
+};
+
+window.fetch = async (url, options = {}) => {
+  const { headerName, token } = await getAntiForgeryTokenValue();
+
+  options.headers = {
+    [headerName]: token,
+    ...(options.headers || {}),
+  };
+
+  options.credentials = 'include';
+
+  return fetchOrig(url, options);
+};
diff --git a/apps/demos/shared/anti-forgery/jquery-override.js b/apps/demos/shared/anti-forgery/jquery-override.js
@@ -0,0 +1,88 @@
+/* global $, DevExpress */
+const orig$ = $;
+const ajaxSendRequestOrig = DevExpress.utils.ajax.sendRequest;
+let antiForgerySettingPromise = null;
+
+function fetchAntiForgeryToken() {
+  const d = orig$.Deferred();
+
+  orig$.ajax({
+    url: 'https://js.devexpress.com/Demos/NetCore/api/Common/GetAntiForgeryToken',
+    method: 'GET',
+    xhrFields: { withCredentials: true },
+    cache: false,
+  }).done((data) => {
+    d.resolve(data);
+  }).fail((xhr) => {
+    const error = xhr.responseJSON?.message || xhr.statusText || 'Unknown error';
+    d.reject(new Error(`Failed to retrieve anti-forgery token: ${error}`));
+  });
+
+  return d.promise();
+}
+
+function getAntiForgeryTokenValue() {
+  const tokenMeta = document.querySelector('meta[name="csrf-token"]');
+  if (tokenMeta) {
+    const headerName = tokenMeta.dataset.headerName || 'RequestVerificationToken';
+    const token = tokenMeta.getAttribute('content');
+    return orig$.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;
+  });
+}
+
+async function setAntiForgery() {
+  const originalAjax = orig$.ajax;
+  const tokenData = await getAntiForgeryTokenValue();
+
+  // eslint-disable-next-line no-global-assign
+  $ = orig$;
+  antiForgerySettingPromise = null;
+
+  $.ajax = (url, options) => {
+    if (typeof url !== 'string') {
+      // eslint-disable-next-line no-param-reassign
+      options = url;
+    } else {
+      options.url = url;
+    }
+
+    options.headers = { [tokenData.headerName]: tokenData.token, ...(options.headers || {}) };
+    options.xhrFields = { withCredentials: true, ...(options.xhrFields || {}) };
+
+    return originalAjax.call(this, options);
+  };
+
+  DevExpress.utils.ajax.sendRequest = (options) => {
+    options.headers = {
+      [tokenData.headerName]: tokenData.token,
+      ...(options.headers || {}),
+    };
+
+    options.xhrFields = {
+      withCredentials: true,
+      ...(options.xhrFields || {}),
+    };
+
+    return ajaxSendRequestOrig(options);
+  };
+}
+
+// eslint-disable-next-line no-global-assign
+$ = (...args) => orig$(async () => {
+  if (!antiForgerySettingPromise) {
+    antiForgerySettingPromise = setAntiForgery();
+  }
+
+  await antiForgerySettingPromise;
+
+  return $(...args);
+});
