feat: Allow withCredentials for XHR (#557)

QwikDev · Feb 24, 2024 · b2f9b0b · b2f9b0b
1 parent ffb213d
commit b2f9b0b
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 1 deletion.
diff --git a/scripts/server.cjs b/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 = '';

diff --git a/src/lib/types.ts b/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 `/`.

diff --git a/src/lib/web-worker/worker-window.ts b/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;
             }

diff --git a/tests/platform/fetch/fetch.spec.ts b/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');
 });
diff --git a/tests/platform/fetch/index.html b/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');