feat: Allow withCredentials for XHR

scripts/server.cjs

@@ -12,6 +12,17 @@ exports.createServer = function (port, enableAtomics) {
     if (url.pathname === '/') {
       res.writeHead(301, { Location: '/tests/' });
       return res.end();
+    } else if (url.pathname === '/api/cookie') {
+      const name = url.searchParams.get('name');
+      let date = new Date();
+      date.setTime(date.getTime() + 24 * 60 * 60 * 1000); // 24 hours from now
+      let expires = date.toUTCString();
+      res.writeHead(200, {
+        'Set-Cookie': `${name}=1; Path=/; Domain=localhost; expires=${expires}; SameSite=Lax;`,
+        'Access-Control-Allow-Origin': req.headers.origin ? req.headers.origin : '*',
+        'Access-Control-Allow-Credentials': 'true',
+      });
+      return res.end();
     } else if (url.pathname.endsWith('post')) {
       res.writeHead(200);
       let body = '';

src/lib/sandbox/read-main-platform.ts

@@ -7,12 +7,7 @@ import {
   serializeConfig,
 } from '../utils';
 import { config, docImpl, libPath, mainWindow } from './main-globals';
-import {
-  InterfaceType,
-  InterfaceInfo,
-  InterfaceMember,
-  InitWebWorkerData,
-} from '../types';
+import { InterfaceType, InterfaceInfo, InterfaceMember, InitWebWorkerData } from '../types';
 
 export const readMainPlatform = () => {
   const elm = docImpl.createElement('i');
@@ -66,7 +61,7 @@ export const readMainPlatform = () => {
     $config$,
     $interfaces$: readImplementations(impls, initialInterfaces),
     $libPath$: new URL(libPath, mainWindow.location as any) + '',
-    $origin$: origin
+    $origin$: origin,
   };
 
   addGlobalConstructorUsingPrototype(

src/lib/types.ts

@@ -448,6 +448,11 @@ export interface PartytownConfig {
   get?: GetHook;
   set?: SetHook;
   apply?: ApplyHook;
+  /**
+   * When set to true, the Partytown Web Worker will respect the `withCredentials` option of XMLHttpRequests.
+   * Default: false
+   */
+  allowXhrCredentials?: boolean;
   /**
    * An absolute path to the root directory which Partytown library files
    * can be found. The library path must start and end with a `/`.

src/lib/web-worker/init-web-worker.ts

@@ -1,7 +1,4 @@
-import {
-  commaSplit,
-  webWorkerCtx,
-} from './worker-constants';
+import { commaSplit, webWorkerCtx } from './worker-constants';
 import type { InitWebWorkerData, PartytownInternalConfig } from '../types';
 
 export const initWebWorker = (initWebWorkerData: InitWebWorkerData) => {

src/lib/web-worker/worker-storage.ts

@@ -52,7 +52,7 @@ export const addStorageApi = (
 
     get length() {
       if (isSameOrigin) {
-        return getter(win, [storageName, 'length'])
+        return getter(win, [storageName, 'length']);
       } else {
         warnCrossOrigin('length', storageName, env);
       }

src/lib/web-worker/worker-window.ts

@@ -587,7 +587,11 @@ export const createWindow = (
               args[1] = resolveUrl(env, args[1], 'xhr');
               (super.open as any)(...args);
             }
-            set withCredentials(_: any) {}
+            set withCredentials(_: boolean) {
+              if (webWorkerCtx.$config$.allowXhrCredentials) {
+                super.withCredentials = _;
+              }
+            }
             toString() {
               return str;
             }

tests/platform/fetch/fetch.spec.ts

@@ -13,6 +13,10 @@ test('fetch', async ({ page }) => {
   const testFetchJson = page.locator('#testFetchJson');
   await expect(testFetchJson).toHaveText('{"mph":88}');
 
+  await page.waitForSelector('.testFetchCookie');
+  const testFetchCookie = page.locator('#testFetchCookie');
+  await expect(testFetchCookie).toContainText('server-test-fetch=1');
+
   await page.waitForSelector('.testXMLHttpRequest');
   const testXMLHttpRequest = page.locator('#testXMLHttpRequest');
   await expect(testXMLHttpRequest).toHaveText('text');
@@ -22,4 +26,8 @@ test('fetch', async ({ page }) => {
 
   const testXMLHttpRequestCstrNative = page.locator('#testXMLHttpRequestCstrNative');
   await expect(testXMLHttpRequestCstrNative).toHaveText('true');
+
+  await page.waitForSelector('.testXMLHttpRequestCookie');
+  const testXMLHttpRequestCookie = page.locator('#testXMLHttpRequestCookie');
+  await expect(testXMLHttpRequestCookie).toContainText('server-test-xhr=1');
 });

tests/platform/fetch/index.html

@@ -91,6 +91,24 @@ <h1>fetch() / XMLHttpRequest</h1>
         </script>
       </li>
 
+      <li>
+        <strong>fetch Set-Cookie</strong>
+        <code>
+          <span id="testFetchCookie"></span>
+        </code>
+        <script type="text/partytown">
+          (async function () {
+            const url = new URL('/api/cookie?name=server-test-fetch', location.origin);
+            const elm = document.getElementById('testFetchCookie');
+            const rsp = await fetch(url, {
+              credentials: 'include',
+            });
+            elm.textContent = document.cookie;
+            elm.className = 'testFetchCookie';
+          })();
+        </script>
+      </li>
+
       <li>
         <strong>XMLHttpRequest</strong>
         <code id="testXMLHttpRequest"></code>
@@ -161,6 +179,27 @@ <h1>fetch() / XMLHttpRequest</h1>
         </script>
       </li>
 
+      <li>
+        <strong>XMLHttpRequest Set-Cookie</strong>
+        <code>
+          <span id="testXMLHttpRequestCookie"></span>
+        </code>
+        <script type="text/partytown">
+          (async function () {
+            const url = new URL('/api/cookie?name=server-test-xhr', location.origin);
+            const elm = document.getElementById('testXMLHttpRequestCookie');
+            const xhr = new XMLHttpRequest();
+            xhr.addEventListener('load', function () {
+              elm.textContent = document.cookie;
+              elm.className = 'testXMLHttpRequestCookie';
+            });
+            xhr.open('GET', url);
+            xhr.withCredentials = true;
+            xhr.send();
+          })();
+        </script>
+      </li>
+
       <script type="text/partytown">
         (function () {
           document.body.classList.add('completed');