feat(ajax.ts): send XSRF cookies in a custom header

api_guard/dist/types/ajax/index.d.ts

@@ -14,6 +14,8 @@ export interface AjaxConfig {
     url: string;
     user?: string;
     withCredentials?: boolean;
+    xsrfCookieName?: string;
+    xsrfHeaderName?: string;
 }
 
 export interface AjaxError extends Error {

spec/observables/dom/ajax-spec.ts

@@ -113,6 +113,87 @@ describe('ajax', () => {
     });
   });
 
+  describe('ajax XSRF cookie in custom header', () => {
+    beforeEach(() => {
+      (global as any).document = {
+        cookie: 'foo=bar',
+      } as Document;
+    });
+
+    afterEach(() => {
+      delete (global as any).document; 
+    });
+
+    it('should send the cookie with a custom header to the same domain', () => {
+      const obj: AjaxConfig = {
+        url: '/some/path',
+        xsrfCookieName: 'foo',
+        xsrfHeaderName: 'Custom-Header-Name',
+      };
+
+      ajax(obj).subscribe();
+
+      const request = MockXMLHttpRequest.mostRecent;
+
+      expect(request.url).to.equal('/some/path');
+      expect(request.requestHeaders).to.deep.equal({
+        'Custom-Header-Name': 'bar',
+        'x-requested-with': 'XMLHttpRequest',
+      });
+    });
+
+    it('should send the cookie cross-domain with a custom header when withCredentials is set', () => {
+      const obj: AjaxConfig = {
+        url: 'https://some.subresouce.net/some/page',
+        xsrfCookieName: 'foo',
+        xsrfHeaderName: 'Custom-Header-Name',
+        crossDomain: true,
+        withCredentials: true,
+      };
+
+      ajax(obj).subscribe();
+
+      const request = MockXMLHttpRequest.mostRecent;
+
+      expect(request.url).to.equal('https://some.subresouce.net/some/page');
+      expect(request.requestHeaders).to.deep.equal({
+        'Custom-Header-Name': 'bar',
+      });
+    });
+
+    it('should not send the cookie cross-domain with a custom header when withCredentials is not set', () => {
+      const obj: AjaxConfig = {
+        url: 'https://some.subresouce.net/some/page',
+        xsrfCookieName: 'foo',
+        xsrfHeaderName: 'Custom-Header-Name',
+        crossDomain: true,
+      };
+
+      ajax(obj).subscribe();
+
+      const request = MockXMLHttpRequest.mostRecent;
+
+      expect(request.url).to.equal('https://some.subresouce.net/some/page');
+      expect(request.requestHeaders).to.deep.equal({});
+    });
+
+    it('should not send the cookie if there is no xsrfHeaderName option', () => {
+      const obj: AjaxConfig = {
+        url: '/some/page',
+        xsrfCookieName: 'foo',
+      };
+
+      ajax(obj).subscribe();
+
+      const request = MockXMLHttpRequest.mostRecent;
+
+      expect(request.url).to.equal('/some/page');
+      expect(request.requestHeaders).to.deep.equal({
+        'x-requested-with': 'XMLHttpRequest',
+      });
+    });
+  });
+
   it('should set the X-Requested-With if crossDomain is false', () => {
     ajax({
       url: '/test/monkey',

src/internal/ajax/ajax.ts

@@ -295,6 +295,16 @@ export function fromAjax<T>(config: AjaxConfig): Observable<AjaxResponse<T>> {
       headers['x-requested-with'] = 'XMLHttpRequest';
     }
 
+    // Allow users to provide their XSRF cookie name and the name of a custom header to use to
+    // send the cookie.
+    const { withCredentials, xsrfCookieName, xsrfHeaderName } = config;
+    if ((withCredentials || !config.crossDomain) && xsrfCookieName && xsrfHeaderName) {
+      const xsrfCookie = document?.cookie.match(new RegExp(`(^|;\\s*)(${xsrfCookieName})=([^;]*)`))?.pop() ?? '';
+      if (xsrfCookie) {
+        headers[xsrfHeaderName] = xsrfCookie;
+      }
+    }
+
     // Examine the body and determine whether or not to serialize it
     // and set the content-type in `headers`, if we're able.
     let body: any;

src/internal/ajax/types.ts

@@ -133,6 +133,16 @@ export interface AjaxConfig {
    */
   withCredentials?: boolean;
 
+  /**
+   * The name of your site's XSRF cookie.
+   */
+  xsrfCookieName?: string;
+
+  /**
+   * The name of a custom header that you can use to send your XSRF cookie.
+   */
+  xsrfHeaderName?: string;
+
   /**
    * Can be set to change the response type.
    * Valid values are `"arraybuffer"`, `"blob"`, `"document"`, `"json"`, and `"text"`.