insert anti-forgery checking in devextreme ajax

Author: GoodDayForSurf

apps/demos/Demos/FileUploader/FileUploading/Angular/app/app.component.ts

@@ -1,4 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
+import 'anti-forgery';
 import { Component, enableProdMode, Pipe, PipeTransform, provideZoneChangeDetection } from '@angular/core';
 import { DxCheckBoxModule, DxFileUploaderModule, DxSelectBoxModule } from 'devextreme-angular';
 

apps/demos/Demos/FileUploader/FileUploading/React/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import 'anti-forgery';
 
 import App from './App.tsx';
 

apps/demos/Demos/FileUploader/FileUploading/Vue/index.ts

@@ -1,4 +1,5 @@
 import { createApp } from 'vue';
+import 'anti-forgery';
 import App from './App.vue';
 
 createApp(App).mount('#app');

apps/demos/Demos/FileUploader/FileUploading/jQuery/index.html

@@ -8,6 +8,7 @@
     <script src="../../../../node_modules/jquery/dist/jquery.min.js"></script>
     <link rel="stylesheet" type="text/css" href="../../../../node_modules/devextreme-dist/css/dx.light.css" />
     <script src="../../../../node_modules/devextreme-dist/js/dx.all.js"></script>
+    <script src="/shared/anti-forgery/jquery.js"></script>
     <link rel="stylesheet" type="text/css" href="styles.css" />
     <script src="index.js"></script>
   </head>

apps/demos/shared/anti-forgery/frameworks.js

@@ -1,17 +1,10 @@
 import ajax from 'devextreme/core/utils/ajax';
+import { Deferred } from 'devextreme/core/utils/deferred';
 
 const sendRequestOrig = ajax.sendRequest;
 const fetchOrig = fetch;
 const BASE_PATH = 'https://js.devexpress.com/Demos/NetCore';
 
-ajax.sendRequest = (options) => {
-  options.xhrFields = {
-    withCredentials: true,
-  };
-
-  return sendRequestOrig(options);
-};
-
 async function fetchAntiForgeryToken() {
   try {
     const response = await fetchOrig(`${BASE_PATH}/api/Common/GetAntiForgeryToken`, {
@@ -49,6 +42,35 @@ async function getAntiForgeryTokenValue() {
   return tokenData;
 }
 
+ajax.sendRequest = (options) => {
+  const deferred = new Deferred();
+
+  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();
 

apps/demos/shared/anti-forgery/jquery.js

@@ -1,5 +1,6 @@
-/* global $ */
+/* global $, DevExpress */
 const orig$ = $;
+const ajaxSendRequestOrig = DevExpress.utils.ajax.sendRequest;
 
 function fetchAntiForgeryToken() {
   const d = orig$.Deferred();
@@ -50,11 +51,26 @@ async function setAntiForgery() {
     } 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(...args);
+  }
 }
 
 // eslint-disable-next-line no-global-assign